Tab View (lv_tabview)¶
Overview¶
The Tab View Widget can be used to organize content in tabs. The Tab View is built from other Widgets:
Main container: Base Widget (lv_obj)
Tab buttons: an Base Widget (lv_obj) with Button (lv_button)
Container for the tabs: Base Widget (lv_obj)
Content of the tabs: Base Widget (lv_obj)
The tab buttons can be positioned on the top, bottom, left, and right side of the Tab View.
A new tab can be selected either by clicking on a tab button or by sliding horizontally on the content.
Parts and Styles¶
There are no special parts on the Tab View but the Base Widget (lv_obj) and Button (lv_button) Widgets are used to create the Tab View.
Usage¶
Creating a Tab View¶
lv_tabview_create(parent) creates a new empty Tab View.
Adding tabs¶
New tabs can be added with lv_tabview_add_tab(tabview, "Tab name"). This will return a pointer to a Base Widget (lv_obj) where the tab's content can be created.
Renaming tabs¶
A tab can be renamed with lv_tabview_set_tab_text(tabview, tab_id, "New Name").
Setting tab bar position¶
Using the lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT / RIGHT / TOP / BOTTOM) the tab bar can be moved to any side.
Setting tab bar size¶
The size of the tab bar can be adjusted by lv_tabview_set_tab_bar_size(tabview, size). When tabs are on the top or bottom, this means the height of the tab bar, and when they are on the sides, it means the width.
Accessing the parts¶
lv_tabview_get_content(tabview) returns a pointer to the container for tabs content (a Base Widget (lv_obj))
lv_tabview_get_tab_bar(tabview) returns a pointer to the container for tab buttons (a Base Widget (lv_obj))
Events¶
LV_EVENT_VALUE_CHANGEDSent when a new tab is selected by sliding or clicking the tab button. lv_tabview_get_tab_active(tabview) returns the zero based index of the current tab.
Keys¶
Keys have effect only on the tab buttons. Programmatically add these buttons to a group if required.
Further Reading
Learn more about Keys.
Examples¶
Simple Tabview¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
/**
* @title Horizontal tab view with three tabs
* @brief Three tabs across the top with a scrollable long label in the first.
*
* `lv_tabview_create` fills the active screen and
* `lv_tabview_add_tab` adds `Tab 1`, `Tab 2`, and `Tab 3`. Tab 1 holds
* a tall multi-line label that exceeds the tab height so it becomes
* scrollable, while Tab 2 and Tab 3 carry short labels. A final
* `lv_obj_scroll_to_view_recursive` on the third-tab label scrolls it
* into view with `LV_ANIM_ON`.
*/
void lv_example_tabview_1(void)
{
/*Create a Tab view object*/
lv_obj_t * tabview;
tabview = lv_tabview_create(lv_screen_active());
/*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);
lv_label_set_text(label, "This the first tab\n\n"
"If the content\n"
"of a tab\n"
"becomes too\n"
"longer\n"
"than the\n"
"container\n"
"then it\n"
"automatically\n"
"becomes\n"
"scrollable.\n"
"\n"
"\n"
"\n"
"Can you see it?");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON);
}
#endif
Tabs on the left, styling and no scrolling¶
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TABVIEW && LV_BUILD_EXAMPLES
/**
* @title Left-side vertical tab view
* @brief Five tabs arranged along the left edge with custom colors and swipe scrolling disabled.
*
* `lv_tabview_set_tab_bar_position` sets `LV_DIR_LEFT` and
* `lv_tabview_set_tab_bar_size` reserves 80 px for the tab bar. The
* tab bar is painted dark grey over a red-tinted view body, and each
* tab button gets a right border on `LV_STATE_CHECKED` through
* `lv_obj_set_style_border_side`. Five tabs labeled `Tab 1` to
* `Tab 5` each carry a small label, the second tab is tinted amber,
* and `LV_OBJ_FLAG_SCROLLABLE` is removed from the content so swipes
* no longer pan between tabs.
*/
void lv_example_tabview_2(void)
{
/*Create a Tab view object*/
lv_obj_t * tabview;
uint32_t tab_count = 0;
uint32_t i = 0;
tabview = lv_tabview_create(lv_screen_active());
lv_tabview_set_tab_bar_position(tabview, LV_DIR_LEFT);
lv_tabview_set_tab_bar_size(tabview, 80);
lv_obj_set_style_bg_color(tabview, lv_palette_lighten(LV_PALETTE_RED, 2), 0);
lv_obj_t * tab_buttons = lv_tabview_get_tab_bar(tabview);
lv_obj_set_style_bg_color(tab_buttons, lv_palette_darken(LV_PALETTE_GREY, 3), 0);
lv_obj_set_style_text_color(tab_buttons, lv_palette_lighten(LV_PALETTE_GREY, 5), 0);
/*Add 5 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");
lv_obj_t * tab4 = lv_tabview_add_tab(tabview, "Tab 4");
lv_obj_t * tab5 = lv_tabview_add_tab(tabview, "Tab 5");
tab_count = lv_tabview_get_tab_count(tabview);
for(i = 0; i < tab_count; i++) {
lv_obj_t * button = lv_obj_get_child(tab_buttons, i);
lv_obj_set_style_border_side(button, LV_BORDER_SIDE_RIGHT, LV_PART_MAIN | LV_STATE_CHECKED);
}
lv_obj_set_style_bg_color(tab2, lv_palette_lighten(LV_PALETTE_AMBER, 3), 0);
lv_obj_set_style_bg_opa(tab2, LV_OPA_COVER, 0);
/*Add content to the tabs*/
lv_obj_t * label = lv_label_create(tab1);
lv_label_set_text(label, "First tab");
label = lv_label_create(tab2);
lv_label_set_text(label, "Second tab");
label = lv_label_create(tab3);
lv_label_set_text(label, "Third tab");
label = lv_label_create(tab4);
lv_label_set_text(label, "Fourth tab");
label = lv_label_create(tab5);
lv_label_set_text(label, "Fifth tab");
lv_obj_remove_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);
}
#endif