LVGL学习笔记 27 - 图片按键imgbtn

图片按键和按键类似，区别在于背景是图片。创建图片按键句柄：

lv_obj_t* imgBtn = lv_imgbtn_create(lv_scr_act());

还需要通过lv_imgbtn_set_src设置图片

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

src_left/src_mid/src_right分别表示按键的左，中，右图片，下图是一个按键的图片示例：

 按键的左边和右边不变，而中间部分可以重复绘制，从而显示任意长度的按键。

参数state表示设置的图片对应按键的哪种状态，定义如下：

typedef enum {
    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_IMGBTN_STATE_NUM,
} lv_imgbtn_state_t;

RELEASED是基本的状态，如果其他状态没有设置，其他状态会直接使用RELEASED的图片，所以RELEASED必须设置。 可以通过lv_imgbtn_set_state手动改变按键的状态。

按钮的三个图片如下，2个颜色代表2个状态，绿色表示PRESSED状态，蓝色表示RELEASED状态： 

extern "C" {
    LV_IMG_DECLARE(imgBtnLeft);
    LV_IMG_DECLARE(imgBtnMid);
    LV_IMG_DECLARE(imgBtnRight);
    LV_IMG_DECLARE(imgBtnLeft2);
    LV_IMG_DECLARE(imgBtnMid2);
    LV_IMG_DECLARE(imgBtnRight2);
}

lv_imgbtn_set_src(imgBtn, LV_IMGBTN_STATE_RELEASED, &imgBtnLeft, &imgBtnMid, &imgBtnRight);
lv_imgbtn_set_src(imgBtn, LV_IMGBTN_STATE_PRESSED, &imgBtnLeft2, &imgBtnMid2, &imgBtnRight2);
lv_obj_set_align(imgBtn, LV_ALIGN_CENTER);

 改变按键的大小，LVGL会自动绘制Mid部分补齐长度。

lv_obj_set_size(imgBtn, 200, 116);

注意设置的高度最好等于图片的高度，上图中图片是80的高度，设置116并不会让图片在高度上拉伸，如果设置小于实际高度，图片会被截断。