第二十章 图片按钮部件(lv_imgbtn)

       图片按钮部件和按钮部件是非常相似的，它只不过是在按钮部件的基础上增加了图片显示的功能。

       本章节将分为以下几个小节：

       20.1 图片按钮部件的组成

       20.2 图片按钮部件的相关知识

       20.3 图片按钮部件API函数

       20.4 图片按钮部件实验

        20.1 图片按钮部件的组成

       图片按钮部件只有一个组成部分：主体LV_PART_MAIN。关于部件样式设置的内容，请大家参考6.4.4章节。

        20.2 图片按钮部件的相关知识

       20.2.1 图片的来源

       图片按钮部件支持C语言数组或者外部存储器读取图片源，值得注意的是，它并不支持图标字体。关于图片源的获取，请大家回顾13.2.1章节。

       接下来，我们以简单示例来理解图片源的设置，示例代码如下所示：

LV_IMG_DECLARE(img_zdyz);
 
void lv_mainstart(void)
{
/* 定义并创建图片按钮 */
lv_obj_t* imgbtn = lv_imgbtn_create(lv_scr_act());                          
/* 设置图片释放时的图片 */
lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_RELEASED, NULL, &img_zdyz, NULL); 
/* 设置图片按钮大小 */
lv_obj_set_size(imgbtn, 100, 100);                                          
/* 设置图片按钮位置 */
lv_obj_center(imgbtn);                                                      
    lv_obj_set_style_img_recolor_opa(imgbtn, LV_OPA_30, LV_STATE_PRESSED);
    lv_obj_set_style_img_recolor(imgbtn, lv_color_black(), LV_STATE_PRESSED);
    lv_obj_set_style_translate_y(imgbtn, 5, LV_STATE_PRESSED);
}

       在上述源码中，我们先调用lv_imgbtn_create函数创建图片按钮部件，然后调用lv_imgbtn_set_src函数设置图片源，该函数的第二个形参代表按钮的状态（图片何时生效），第三~五个形参为图片源，一般情况下，第三个和第五个形参设置为NULL。注意：图片源必须声明后才能使用。示例代码可以在PC模拟器中运行（需要有图片源），效果图如下所示：

图20.2.1.1设置图片源

       当我们按下上图中的图片时，该图片会重新着色并往y轴偏移5个像素，如下图所示：

图20.2.1.2按下时的状态

       20.2.2添加/清除的状态

       图片按钮部件支持六个状态，如下所示：

       ① LV_IMGBTN_STATE_RELEASED：释放状态；

       ② LV_IMGBTN_STATE_PRESSED：按下状态；

       ③ LV_IMGBTN_STATE_DISABLED：禁用状态；

       ④ LV_IMGBTN_STATE_CHECKED_RELEASED：点击释放状态；

       ⑤ LV_IMGBTN_STATE_CHECKED_PRESSED：点击按下状态；

       ⑥ LV_IMGBTN_STATE_CHECKED_DISABLED：点击禁用状态；

       如果用户想清除或者添加上述的状态，可调用lv_obj_add/clear_state函数进行设置。

        20.3 图片按钮部件API函数

       LVGL官方提供了一些与图片按钮部件相关API，如下表所示：

表20.3.1 图片按钮部件相关的API函数

       接下来，我们介绍LVGL图片按钮部件常用的API函数：

       1. lv_imgbtn_create函数

       创建图片按钮部件，该函数原型如下所示：

lv_obj_t *lv_imgbtn_create(lv_obj_t *parent);

       该函数的形参，如下表所示：

表20.3.2 lv_imgbtn_create函数形参描述

       返回值：指向图片按钮对象的指针。

       2. lv_imgbtn_set_src函数

       设置图片源，该函数原型如下所示：

void lv_imgbtn_set_src(lv_obj_t *imgbtn, lv_imgbtn_state_t state, 
const void *src_left, 
const void *src_mid, 
const void *src_right);

       该函数的形参，如下表所示：

表20.3.3 lv_imgbtn_set_src函数形参描述

       返回值：无。

       3. lv_imgbtn_set_state函数

       设置图片按钮部件的状态，该函数原型如下所示：

