LVGL V8.2.0之Button matrix

Simple Button matrix

• 事件处理函数

static void event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e); //获取事件code
    lv_obj_t* obj = lv_event_get_target(e); //获取事件产生的对象
    if (code == LV_EVENT_VALUE_CHANGED)  // 处理LV_EVENT_VALUE_CHANGED 事件
     {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj); // 获取matrix button id
        const char* txt = lv_btnmatrix_get_btn_text(obj, id); //获取matrix button 文本内容
        LV_LOG_USER("%s was pressed\n", txt); // 打印文本内容
    }
}

• btnm_map按键盘定义，以空字符串结束定义

static const char* btnm_map[] = { "1", "2", "3", "4", "5", "\n",
"6", "7", "8", "9", "0", "\n",
"Action1", "Action2", ""
};

• 创建matrix按键及注册事件

static void lv_example_btnmatrix_1(void)
{
    lv_obj_t* btnm1 = lv_btnmatrix_create(lv_scr_act()); //创建matrix按键对象
    lv_btnmatrix_set_map(btnm1, btnm_map); //设置按键盘
    lv_btnmatrix_set_btn_width(btnm1, 10, 2); /*Make "Action1" twice as wide,as "Action2"*/
    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE); // id 10按键设置可点击选择
    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECKED); //id 10按键设置为已选择
    lv_obj_align(btnm1, LV_ALIGN_CENTER, 0, 0); //居中屏幕显示
    lv_obj_add_event_cb(btnm1, event_handler, LV_EVENT_ALL, NULL); //注册响应所有事件
}

• 在主函数中调用lv_example_btnmatrix_1函数，运行效果图

Custom buttons

• 事件处理函数

static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e); //获取事件code
    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_param(e); //获取绘制对象描述属性
        /*Change the draw descriptor the 2nd button*/
        if (dsc->id == 1) {
            dsc->rect_dsc->radius = 0; //按键2无倒角
            if (lv_btnmatrix_get_selected_btn(obj) == dsc->id) dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_BLUE, 3); //选中时蓝色级别3作为背景
            else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_BLUE); //未选中纯蓝色
            dsc->rect_dsc->shadow_width = 6; //阴影宽度
            dsc->rect_dsc->shadow_ofs_x = 3; //阴影x右方向偏移
            dsc->rect_dsc->shadow_ofs_y = 3;//阴影y下方向偏移
            dsc->label_dsc->color = lv_color_white(); //字体颜色为白色
        }
        /*Change the draw descriptor the 3rd button*/
        else if (dsc->id == 2) {
            dsc->rect_dsc->radius = LV_RADIUS_CIRCLE; //圆角风格按键
            if (lv_btnmatrix_get_selected_btn(obj) == dsc->id) dsc->rect_dsc->bg_color = lv_palette_darken(LV_PALETTE_RED, 3); //级别3的红色
            else dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED); //红色
            dsc->label_dsc->color = lv_color_white(); //白色字体
        }
        else if (dsc->id == 3) { //第4个按键不是示文本
            dsc->label_dsc->opa = LV_OPA_TRANSP; /*Hide the text if any*/
        }
    }
    if (code == LV_EVENT_DRAW_PART_END) { 
        lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
        /*Add custom content to the 4th button when the button itself was drawn*/
        if (dsc->id == 3) {  // id 3第4个按键
            LV_IMG_DECLARE(img_star);
            lv_img_header_t header;
            lv_res_t res = lv_img_decoder_get_info(&img_star, &header); //获取图片header信息
            if (res != LV_RES_OK) return; //获取图片header失败
            lv_area_t a;
            a.x1 = dsc->draw_area->x1 + (lv_area_get_width(dsc->draw_area) - header.w) / 2;
            a.x2 = a.x1 + header.w - 1;
            a.y1 = dsc->draw_area->y1 + (lv_area_get_height(dsc->draw_area) - header.h) / 2;
            a.y2 = a.y1 + header.h - 1;
            lv_draw_img_dsc_t img_draw_dsc;
            lv_draw_img_dsc_init(&img_draw_dsc);
            img_draw_dsc.recolor = lv_color_black(); //重新着色为black
            if (lv_btnmatrix_get_selected_btn(obj) == dsc->id) img_draw_dsc.recolor_opa = LV_OPA_30; //选中透明度为30%
            lv_draw_img(dsc->draw_ctx, &img_draw_dsc, &a, &img_star); //绘制图片
        }
    }
}

• 创建按键及注册事件

static void lv_example_btnmatrix_2(void)
{
    lv_obj_t* btnm = lv_btnmatrix_create(lv_scr_act());
    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_ALL, NULL);
    lv_obj_center(btnm);
}

• 调用函数lv_example_btnmatrix_2，运行效果图
  
