LVGL学习笔记11 - 按钮矩阵Button Matrix

这篇具有很好参考价值的文章主要介绍了LVGL学习笔记11 - 按钮矩阵Button Matrix。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1. 构造矩阵

2. Parts

2.1 LV_PART_MAIN

2.2 LV_PART_ITEMS

3. 样式

3.1 按钮大小

3.2 间距

3.3 控制按钮

3.4 控制map

 3.5 Check唯一性

 4. 事件

4.1 LV_EVENT_VALUE_CHANGED

4.2 LV_EVENT_LONG_PRESSED

4.3 LV_EVENT_DRAW_PART_BEGIN


按钮矩阵是多个按钮的组合,例如直接绘制一个九宫格按键。按钮矩阵的按钮是实时绘制的,所以占用的内存会比较小。通过lv_btnmatrix_create函数创建按钮矩阵对象。 

static lv_obj_t *btnM = lv_btnmatrix_create(lv_scr_act());

1. 构造矩阵

通过一个称为map的描述符字符串数组来实现,每个字符串代表一个按钮,然后通过lv_btnmatrix_set_map设置这个map。

static lv_obj_t *btnM = lv_btnmatrix_create(lv_scr_act());
static const char* btnMap[] = {
    ",", "ABC", "DEF", "\n",
    "GHI", "JKL", "MNO", "\n",
    "PQRS", "TUV", "WXYX", ""
};
lv_btnmatrix_set_map(btnM, btnMap);
lv_obj_align(btnM, LV_ALIGN_CENTER, 0, 0);

LVGL学习笔记11 - 按钮矩阵Button Matrix

map数组通过回车符换行,通过0表示结束,和字符串的定义一致。

2. Parts

按钮矩阵有2个Parts:LV_PART_MAIN和LV_PART_ITEMS。

2.1 LV_PART_MAIN

对应按钮矩阵的背景。

lv_obj_set_style_bg_color(btnM, lv_color_make(252, 144, 181), LV_PART_MAIN);

LVGL学习笔记11 - 按钮矩阵Button Matrix

2.2 LV_PART_ITEMS

对应按钮矩阵的按钮。

lv_obj_set_style_bg_color(btnM, lv_color_make(252, 144, 181), LV_PART_ITEMS);

 LVGL学习笔记11 - 按钮矩阵Button Matrix

3. 样式

3.1 按钮大小

通过lv_btnmatrix_set_btn_width函数设置按钮大小。

void lv_btnmatrix_set_btn_width(lv_obj_t * obj, uint16_t btn_id, uint8_t width)

参数btn_id表示需要修改哪个按钮的宽度。

参数width和之前的宽度含义不同,不是以像素为单位,表示倍数的关系,有效值是1-7,设置为0时也是和1的设定一样。

lv_btnmatrix_set_btn_width(btnM, 0, 1);
lv_btnmatrix_set_btn_width(btnM, 3, 2);

对比上面2个设定(宽度为1和2的情况):

 LVGL学习笔记11 - 按钮矩阵Button Matrix

id为0和id为3的按钮被设置,可以看到id为0的按钮宽度还是1个单位宽度,而id为3的按钮宽度变为2个单位。注意这个单位宽度是当前x轴上平均宽度,比如上图第二行,总宽度是1,3个按钮分别的宽度是2/1/1,所以总宽度单位是4,1个单位宽度是25%,3个按钮分别占据50%,25%,25%。

3.2 间距

通过lv_obj_set_style_pad_row和lv_obj_set_style_pad_column可以调整按钮之间的间距。

