第二十三章 选项卡视图部件(lv_tabview)

       选项卡视图部件常用于多页面的切换，它的每一个页面就相当于一个容器，用户可以往里面装入自己需要的内容（例如其他的部件）。

       本章节将分为以下几个小节：

       23.1 选项卡视图部件的组成

       23.2 选项卡视图部件的相关知识

       23.3 选项卡视图部件的API函数

       23.4 选项卡视图部件的实验

        23.1 选项卡视图部件的组成

       选项卡视图部件由两个部分组成，示意图如下所示：

图23.1.1 选项卡视图部件的组成部分

       由上图可知，选项卡视图部件由按钮矩阵和主体容器两部分组成，如果用户需要修改这两部分的样式，则必须先获取相应的组成部分。关于部件样式设置的内容，请大家参考6.4.4章节。

        23.2 选项卡视图部件的相关知识

       23.2.1 创建选项卡视图部件

       用户需要创建选项卡视图部件，可调用lv_tabview_create(parent, tab_pos, tab_size)函数，该函数有三个形参，parent形参表示父类，tab_pos形参表示选项卡的方向，tab_size形参表示选项卡的大小。接下来，我们结合示意图，帮助大家理解选项卡方向和大小，示意图如下所示：

图23.2.1.1 选项卡的方向和大小

       注意：在默认情况下，选项卡视图部件被创建出来，它是没有任何选项卡的。

       23.2.2 添加选项卡

       用户需要添加选项卡，可以调用以下函数：

lv_tabview_add_tab(tabview, “tab_name”);                /* 添加选项卡 */

       该函数的第二个形参代表选项卡的名称，当选项卡添加完成后，将会返回一个指向该选项卡的容器的指针，我们可以往这个容器里面添加所需的内容。

       接下来，我们以简单示例来理解选项卡的添加，示例代码如下所示：

void lv_mainstart(void)
{
/* 创建选项卡视图 */
    lv_obj_t* tabview = lv_tabview_create(lv_scr_act(),LV_DIR_TOP,50);  
    lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Tab 1"); /* 添加选项卡1 */
    lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "Tab 2"); /* 添加选项卡2 */
}

       在上述源码中，我们创建了一个选项卡视图部件，然后调用lv_tabview_add_tab函数添加两个选项卡。示例代码可以在PC模拟器中运行，效果图如下所示：

图23.2.2.1 添加选项卡

       23.2.3 切换选项卡

       用户需要切换选项卡，有以下三种方式：

       ① 直接点击对应选项卡的按钮；

       ② 触摸滑动；

       ③ 调用lv_tabview_set_act(tabview, id, anim_en)函数。

       注意：调用lv_tabview_set_tab_act函数进行选项卡切换时，其id是从0开始的，换言之，0就是第一个选项卡，1为第二个选项卡，以此类推。

       23.2.4 获取部件

       选项卡视图部件是由按钮矩阵和主体容器两部分组成，如果用户需要修改这两部分的样式，则必须先获取相应的组成部分。获取按钮矩阵和主体容器的相关函数分别为：lv_tabview_get_tab_btns(tabview)、lv_tabview_get_content(tabview)。

        23.3 选项卡视图部件的API函数

       LVGL官方提供了一些与选项卡视图部件相关API，如下表所示：

表23.3.1 选项卡部件相关的API函数

       接下来，我们介绍LVGL选项卡部件常用的API函数：

       1. lv_tabview_create函数

       创建选项卡视图部件，其函数原型如下所示：

lv_obj_t *lv_tabview_create(lv_obj_t *parent, lv_dir_t tab_pos, 
        lv_coord_t tab_size);

       该函数的形参描述如下表所示：

表23.3.2 lv_tabview_create函数形参描述

       返回值：指向选项卡视图部件的指针。

       2. lv_tabview_add_tab函数

       添加选项卡，其函数原型如下所示：

lv_obj_t *lv_tabview_add_tab(lv_obj_t *tv, const char *name);

       该函数的形参描述如下表所示：

表23.3.3 lv_tabview_add_tab函数形参描述

       返回值：指向选项卡容器对象的指针。

       3. lv_tabview_get_content函数

       获取选项卡容器，其函数原型如下所示：

lv_obj_t *lv_tabview_get_content(lv_obj_t *tv);

       该函数的形参描述如下表所示：

表23.3.4 lv_tabview_get_content函数形参描述

       返回值：指向选项卡容器对象的指针。

       4. lv_tabview_get_tab_btns函数

       获取选项卡视图的按钮矩阵，其函数原型如下所示：

lv_obj_t *lv_tabview_get_tab_btns(lv_obj_t *tv);

       该函数的形参描述如下表所示：

