Introduction of Embedded GUI LVGL "Tableview Tab Control"

1. The concept of LVGL GUI switch control

 

Tab view objects can be used to organize content in tabs.

2. LVGL GUI switch widgets and styles

The Tab view object contains several parts. Mainly LV_TABVIEW_PART_BG. It is a rectangular container that holds
the rest of the Tab View.
Two important real parts are created on the background:

• LV_TABVIEW_PART_BG_SCRL : This is the scrollable part of the Page. It makes the content of the tabs next to each other. The background of the page is always transparent and cannot be accessed from the outside.
• LV_TABVIEW_PART_TAB_BG : Tab button, it is a Button matrix. Clicking a button will scroll the LV_TABVIEW_PART_BG_SCRL to the contents of the relevant tab. It can be accessed via the tab button LV_TABVIEW_PART_TAB_BTN. When a tab is selected, the button is selected and the set style LV_STATE_CHECKED can be used. The height of the tab's button matrix is ​​calculated from the font height plus padding for the background and button styles.

All sections listed support typical background style properties and padding.
LV_TABVIEW_PART_TAB_BG has an additional actual part, the indicator, called LV_TABVIEW_PART_INDIC. It's a thin rectangle-like object under the currently selected tab. When a tab view is set to animate another tab, the indicator will also be animated. Can be styled using typical background style properties. This dimension style property will set its thickness. Once the new tab is added, a page will be created for it and the LV_TABVIEW_PART_BG_SCRL new button will be added to the LV_TABVIEW_PART_TAB_BG Buttons matrix. The created page can be used as a normal page and has the usual page sections.

3. The use of LVGL GUI switch controls

1. Add a tab (Adding tab)

Add a tab through this function lv_tabview_add_tab(tabview, "Tab name")

2. Change tab (Change tab)

To choose a new tab, you can:

• Click it on the button matrix section
• slide
• Use the function lv_tabview_set_tab_act(tabview, id, LV_ANIM_ON/OFF)

3. Change tab's name

Change the name of the tab through this function lv_tabview_set_tab_name(tabview, id, name)

4. Tab button's position

Set the tab position through this function lv_tabview_set_btns_pos(tabview, LV_TABVIEW_TAB_POS_TOP/BOTTOM/LEFT/RIGHT/NONE)

By default, the tab selector buttons are at the top of the Tabs view. LV_TABVIEW_TAB_POS_NONE will hide the tab.
Note that after adding a label, you cannot change the label's position from top or bottom to left or right.

5. Animation time

Use this function to set the time animation for switching tabs lv_tabview_set_anim_time(tabview, anim_time_ms)

6. Scroll propagation

Since a tab's content object is a Page, it can receive scroll propagation from other Page-like objects. For example, if a text area is created on the content of the tab, and the text area is scrolled but reaches the end, the scrolling
can propagate to the content page. It can be enabled using . lv_page/textarea_set_scroll_propagation(obj, true)
By default, the content pages of the tabs have scroll propagation enabled, so when they scroll horizontally, the scroll is propagated to the
LV_TABVIEW_PART_BG_SCRL page, so the page will be scrolled. Manual swiping can be disabled using. lv_page_set_scroll_propagation(tab_page, false)

7. Event

In addition to the general event, there is a special event

LV_EVENT_VALUE_CHANGED Sent when a new tab is selected by sliding or clicking the tab button

Let's look at a composite example

void lvgl_tabview_test(void)
{
    /*Create a Tab view object*/
    lv_obj_t* tabview;
    tabview = lv_tabview_create(lv_scr_act(), NULL);

    /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/
    lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "Tab 1");
    lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "Tab 2");
    lv_obj_t* tab3 = lv_tabview_add_tab(tabview, "Tab 3");


    /*Add content to the tabs*/
    lv_obj_t* label = lv_label_create(tab1, NULL);
    lv_label_set_text(label, "This the first tab\n\n"
        "If the content\n"
        "of a tab\n"
        "become too long\n"
        "the it \n"
        "automatically\n"
        "become\n"
        "scrollable.");

    label = lv_label_create(tab2, NULL);
    lv_label_set_text(label, "Second tab");

    label = lv_label_create(tab3, NULL);
    lv_label_set_text(label, "Third tab");
}

Okay, it's over, continue to poke more exciting ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