Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了图片控件(lv_img)，本节课带大家来学习一下图片按钮控件，其实我们在前面的教程中既学过图片控件，也学过按钮控件，那么大家可能会好奇了，什么是图片按钮控件呢？其实这个属于按钮控件的派生控件，正如我们前面学习的时候，按钮的风格是很单调的，那么本节课程就是教大家如何做出更加好看的按钮来，废话少说！ 一 有图有真相
看起来是不是像一幅图片？没错，就是一个图片，但是也具备按钮的的属性，这样的效果是不是相比普通的按钮控件更加好看了呢？那大家就继续看教程吧！ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加imgbtn_test()函数测试。 static lv_obj_t * imgbtn1;
static lv_obj_t * imgbtn_label;
static void imgbtn_event_handler(lv_obj_t * obj, lv_event_t event)
{
static int i = 0;;
static char buffer[32];
if (obj == imgbtn1) {
if(event == LV_EVENT_CLICKED) {
i++;
sprintf(buffer, "imgBtn Clicked %d", i);
lv_label_set_text(imgbtn_label,buffer);
}
}
}
void imgbtn_test(void)
{
static lv_style_t style_pr;
lv_style_copy(&style_pr, &lv_style_plain);
style_pr.image.color = LV_COLOR_BLACK;
style_pr.image.intense = LV_OPA_50;
LV_IMG_DECLARE(wavrshare_btn);
/*Create an Image button*/
imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &wavrshare_btn);
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); /*Use the darker style in the pressed state*/
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr);
lv_imgbtn_set_toggle(imgbtn1, true);
lv_obj_align(imgbtn1, NULL, LV_ALIGN_CENTER, 0, -40);
imgbtn_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK);
lv_obj_set_width(imgbtn_label, 180);
lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
lv_obj_align(imgbtn_label, NULL, LV_ALIGN_CENTER, 0, 90);
lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER);
}这里跟之前我们学习按钮控件的时候是一样的，我们在回调函数中显示按钮按下的次数，还是一样的利用了标签控件，大家现在也应该开始多尝试着融合多种控件了，一个好的交互界面就是各种控件的不断碰撞与融合。 那么我们继续分析代码： static lv_style_t style_pr;
lv_style_copy(&style_pr, &lv_style_plain);
style_pr.image.color = LV_COLOR_BLACK;
style_pr.image.intense = LV_OPA_50;LV_IMG_DECLARE(wavrshare_btn); extern const lv_img_dsc_t wavrshare_btn； /*Create an Image button*/
imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &wavrshare_btn);
lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &wavrshare_btn);enum {
/**Released*/
LV_BTN_STATE_REL,
/**Pressed*/
LV_BTN_STATE_PR,
/**Toggled released*/
LV_BTN_STATE_TGL_REL,
/**Toggled pressed*/
LV_BTN_STATE_TGL_PR,
/**Inactive*/
LV_BTN_STATE_INA,
/**Number of states*/
_LV_BTN_STATE_NUM,
};
typedef uint8_t lv_btn_state_t; lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); /*Use the darker style in the pressed state*/
lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr);最后我们使能按钮的触发功能，就是让按钮可以被用户按下，然后居中对齐并在Y方向上偏移40个像素。 imgbtn_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK);
lv_obj_set_width(imgbtn_label, 180);
lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
lv_obj_align(imgbtn_label, NULL, LV_ALIGN_CENTER, 0, 90);
lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER);OK，本节课程就到这里，大家有没有学会呢？下节课我们讲学习键盘控件(lv_kb)！大家有没有很期待呢？终于可以学一个很厉害的控件了！ |