表23.3.5 lv_tabview_get_tab_btns函数形参描述

       返回值：选项卡按键矩阵对象。

        23.4 选项卡视图部件的实验

       23.4.1 硬件设计

       1. 例程功能

       本实验主要测试选项卡视图部件API函数的使用，实验现象：开机后，屏幕上会显示一个选项卡，用户可以通过KEY0、KEY1切换选项，通过KEY2确定选中的选项，以浏览不同页面的内容。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程20 lv_tabview(选项卡)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。

       23.4.2 软件设计

       23.4.2.1 程序流程图

       本实验的程序流程图，如下图所示：

图23.4.2.1.1选项卡视图部件实验流程图

       23.4.2.2 程序解析

       关于LVGL的用户代码，我们都是在lv_mainstart.c文件中编写的，本实验的源码如下所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_tabview();
}
/**************************** 第一部分 结束 ****************************/
 
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  选项卡实例
 * @param  无
 * @return 无
 */
static void lv_example_tabview(void)
{
    lv_group_t *g = lv_group_create();
    lv_group_set_default(g);
    lv_indev_set_group(indev_keypad, g);
    
    /*******************   第一部分：选项卡（基础）   *********************/
 
lv_obj_t *tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 
scr_act_height()/6);              /* 创建选项卡 */
lv_obj_set_style_text_font(tabview, &lv_font_montserrat_22,0);/* 设置字体 */
 
    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "A");     /* 添加选项卡1 */
    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "B");     /* 添加选项卡2 */
    lv_obj_t *tab3 = lv_tabview_add_tab(tabview, "C");     /* 添加选项卡3 */
 
    lv_obj_t *label1 = lv_label_create(tab1);      /* 创建标签（在选项卡1内） */
    lv_label_set_text(label1, "TAB1");             /* 设置文本内容 */
    lv_obj_center(label1);                         /* 设置位置 */
 
    lv_obj_t *label2 = lv_label_create(tab2);      /* 创建标签（在选项卡2内） */
    lv_label_set_text(label2, "TAB2");             /* 设置文本内容 */
    lv_obj_center(label2);                         /* 设置位置 */
 
    lv_obj_t *label3 = lv_label_create(tab3);      /* 创建标签（在选项卡3内） */
    lv_label_set_text(label3, "TAB3");             /* 设置文本内容 */
    lv_obj_center(label3);                         /* 设置位置 */
 
    /***************   第二部分：选项卡（界面优化）   ****************/
 
    /* 1、按钮 */
    lv_obj_t *btn = lv_tabview_get_tab_btns(tabview);       /* 获取按钮部分 */
 
    /* 未选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(0xb7472a), 
LV_PART_ITEMS|LV_STATE_DEFAULT);     /* 设置按钮背景颜色：橙色 */
/* 设置按钮背景透明度 */
    lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS|LV_STATE_DEFAULT); 
lv_obj_set_style_text_color(btn, lv_color_hex(0xf3f3f3), 
LV_PART_ITEMS|LV_STATE_DEFAULT);   /* 设置按钮文本颜色：白色 */
 
    /* 选中的按钮 */
lv_obj_set_style_bg_color(btn, lv_color_hex(0xe1e1e1), 
LV_PART_ITEMS|LV_STATE_CHECKED);   /* 设置按钮背景颜色：灰色 */
/* 设置按钮背景透明度 */
    lv_obj_set_style_bg_opa(btn, 200, LV_PART_ITEMS|LV_STATE_CHECKED);   
lv_obj_set_style_text_color(btn, lv_color_hex(0xb7472a), 
LV_PART_ITEMS|LV_STATE_CHECKED);   /* 设置按钮文本颜色：橙色 */
/* 设置按钮边框宽度为0 */
    lv_obj_set_style_border_width(btn, 0, LV_PART_ITEMS| LV_STATE_CHECKED);   
 
    /* 2、主体 */
lv_obj_t *obj = lv_tabview_get_content(tabview); /* 获取主体部分 */
/* 设置背景颜色：白色 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xffffff), LV_STATE_DEFAULT); 
/* 设置背景透明度 */
    lv_obj_set_style_bg_opa(obj, 255, LV_STATE_DEFAULT); 
}
/**************************** 第二部分 结束 ****************************/

       上述源码可分为以下两个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了选项卡视图部件相关的示例函数；

       ② 选项卡页面切换的实现。我们创建选项卡视图部件，然后添加tab1、tab2和tab3三个页面，最后设置这些页面里的内容并优化其样式。

       23.4.3 下载验证

       把工程编译并下载到开发板中， 运行效果如下表所示：

图23.4.3.1 选项卡视图部件实验