void lv_obj_set_style_pad_row(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_column(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)
lv_obj_set_style_pad_row(btnM, 2, LV_PART_MAIN);

LVGL学习笔记11 - 按钮矩阵Button Matrix

lv_obj_set_style_pad_column(btnM, 2, LV_PART_MAIN);

 LVGL学习笔记11 - 按钮矩阵Button Matrix

另外可以通过lv_obj_set_style_pad_top,lv_obj_set_style_pad_bottom,lv_obj_set_style_pad_left和lv_obj_set_style_pad_right调整按钮和边界的距离。

LVGL学习笔记11 - 按钮矩阵Button MatrixLVGL学习笔记11 - 按钮矩阵Button MatrixLVGL学习笔记11 - 按钮矩阵Button MatrixLVGL学习笔记11 - 按钮矩阵Button Matrix

3.3 控制按钮

 通过lv_btnmatrix_set_btn_ctrl设置按钮的控制形态,通过lv_btnmatrix_clear_btn_ctrl清除。

void lv_btnmatrix_set_btn_ctrl(lv_obj_t * obj, uint16_t btn_id, lv_btnmatrix_ctrl_t ctrl)
void lv_btnmatrix_clear_btn_ctrl(lv_obj_t * obj, uint16_t btn_id, lv_btnmatrix_ctrl_t ctrl)

通过lv_btnmatrix_set_btn_ctrl_all和lv_btnmatrix_clear_btn_ctrl_all设置所有按钮的控制形态。 

 控制形态的枚举,可以通过OR的方式多个控制

enum {
    _LV_BTNMATRIX_WIDTH     = 0x0007,      /**< Reserved to stire the size units*/
    LV_BTNMATRIX_CTRL_HIDDEN     = 0x0008, /**< Button hidden*/
    LV_BTNMATRIX_CTRL_NO_REPEAT  = 0x0010, /**< Do not repeat press this button.*/
    LV_BTNMATRIX_CTRL_DISABLED   = 0x0020, /**< Disable this button.*/
    LV_BTNMATRIX_CTRL_CHECKABLE  = 0x0040, /**< The button can be toggled.*/
    LV_BTNMATRIX_CTRL_CHECKED    = 0x0080, /**< Button is currently toggled (e.g. checked).*/
    LV_BTNMATRIX_CTRL_CLICK_TRIG = 0x0100, /**< 1: Send LV_EVENT_VALUE_CHANGE on CLICK, 0: Send LV_EVENT_VALUE_CHANGE on PRESS*/
    LV_BTNMATRIX_CTRL_POPOVER    = 0x0200, /**< Show a popover when pressing this key*/
    LV_BTNMATRIX_CTRL_RECOLOR    = 0x1000, /**< Enable text recoloring with `#color`*/
    _LV_BTNMATRIX_CTRL_RESERVED  = 0x2000, /**< Reserved for later use*/
    LV_BTNMATRIX_CTRL_CUSTOM_1   = 0x4000, /**< Custom free to use flag*/
    LV_BTNMATRIX_CTRL_CUSTOM_2   = 0x8000, /**< Custom free to use flag*/
};

LV_BTNMATRIX_CTRL_HIDDEN: 隐藏按钮。LVGL学习笔记11 - 按钮矩阵Button Matrix

LV_BTNMATRIX_CTRL_NO_REPEAT: 显示无区别,当长按时不重复按键事件。

LV_BTNMATRIX_CTRL_DISABLED:禁止按钮。LVGL学习笔记11 - 按钮矩阵Button Matrix蓝色圈不见了,点击不能选中。

LV_BTNMATRIX_CTRL_CHECKABLE: Check型按钮。LVGL学习笔记11 - 按钮矩阵Button Matrix

LV_BTNMATRIX_CTRL_CHECKED:按钮为选中状态,原则上需要和LV_BTNMATRIX_CTRL_CHECKABLE一起使用。

LVGL学习笔记11 - 按钮矩阵Button Matrix

LV_BTNMATRIX_CTRL_CLICK_TRIG:和显示无关,表示按钮点击时在事件LV_EVENT_VALUE_CHANGE中发送1,按下时发送0.

LV_BTNMATRIX_CTRL_POPOVER:按键时弹出窗口。LVGL学习笔记11 - 按钮矩阵Button Matrix

LV_BTNMATRIX_CTRL_RECOLOR:启用文本可以通过‘#颜色’更改颜色。例如:

    static lv_obj_t *btnM = lv_btnmatrix_create(lv_scr_act());
    static const char* btnMap[] = {
        ",", "ABC", "DEF", "\n",
        "#FF0000 GHI", "JKL", "MNO", "\n",
        "#FF0000 PQRS", "TUV", "WXYX", ""
    };
    lv_btnmatrix_set_map(btnM, btnMap);
    lv_btnmatrix_set_btn_ctrl(btnM, 3, LV_BTNMATRIX_CTRL_RECOLOR);
    lv_obj_align(btnM, LV_ALIGN_CENTER, 0, 0);

map中2个按钮写入了颜色的关键字,但是只启用了按钮3为改颜色。

LVGL学习笔记11 - 按钮矩阵Button Matrix

3.4 控制map

和创建矩阵的map类似,设置控制属性时可以通过一个map直接设置所有的按钮。

   static const char* btnMap[] = {
        ",", "ABC", "DEF", "\n",
        "#FF0000 GHI", "JKL", "MNO", "\n",
        "PQRS", "TUV", "WXYX", ""
    };
    static const lv_btnmatrix_ctrl_t ctrlMap[] =
    {
        1 | LV_BTNMATRIX_CTRL_CHECKABLE, 1,  1,
        2 | LV_BTNMATRIX_CTRL_RECOLOR, 1, 1,
        1, 1, 1 | LV_BTNMATRIX_CTRL_POPOVER
    };
    lv_btnmatrix_set_map(btnM, btnMap);
    lv_btnmatrix_set_ctrl_map(btnM, ctrlMap);
    //lv_btnmatrix_set_btn_ctrl(btnM, 3, LV_BTNMATRIX_CTRL_RECOLOR);
    lv_obj_align(btnM, LV_ALIGN_CENTER, 0, 0);

LVGL学习笔记11 - 按钮矩阵Button Matrix

 3.5 Check唯一性

通过lv_btnmatrix_set_one_checked将矩阵中的按钮具有Check唯一性。

lv_btnmatrix_set_btn_ctrl_all(btnM, 1 | LV_BTNMATRIX_CTRL_CHECKABLE);
lv_btnmatrix_set_one_checked(btnM, true);

LVGL学习笔记11 - 按钮矩阵Button Matrix

 4. 事件

可以通过lv_btnmatrix_get_selected_btn获取事件对应的按钮ID,通过lv_btnmatrix_get_btn_text获取按钮的字符串。

在代码中添加事件回调函数

static void event_handler(lv_event_t* e)
{

}

lv_obj_add_event_cb(btnM, event_handler, LV_EVENT_ALL, NULL);

4.1 LV_EVENT_VALUE_CHANGED

static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_VALUE_CHANGED)
    {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
        const char* txt = lv_btnmatrix_get_btn_text(obj, id);

        LV_LOG_USER("%s was pressed\n", txt);
    }
}

