立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:图片按钮控件(lv_imgbtn)

2020-3-29 11:58| 发布者: imliubo| 查看: 3995| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了图片控件(lv_img),本节课带大家来学习一下图片按钮控件,其实我们在前面的教程中既学过图片控件,也学过按钮控件,那么大家可能会好奇了,什么是图 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了图片控件(lv_img),本节课带大家来学习一下图片按钮控件,其实我们在前面的教程中既学过图片控件,也学过按钮控件,那么大家可能会好奇了,什么是图片按钮控件呢?其实这个属于按钮控件的派生控件,正如我们前面学习的时候,按钮的风格是很单调的,那么本节课程就是教大家如何做出更加好看的按钮来,废话少说!

一 有图有真相

看起来是不是像一幅图片?没错,就是一个图片,但是也具备按钮的的属性,这样的效果是不是相比普通的按钮控件更加好看了呢?那大家就继续看教程吧!

二 代码分析
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;



    /*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, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &WaveShare_LOGO);
    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_IN_LEFT_MID, 0, 0);

    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, 300);
    lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
    lv_obj_align(imgbtn_label, NULL, LV_ALIGN_IN_LEFT_MID, 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;
上面的样式主要用来描述按钮按下后图片被蒙上一层的效果,就是我们常说的遮罩效果,遮罩颜色设置为黑色,然后透明度设置为50%,假如你将透明度设置为100%,那么按下后是全黑的。
    /*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, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_PR, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_REL, &WaveShare_LOGO);
    lv_imgbtn_set_src(imgbtn1, LV_BTN_STATE_TGL_PR, &WaveShare_LOGO);
这一部分我们主要创建了一个图片按钮控件对象,然后设置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对象,这样按钮按下后就有遮罩效果了。
最后我们使能按钮的触发功能,就是让按钮可以被用户按下。
    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, 300);
    lv_label_set_text(imgbtn_label,"Watting imgBtn for clicked!");
    lv_obj_align(imgbtn_label, NULL, LV_ALIGN_IN_LEFT_MID, 0, 90);
    lv_label_set_align(imgbtn_label, LV_LABEL_ALIGN_CENTER);
上面的代码就是我们设置的显示按钮按下计数的标签,这些我们在之前的课程中都讲过,所以这里也就不再细讲了。

OK,本节课程就到这里,大家有没有学会呢?下节课我们讲学习键盘控件(lv_kb)!大家有没有很期待呢?终于可以学一个很厉害的控件了!


113

顶一下

刚表态过的朋友 (113 人)

相关阅读

最新评论

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

GMT+8, 2024-12-8 21:14 , Processed in 0.014422 second(s), 17 queries .

返回顶部