void lv_imgbtn_set_state(lv_obj_t *imgbtn, lv_imgbtn_state_t state);

       该函数的形参，如下表所示：

表20.3.4 lv_imgbtn_set_state函数形参描述

       返回值：无。

        20.4 图片按钮部件实验

       20.4.1 硬件设计

       1. 例程功能

       本实验主要测试图片按钮部件API函数的使用，实验现象：开机后，屏幕上会显示一个图片按钮，用户可以通过KEY2切换当前按钮状态（图片重新着色）。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程17 lv_imgbtn(图片按钮)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。

       20.4.2 软件设计

       20.4.2.1 程序流程图

       本实验的程序流程图，如下图所示：

图20.4.2.1.1 图片按钮部件实验流程图

       20.4.2.2 程序解析

       关于LVGL的用户代码，我们都是在lv_mainstart.c文件中编写的，本实验的源码如下所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_imgbtn();
}
/**************************** 第一部分 结束 ****************************/
 
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  干燥按钮事件回调
 * @param  *e ：事件相关参数的集合，它包含了该事件的所有数据
 * @return 无
 */
static void dry_event_cb(lv_event_t *e)
{
    lv_obj_t *target = lv_event_get_target(e);  /* 获取触发源 */
 
    if(dry_mode_state == 0)                 /* 判断按钮状态，如果为0，即关闭状态 */
    {
        dry_mode_state = 1;                 /* 切换按钮状态 */
/* 设置图片重新着色透明度 */
        lv_obj_set_style_img_recolor_opa(target, 255, 0); 
/* 设置图片重新着色：蓝色 */
        lv_obj_set_style_img_recolor(target, lv_color_hex(0x00a9ff), 0);    
    }
    else                                    /* 按钮为开启状态 */
    {
        dry_mode_state = 0;                 /* 切换按钮状态 */
/* 设置图片重新着色透明度 */
        lv_obj_set_style_img_recolor_opa(target, 255, 0); 
        /* 设置图片重新着色：灰色 */
        lv_obj_set_style_img_recolor(target, lv_color_hex(0x8a8a8a), 0);    
    }
}
 
/**
 * @brief  图片按钮实例
 * @param  无
 * @return 无
 */
static void lv_example_imgbtn(void)
{
    lv_group_t *g = lv_group_create();
    lv_indev_set_group(indev_keypad, g);
    
    /* 干燥模式（图片按钮） */
    lv_obj_t *imgbtn_dry = lv_imgbtn_create(lv_scr_act());    /* 创建图片按钮 */
lv_imgbtn_set_src(imgbtn_dry, LV_IMGBTN_STATE_RELEASED, 
NULL, &img_dry, NULL);                  /* 设置图片源 */
    lv_obj_set_size(imgbtn_dry, 64, 64);                      /* 设置大小 */
lv_obj_align(imgbtn_dry, LV_ALIGN_CENTER, 0, -15);        /* 设置位置 */
/* 添加事件 */
    lv_obj_add_event_cb(imgbtn_dry, dry_event_cb, LV_EVENT_PRESSED, NULL);  
 
    /* 干燥模式（标签） */
    lv_obj_t *label_dry = lv_label_create(lv_scr_act());       /* 创建标签 */
lv_label_set_text(label_dry, "Dry");                       /* 设置文本 */
/* 设置字体 */
lv_obj_set_style_text_font(label_dry, &lv_font_montserrat_22, 0);  
/* 设置位置 */ 
    lv_obj_align_to(label_dry, imgbtn_dry, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);  
    
    lv_group_add_obj(g, imgbtn_dry);
}
/**************************** 第二部分 结束 ****************************/

       上述源码可分为以下两个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了图片按钮部件相关的示例函数；

       ② 图片按钮状态切换的实现。我们创建图片按钮，并为它添加事件回调。当图片按钮被按下时，会触发事件回调，在回调函数中，我们会根据按钮的当前状态来切换重新着色的颜色，这样就可以达到图片按钮状态切换的效果。

       20.4.3 下载验证

       把工程编译并下载到我们的开发板中，用户按下KEY2即可切换按钮状态，切换状态后的图片按钮如下图所示：

图20.4.3.1 图片按钮部件实验