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分别表示按键的左,中,右图片,下图是一个按键的图片示例:

LVGL学习笔记 27 - 图片按键imgbtn_第1张图片

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

参数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学习笔记 27 - 图片按键imgbtn_第2张图片

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

lv_obj_set_size(imgBtn, 200, 116);

LVGL学习笔记 27 - 图片按键imgbtn_第3张图片

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

你可能感兴趣的:(UI,LVGL)