Overview

The Tab view object can be used to organize content in tabs. You can add a new tab with lv_tabview_add_tab(tabview, "Tab name"). It will return with a pointer to a Page object where you can add the tab's content.

To select a tab you can:

  • Click on it on the header part
  • Slide horizontally
  • Use lv_tabview_set_tab_act(tabview, id, anim_en) function

The manual sliding can be disabled with lv_tabview_set_sliding(tabview, false)

The animation time is adjusted by lv_tabview_set_anim_time(tabview, anim_time)

A callback function can be assigned to tab load event with lv_tabview_set_tab_load_action(tabview, action). The callback function need to have the following prototype: void callback(lv_obj_t * tabview, uint16_t act_id) Where act_id means tab which will be loaded. In the action lv_tabview_get_tab_act(tanview) will give the id of the old tab.

Style usage

Use lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_..., &style) to set a new style for an element of the tab view:

  • LV_TABVIEW_STYE_BG main background which uses all style.body properties (default: lv_style_plain)
  • LV_TABVIEW_STYE_INDIC a thin rectangle on the top to indicate the current tab. Uses all style.body properties. It height comes from body.padding.inner (default: lv_style_plain_color)
  • LV_TABVIEW_STYE_BTN_BG style of the tab buttons' background. Uses all style.body properties. The header height will be set automatically considering body.padding.ver (default: lv_style_transp)
  • LV_TABVIEW_STYE_BTN_REL style of released tab buttons. Uses all style.body properties. (default: lv_style_tbn_rel)
  • LV_TABVIEW_STYE_BTN_PR style of released tab buttons. Uses all style.body properties. (default: lv_style_tbn_rel)
  • LV_TABVIEW_STYE_BTN_TGL_REL style of toggled released tab buttons. Uses all style.body properties. (default: lv_style_tbn_rel)
  • LV_TABVIEW_STYE_BTN_TGL_PR style of toggled pressed tab buttons. Uses all style.body properties. (default: lv_style_btn_tgl_pr)

Notes

Example of Tab view in Littlev Graphics Library

						/*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"
                         "become too long\n"
                         "the tab become\n"
                         "scrollable\n\n");

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");

lv_obj_t *

lv_tabview_create

(lv_obj_t * par, lv_obj_t * copy);

Create a Tab view object

par pointer to an object, it will be the parent of the new tab

copy pointer to a tab object, if not NULL then the new object will be copied from it

return pointer to the created tab

lv_obj_t *

lv_tabview_add_tab

(lv_obj_t * tabview, const char * name);

Add a new tab with the given name

tabview pointer to Tab view object where to ass the new tab

name the text on the tab button

return pointer to the created page object (lv_page). You can create your content here

void

lv_tabview_set_tab_act

(lv_obj_t * tabview, uint16_t id, bool anim_en);

Set a new tab

tabview pointer to Tab view object

id index of a tab to load

anim_en true: set with sliding animation; false: set immediately

void

lv_tabview_set_tab_load_action

(lv_obj_t *tabview, lv_tabview_action_t action);

Set an action to call when a tab is loaded (Good to create content only if required)
lv_tabview_get_act() still gives the current (old) tab (to remove content from here)

tabview pointer to a tabview object

action pointer to a function to call when a tab is loaded

void

lv_tabview_set_sliding

(lv_obj_t * tabview, bool en);

Enable horizontal sliding with touch pad

tabview pointer to Tab view object

en true: enable sliding; false: disable sliding

void

lv_tabview_set_anim_time

(lv_obj_t * tabview, uint16_t anim_time);

Set the animation time of tab view when a new tab is loaded

tabview pointer to Tab view object

anim_time time of animation in milliseconds

void

lv_tabview_set_style

(lv_obj_t *tabview, lv_tabview_style_t type, lv_style_t *style);

Set the style of a tab view

tabview pointer to a tan view object

type which style should be set

style pointer to the new style

uint16_t

lv_tabview_get_tab_act

(lv_obj_t * tabview);

Get the index of the currently active tab

tabview pointer to Tab view object

return the active tab index

uint16_t

lv_tabview_get_tab_count

(lv_obj_t * tabview);

Get the number of tabs

tabview pointer to Tab view object

return tab count

lv_obj_t *

lv_tabview_get_tab

(lv_obj_t * tabview, uint16_t id);

Get the page (content area) of a tab

tabview pointer to Tab view object

id index of the tab (>= 0)

return pointer to page (lv_page) object

lv_tabview_action_t

lv_tabview_get_tab_load_action

(lv_obj_t *tabview);

Get the tab load action

tabview pointer to a tabview object

return the current tab load action

bool

lv_tabview_get_sliding

(lv_obj_t * tabview);

Get horizontal sliding is enabled or not

tabview pointer to Tab view object

return true: enable sliding; false: disable sliding

uint16_t

lv_tabview_get_anim_time

(lv_obj_t * tabview);

Get the animation time of tab view when a new tab is loaded

tabview pointer to Tab view object

return time of animation in milliseconds

lv_style_t *

lv_tabview_get_style

(lv_obj_t *tabview, lv_tabview_style_t type);

Get a style of a tab view

tabview pointer to a ab view object

type which style should be get

return style pointer to a style

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary