Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了图片控件(lv_img)，本节课带大家来学习一下图片按钮控件，其实我们在前面的教程中既学过图片控件，也学过按钮控件，那么大家可能会好奇了，什么是图片按钮控件呢？其实这个属于按钮控件的派生控件，正如我们前面学习的时候，按钮的风格是很单调的，那么本节课程就是教大家如何做出更加好看的按钮来，废话少说！ 一 有图有真相 
看起来是不是像一幅图片？没错，就是一个图片，但是也具备按钮的的属性，这样的效果是不是相比普通的按钮控件更加好看了呢？那大家就继续看教程吧！ 二 代码分析 用户可下载"圆弧对象(lv_arc)的使用"文章末尾的Demo工程(点击我直接下载),参考圆弧对象(lv_arc)的使用文章,将以下Demo代码复制到Demo工程test.c文件空白处.然后在test.c文件的create_test()函数中增加imgbtn_test()函数测试。 01 | static lv_obj_t * imgbtn1; |
02 | static lv_obj_t * imgbtn_label; |
04 | static void imgbtn_event_handler(lv_obj_t * obj, lv_event_t event) |
07 | static char buffer[32]; |
10 | if(event == LV_EVENT_CLICKED) { |
12 | sprintf(buffer, "imgBtn Clicked %d", i); |
13 | lv_label_set_text(imgbtn_label,buffer); |
20 | static lv_style_t style_pr; |
21 | lv_style_copy(&style_pr, &lv_style_plain); |
22 | style_pr.image.color = LV_COLOR_BLACK; |
23 | style_pr.image.intense = LV_OPA_50; |
25 | LV_IMG_DECLARE(wavrshare_btn); |
28 | imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL); |
29 | lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler); |
30 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &wavrshare_btn); |
31 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &wavrshare_btn); |
32 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &wavrshare_btn); |
33 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &wavrshare_btn); |
34 | lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); |
35 | lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr); |
36 | lv_imgbtn_set_toggle(imgbtn1, true); |
37 | lv_obj_align(imgbtn1, NULL, LV_ALIGN_CENTER, 0, -40); |
39 | imgbtn_label = lv_label_create(lv_scr_act(), NULL); |
40 | lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK); |
41 | lv_obj_set_width(imgbtn_label, 180); |
42 | lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!"); |
43 | lv_obj_align(imgbtn_label, NULL, LV_ALIGN_CENTER, 0, 90); |
44 | lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER); |
这里我们新增了一个文件，就是我们按钮中显示的图片资源，大家可以下载下面这个图片文件C语言数组源码然后添加到工程中去测试： wavrshare_btn.zip 这里跟之前我们学习按钮控件的时候是一样的，我们在回调函数中显示按钮按下的次数，还是一样的利用了标签控件，大家现在也应该开始多尝试着融合多种控件了，一个好的交互界面就是各种控件的不断碰撞与融合。 那么我们继续分析代码： 1 | static lv_style_t style_pr; |
2 | lv_style_copy(&style_pr, &lv_style_plain); |
3 | style_pr.image.color = LV_COLOR_BLACK; |
4 | style_pr.image.intense = LV_OPA_50; |
上面的样式主要用来描述按钮按下后图片被蒙上一层的效果，就是我们常说的遮罩效果，遮罩颜色设置为黑色，然后透明度设置为50%，假如你将透明度设置为100%，那么按下后是全黑的。 1 | LV_IMG_DECLARE(wavrshare_btn); |
这句代码跟我们之前学习图片控件时作用是一样的，用来声明我们的图片文件，大家也可以用最原始的写法： 1 | extern const lv_img_dsc_t wavrshare_btn； |
效果都是一样的，只不过这里做了一次封装，让大家写起来方便。 2 | imgbtn1 = lv_imgbtn_create(lv_scr_act(), NULL); |
3 | lv_obj_set_event_cb(imgbtn1, imgbtn_event_handler); |
4 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_REL, &wavrshare_btn); |
5 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &wavrshare_btn); |
6 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &wavrshare_btn); |
7 | lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &wavrshare_btn); |
这一部分我们主要创建了一个图片按钮控件对象，然后设置imgbtn1对象的回调事件为imgbtn_event_handler，这些都很简单，然后我们设置按钮几个不同状态下的要显示的图片，不过这里只是简单的都设置成了同样的，大家可以设置按钮在不同状态下的图片，那么有哪些状态呢？看代码： 20 | typedef uint8_t lv_btn_state_t; |
没错，就是上面的五种状态，大家可能会问了，明明是6个呀，为啥是5种状态？其实最后一个只是防止用户填的数据超出枚举范围的，大家有没有Get到这种写法呢？ 1 | lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_PR, &style_pr); |
2 | lv_imgbtn_set_style(imgbtn1, LV_BTN_STATE_TGL_PR, &style_pr); |
然后我们将最开始设置的样式设置给imgbtn1对象，这样按钮按下后就有遮罩效果了。 最后我们使能按钮的触发功能，就是让按钮可以被用户按下，然后居中对齐并在Y方向上偏移40个像素。 1 | imgbtn_label = lv_label_create(lv_scr_act(), NULL); |
2 | lv_label_set_long_mode(imgbtn_label, LV_LABEL_LONG_BREAK); |
3 | lv_obj_set_width(imgbtn_label, 180); |
4 | lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!"); |
5 | lv_obj_align(imgbtn_label, NULL, LV_ALIGN_CENTER, 0, 90); |
6 | lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER); |
上面的代码就是我们设置的显示按钮按下计数的标签，这些我们在之前的课程中都讲过，所以这里也就不再细讲了。
OK，本节课程就到这里，大家有没有学会呢？下节课我们讲学习键盘控件(lv_kb)！大家有没有很期待呢？终于可以学一个很厉害的控件了！
      |
