立即注册 找回密码

微雪课堂

搜索

树莓派littlevGL系列教程:图片按钮控件(lv_imgbtn)

2019-12-8 19:50| 发布者: imliubo| 查看: 2001| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到树莓派之littlevGL课堂,我们在上节课中学习了图片控件(lv_img),本节课带大家来学习一下图片按钮控件,其实我们在前面的教程中既学过图片控件,也学过按钮控件,那么大家可能会好奇了,什么是 ...
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);
}
这里我们新增了一个文件,就是我们按钮中显示的图片资源,大家可以下载下面这个图片文件C语言数组源码然后添加到工程中去测试:

wavrshare_btn.zip

这里跟之前我们学习按钮控件的时候是一样的,我们在回调函数中显示按钮按下的次数,还是一样的利用了标签控件,大家现在也应该开始多尝试着融合多种控件了,一个好的交互界面就是各种控件的不断碰撞与融合。
那么我们继续分析代码:
    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;
上面的样式主要用来描述按钮按下后图片被蒙上一层的效果,就是我们常说的遮罩效果,遮罩颜色设置为黑色,然后透明度设置为50%,假如你将透明度设置为100%,那么按下后是全黑的。
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);
这一部分我们主要创建了一个图片按钮控件对象,然后设置imgbtn1对象的回调事件为imgbtn_event_handler,这些都很简单,然后我们设置按钮几个不同状态下的要显示的图片,不过这里只是简单的都设置成了同样的,大家可以设置按钮在不同状态下的图片,那么有哪些状态呢?看代码:
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;
没错,就是上面的五种状态,大家可能会问了,明明是6个呀,为啥是5种状态?其实最后一个只是防止用户填的数据超出枚举范围的,大家有没有Get到这种写法呢?
    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);
然后我们将最开始设置的样式设置给imgbtn1对象,这样按钮按下后就有遮罩效果了。
最后我们使能按钮的触发功能,就是让按钮可以被用户按下,然后居中对齐并在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)!大家有没有很期待呢?终于可以学一个很厉害的控件了!




71

顶一下

刚表态过的朋友 (71 人)

关键词树莓派 littlevGL

相关阅读

最新评论

Arduino
基础入门
OpenCV
littleGL

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-5-6 09:03 , Processed in 0.024154 second(s), 18 queries .

返回顶部