• 上面为什么是5个按键呢，因为lv_btnmatrix.c文件中定义了默认的按键map

static const char * lv_btnmatrix_def_map[] = {"Btn1", "Btn2", "Btn3", "\n", "Btn4", "Btn5", ""};

• 在构造时调用了这个默认的map

static void lv_btnmatrix_constructor(const lv_obj_class_t * class_p, lv_obj_t * obj)
{
    LV_UNUSED(class_p);
    LV_TRACE_OBJ_CREATE("begin");
    lv_btnmatrix_t * btnm = (lv_btnmatrix_t *)obj;
    btnm->btn_cnt        = 0;
    btnm->row_cnt        = 0;
    btnm->btn_id_sel     = LV_BTNMATRIX_BTN_NONE;
    btnm->button_areas   = NULL;
    btnm->ctrl_bits      = NULL;
    btnm->map_p          = NULL;
    btnm->one_check      = 0;

    lv_btnmatrix_set_map(obj, lv_btnmatrix_def_map); //默认map

    LV_TRACE_OBJ_CREATE("finished");
}

Pagination

• 事件处理函数

static void event_cb(lv_event_t* e)
{
    lv_obj_t* obj = lv_event_get_target(e); //获取事件产生的对象
    uint32_t id = lv_btnmatrix_get_selected_btn(obj); //获取事件对象对应的ID
    bool prev = id == 0 ? true : false;  //是否为第0个ID
    bool next = id == 6 ? true : false; //是否为第6个ID
    if (prev || next) {  
        /*Find the checked button*/
        uint32_t i;
        for (i = 1; i < 7; i++) { //查找已级选中的ID
            if (lv_btnmatrix_has_btn_ctrl(obj, i, LV_BTNMATRIX_CTRL_CHECKED)) break;
        }  
        if (prev && i > 1) i--;   //向前移动
        else if (next && i < 5) i++; //向后移动
        lv_btnmatrix_set_btn_ctrl(obj, i, LV_BTNMATRIX_CTRL_CHECKED); //设置移动后的ID对应的按键为选中状态
    }
}

• 创建按键组及注册事件

/**
 * Make a button group (pagination)
*/
static void lv_example_btnmatrix_3(void)
{
    static lv_style_t style_bg; //背景style
    lv_style_init(&style_bg);
    lv_style_set_pad_all(&style_bg, 0); //pad all为0
    lv_style_set_pad_gap(&style_bg, 0);//间隙为0
    lv_style_set_clip_corner(&style_bg, true); //裁剪拐角
    lv_style_set_radius(&style_bg, LV_RADIUS_CIRCLE); //圆角
    lv_style_set_border_width(&style_bg, 0); //外框为0
    static lv_style_t style_btn;
    lv_style_init(&style_btn);
    lv_style_set_radius(&style_btn, 0); //按键无拐角
    lv_style_set_border_width(&style_btn, 1); //外框为1
    lv_style_set_border_opa(&style_btn, LV_OPA_50);//透明度50%
    lv_style_set_border_color(&style_btn, lv_palette_main(LV_PALETTE_GREY)); //外框颜色灰色
    lv_style_set_border_side(&style_btn, LV_BORDER_SIDE_INTERNAL); //设置边框面为LV_BORDER_SIDE_INTERNAL
    lv_style_set_radius(&style_btn, 0); //无倒角
    static const char* map[] = { LV_SYMBOL_LEFT, "1", "2", "3", "4", "5", LV_SYMBOL_RIGHT, "" }; //按键map
    lv_obj_t* btnm = lv_btnmatrix_create(lv_scr_act()); //创建matrix按键对象
    lv_btnmatrix_set_map(btnm, map); //设置按键map
    lv_obj_add_style(btnm, &style_bg, 0); //设置style
    lv_obj_add_style(btnm, &style_btn, LV_PART_ITEMS); //设置按键子项的style
    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_VALUE_CHANGED, NULL); //注册事件为值改变事件
    lv_obj_set_size(btnm, 225, 35); //设置matrix大小

    /*Allow selecting on one number at time*/
    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE); //设置matrix可点击
    lv_btnmatrix_clear_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_CHECKABLE); //清除第1个键可选择特性
    lv_btnmatrix_clear_btn_ctrl(btnm, 6, LV_BTNMATRIX_CTRL_CHECKABLE);//清除第7个键可选择特性
    lv_btnmatrix_set_one_checked(btnm, true); //设置只能选中一个按键特性
    lv_btnmatrix_set_btn_ctrl(btnm, 1, LV_BTNMATRIX_CTRL_CHECKED); //默认选中第2个按键
    lv_obj_center(btnm); //居中显示
}

• 调用函数lv_example_btnmatrix_3，运行效果图