LVGL学习笔记11 - 按钮矩阵Button Matrix

4.2 LV_EVENT_LONG_PRESSED

 增加Label显示信息。

static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_LONG_PRESSED)
    {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
        lv_label_set_text_fmt(label1, "Long Pressed ID:%d", id);
    }
}

 LVGL学习笔记11 - 按钮矩阵Button Matrix

4.3 LV_EVENT_DRAW_PART_BEGIN

 这个事件常用于重绘,表示一个局部绘制的开始。

static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_DRAW_PART_BEGIN)
    {
        lv_obj_draw_part_dsc_t* dsc = lv_event_get_draw_part_dsc(e);
        if (dsc->class_p == &lv_btnmatrix_class && dsc->type == LV_BTNMATRIX_DRAW_PART_BTN)
        {
            if (dsc->id == 1)
            {
                if (lv_btnmatrix_get_selected_btn(obj) == dsc->id)
                    dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_BLUE, 3);
                else
                    dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_BLUE);

            }
        }
    }
}

将第二个按钮的背景色改为蓝色。

LVGL学习笔记11 - 按钮矩阵Button Matrix

还有一个LV_EVENT_DRAW_PART_END的事件,这个事件是刷新完按钮才响应的,可以用于在按钮上添加图片。文章来源地址https://www.toymoban.com/news/detail-405902.html

到了这里,关于LVGL学习笔记11 - 按钮矩阵Button Matrix的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android学习之路(5) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(44)
  • Android学习之路(4) UI控件之Button (按钮)与 ImageButton (图像按钮)

    本节引言: 今天给大家介绍的Android基本控件中的两个按钮控件,Button普通按钮和ImageButton图像按钮; 其实ImageButton和Button的用法基本类似,至于与图片相关的则和后面ImageView相同,所以本节 只对Button进行讲解,另外Button是TextView的子类,所以TextView上很多属性也可以应用到

    2024年02月12日
    浏览(47)
  • 安卓学习笔记:安卓11访问/读写 Android/data 目录

    省流提示:采用android studio工具开发,记录一次低级的开发,避免以后忘记或者踩坑。 最近有个业余项目开发到一小半,过程中需要读写 Android/data目录的文件,采用常规的文件操作总是提示权限被拒绝,无奈上网参考了很多资料,终于得到了解决。 无法访问Android/data 的原因

    2024年02月13日
    浏览(45)
  • lvgl 笔记 按钮部件 (lv_btn) 和 开关部件 (lv_switch)

    lv_btn 和 lb_obj 使用方法一样,只是外表并不相同,基础创建方法只需一行代码。 在 lv_obj_set_style_bg_color() 配置为, LV_STATE_PRESSED 即可配置为按下改变颜色。 其中和 lv_obj 一样,共有以下可供选择的参数: lv_obj_add_event_cb(); 可以添加事件。 开关部件共有三个部分可以单独配置颜

    2024年01月21日
    浏览(54)
  • 【深度学习每日小知识】Co-occurrence matrix 共现矩阵

    共生矩阵或共生分布(也称为:灰度共生矩阵 GLCM)是在图像上定义为共生像素值(灰度值或颜色)分布的矩阵)在给定的偏移量处。它被用作纹理分析的方法,具有多种应用,特别是在医学图像分析中。 给定灰度图像 ,共生矩阵计算具有特定值和偏移量的像素对在图像中出

    2024年01月25日
    浏览(44)
  • C# Winform中在DataGridView中添加Button按钮,操作Button按钮

    .Net的DataGridView控件中,提供了一种列的类型,叫 DataGridViewButtonColumn ,这种列类型是展示为一个 按钮,可以给button赋予相应的text,并且,此button可以用来做处理事件的判断依据。 DataGridViewButtonColumn,虽然在UI展现上,是一个BUTTON的样子,但是,它的实际形态,并不是传统意

    2024年02月07日
    浏览(48)
  • LVGL8.2学习笔记

    笔记主要记录LVGL控件基本的编程使用和相关的程序,并且在程序中对使用到的API函数进行简要注解(有些是个人的理解),以便后续根据实际项目所需直接套用对应的控件代码修改使用;本文主要参考的是正点原子的LVGL相关教程。 LVGL控件的基础知识 (1) C语言编写的LVGL以结

    2024年02月16日
    浏览(45)
  • 【LVGL学习笔记】(二) 基础概念

    LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库。并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发。 LVGL中文教程手册:百问网LVGL中文教程手册文档 以下的内容均是以VS环境下的LVGL模拟器

    2024年02月01日
    浏览(48)
  • 【LVGL学习笔记】(三)控件使用

    LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库。并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发。 LVGL中文教程手册:极客笔记之LVGL教程 特点 弧的0度在右边,90度在下边 效果图 源码

    2024年02月03日
    浏览(45)
  • 【LVGL】学习笔记--(1)Keil中嵌入式系统移植LVGL

    最近emwin用的比较烦躁,同时被LVGL酷炫的界面吸引到了,所以准备换用LVGL试试水。 LVGL(轻量级和通用图形库)是一个免费和开源的图形库,它提供了创建嵌入式GUI所需的一切,具有易于使用的图形元素,美丽的视觉效果和低内存占用。 丰富且强大的模块化图形组件:按钮 (b

    2024年02月02日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包