Tabview as a Tileview's element, how to scroll back to the other tile in tileview?

How-to
1

Description

I would like to create tabview as a tileview’s element. (as the following picture.)
image

But when I scroll the tileview and change to the tabview-element.
I can’t scroll back to the other tile.
How to config anything for scrolling back?

Thank you.

What MCU/Processor/Board and compiler are you using?

  • ESP32

What do you want to achieve?

Tabview as a Tileview’s element can be scrolled back to the other tile.

What have you tried so far?

Code to reproduce

void create_tileview_with_tabview_element()
{
  static lv_point_t valid_pos[] = {{0,0}, {0,1}, {0,2}, {0,3}, { 1,2} };
  
  lv_obj_t* tileview = lv_tileview_create( lv_scr_act(),NULL);
  lv_tileview_set_valid_positions( tileview, valid_pos, 5 );
  lv_tileview_set_edge_flash(tileview,true);

  lv_obj_t* tile_0_0 = lv_obj_create( tileview, NULL);
  lv_obj_t* tile_0_1 = lv_obj_create( tileview, NULL);
  lv_obj_t* tile_0_2 = lv_obj_create( tileview, NULL);
  lv_obj_t* tile_0_3 = lv_obj_create( tileview, NULL);
//  lv_obj_t* tile_1_2 = lv_obj_create( tileview, NULL);

  lv_obj_set_size( tile_0_0, 240,240);
  lv_obj_set_size( tile_0_1, 240,240);
  lv_obj_set_size( tile_0_2, 240,240);
  lv_obj_set_size( tile_0_3, 240,240);
//  lv_obj_set_size( tile_1_2, 240,240);

  lv_obj_set_pos( tile_0_0, 0,   0);
  lv_obj_set_pos( tile_0_1, 0,   1*240);
  lv_obj_set_pos( tile_0_2, 0,   2*240);
  lv_obj_set_pos( tile_0_3, 0,   3*240);
//  lv_obj_set_pos( tile_1_2, 240, 2*240);

  
  lv_tileview_add_element(tileview, tile_0_0 );
  lv_tileview_add_element(tileview, tile_0_1 );
  lv_tileview_add_element(tileview, tile_0_2 );
  lv_tileview_add_element(tileview, tile_0_3 );
//  lv_tileview_add_element(tileview, tile_1_2 );

  lv_tileview_set_tile_act(tileview, 0, 2, LV_ANIM_OFF);


  lv_obj_t *label_0_0 = lv_label_create( tile_0_0, NULL);
  lv_obj_t *label_0_1 = lv_label_create( tile_0_1, NULL);
  lv_obj_t *label_0_2 = lv_label_create( tile_0_2, NULL);
  lv_obj_t *label_0_3 = lv_label_create( tile_0_3, NULL);
//  lv_obj_t *label_1_2 = lv_label_create( tile_1_2, NULL);

  lv_label_set_text( label_0_0, "Tile 0_0"); lv_obj_align( label_0_0, NULL, LV_ALIGN_CENTER,0,0);
  lv_label_set_text( label_0_1, "Tile 0_1"); lv_obj_align( label_0_1, NULL, LV_ALIGN_CENTER,0,0);
  lv_label_set_text( label_0_2, "Tile 0_2"); lv_obj_align( label_0_2, NULL, LV_ALIGN_CENTER,0,0);
  lv_label_set_text( label_0_3, "Tile 0_3"); lv_obj_align( label_0_3, NULL, LV_ALIGN_CENTER,0,0);
//  lv_label_set_text( label_1_2, "Tile 1_2"); lv_obj_align( label_1_2, NULL, LV_ALIGN_CENTER,0,0);

  lv_obj_t * tabview = lv_tabview_create( tileview, NULL); 
  lv_obj_set_size( tabview, 240,240);
  lv_obj_set_pos( tabview, 240, 2*240);
  lv_tileview_add_element(tileview, tabview );

  lv_obj_t * tab1 = lv_tabview_add_tab( tabview, "Tab1");  
  lv_obj_t * tab2 = lv_tabview_add_tab( tabview, "Tab2");  
  lv_obj_t * tab3 = lv_tabview_add_tab( tabview, "Tab3");


  lv_obj_t *label_t1 = lv_label_create( tab1, NULL);
  lv_obj_t *label_t2 = lv_label_create( tab2, NULL);
  lv_obj_t *label_t3 = lv_label_create( tab3, NULL);

  lv_label_set_text( label_t1, "Tab 1"); lv_obj_align( label_t1, NULL, LV_ALIGN_CENTER,0,0);
  lv_label_set_text( label_t2, "Tab 2"); lv_obj_align( label_t2, NULL, LV_ALIGN_CENTER,0,0);
  lv_label_set_text( label_t3, "Tab 3"); lv_obj_align( label_t3, NULL, LV_ALIGN_CENTER,0,0);
}

Screenshot and/or video

1 Like
2

The tabview has limited scroll propagation abilities. It’s probably best to add a back button that will manually scroll back to the other tile.

1 Like
3

Unfortunately, it can’t scroll-back from tabview to other tile in the tileview by draging.

I have just tried to create dynamic valid_positions for the tileview
instead of tabview in tileview. It’s ok now.

Thank you.

4

How to create dynamic valid_position?Thank you