Tile view (lv_tileview)
Overview
The Tile view is a container object whose elements (called tiles) can be arranged in grid form. A user can navigate between the tiles by swiping. Any direction of swiping can be disabled on the tiles individually to not allow moving from one tile to another.
If the Tile view is screen sized, the user interface resembles what you may have seen on smartwatches.
Parts and Styles
The Tile view is built from an Base object (lv_obj) container and Base object (lv_obj) tiles.
The parts and styles work the same as for Base object (lv_obj).
Usage
Add a tile
lv_tileview_add_tile(tileview, col_id, row_id, dir) creates a new
tile on the col_id
th column and row_id
th row. dir
can be
LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL
or OR-ed values to enable
moving to the adjacent tiles into the given direction by swiping.
The returned value is an lv_obj_t *
on which the content of the tab
can be created.
Change tile
The Tile view can scroll to a tile with lv_tileview_set_tile(tileview, tile_obj, LV_ANIM_ON / OFF) or lv_tileview_set_tile_by_index(tileview, col_id, row_id, LV_ANIM_ON / OFF)
Events
LV_EVENT_VALUE_CHANGED
Sent when a new tile loaded by scrolling. lv_tileview_get_tile_active(tabview) can be used to get current tile.
Keys
Keys are not handled by the Tile view.
Learn more about Keys.
Example
Tileview with content
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_TILEVIEW && LV_BUILD_EXAMPLES
/**
* Create a 2x2 tile view and allow scrolling only in an "L" shape.
* Demonstrate scroll chaining with a long list that
* scrolls the tile view when it can't be scrolled further.
*/
void lv_example_tileview_1(void)
{
lv_obj_t * tv = lv_tileview_create(lv_screen_active());
/*Tile1: just a label*/
lv_obj_t * tile1 = lv_tileview_add_tile(tv, 0, 0, LV_DIR_BOTTOM);
lv_obj_t * label = lv_label_create(tile1);
lv_label_set_text(label, "Scroll down");
lv_obj_center(label);
/*Tile2: a button*/
lv_obj_t * tile2 = lv_tileview_add_tile(tv, 0, 1, LV_DIR_TOP | LV_DIR_RIGHT);
lv_obj_t * btn = lv_button_create(tile2);
label = lv_label_create(btn);
lv_label_set_text(label, "Scroll up or right");
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_center(btn);
/*Tile3: a list*/
lv_obj_t * tile3 = lv_tileview_add_tile(tv, 1, 1, LV_DIR_LEFT);
lv_obj_t * list = lv_list_create(tile3);
lv_obj_set_size(list, LV_PCT(100), LV_PCT(100));
lv_list_add_button(list, NULL, "One");
lv_list_add_button(list, NULL, "Two");
lv_list_add_button(list, NULL, "Three");
lv_list_add_button(list, NULL, "Four");
lv_list_add_button(list, NULL, "Five");
lv_list_add_button(list, NULL, "Six");
lv_list_add_button(list, NULL, "Seven");
lv_list_add_button(list, NULL, "Eight");
lv_list_add_button(list, NULL, "Nine");
lv_list_add_button(list, NULL, "Ten");
}
#endif