How to switch to next tab without scroll

How-to
1

Description

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

Linux simulator base on SDL2

What LVGL version are you using?

LVGL v8.2.0

What do you want to achieve?

when scroll start, the screen does not change until scroll end, it’s look like switch immediately。
Can I use LVGL v8.2.0 API, and do not need to modify the source code ?

What have you tried so far?

Code to reproduce

void lvgl_demo(void)
{
    lv_obj_t *tabview = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 0);
    lv_obj_set_pos(tabview, 0, 0);
    lv_obj_set_size(tabview, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));

    // I can not get srcoll event
    // lv_obj_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "tab1");
    lv_obj_set_pos(tab1, 0, 0);
    lv_obj_set_size(tab1, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_set_style_bg_color(tab1, lv_color_hex(0xff0000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(tab1, LV_OPA_80, LV_PART_MAIN);

    lv_obj_t *label1 = lv_label_create(tab1);
    lv_label_set_text(label1, "First tab");
    lv_obj_center(label1);

    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "tab2");
    lv_obj_set_pos(tab2, 0, 0);
    lv_obj_set_size(tab2, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_set_style_bg_color(tab2, lv_color_hex(0x00ff00), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(tab2, LV_OPA_80, LV_PART_MAIN);

    lv_obj_t *label2 = lv_label_create(tab2);
    lv_label_set_text(label2, "Second tab");
    lv_obj_center(label2); 
}

Screenshot and/or video

when first tab switch to second tab, the screen will change all the time, but I don’t want to that. :joy:

tabview-1

2

I’m not sure you can prevent it behaving like that when scrolling.

I know you can do that when using the buttons at the top/left but you seem to have made your content to be 100% height/width and this is probably making the buttons not show.

To stop the scroll animation when using the buttons at the top you can do something like this:

  tv = lv_tabview_create(scr, LV_DIR_TOP, tvHeight);
  lv_obj_add_event_cb(lv_tabview_get_content(tv), scroll_begin_event, LV_EVENT_SCROLL_BEGIN, NULL);  


static void scroll_begin_event(lv_event_t * e)
{
    /*Disable the scroll animations. Triggered when a tab button is clicked */
    if(lv_event_get_code(e) == LV_EVENT_SCROLL_BEGIN) {
        lv_anim_t * a = (lv_anim_t *)lv_event_get_param(e);
        //lv_anim_t * a = lv_event_get_param(e);
        if(a)  a->time = 0;
    }
}
1 Like
3

thanks, but the effect I want is looks like below:
tabview-2

so I disabled tabview’s button, I want to achieve it by srolling, and use LVGL provided API.

  • when scroll begin, the screen don’t scroll
  • when scroll end, switch screen immediately

here is code（just for demo）

static uint8_t max_id = 0;
static lv_obj_t *tabview = NULL;

static void switch_tab(void)
{
    uint8_t id = lv_tabview_get_tab_act(tabview);

    id += 1;
    if (id >= max_id)
        id = 0;

    lv_tabview_set_act(tabview, id, LV_ANIM_OFF);
    printf("-----> switch tab %d.\n", id);
}

void lvgl_demo(void)
{
    tabview = lv_tabview_create(lv_scr_act(), LV_DIR_LEFT, 0);
    lv_obj_set_pos(tabview, 0, 0);
    lv_obj_set_size(tabview, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));

    lv_obj_clear_flag(lv_tabview_get_content(tabview), LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "tab1");
    max_id += 1;
    lv_obj_set_pos(tab1, 0, 0);
    lv_obj_set_size(tab1, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_set_style_bg_color(tab1, lv_color_hex(0xff0000), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(tab1, LV_OPA_80, LV_PART_MAIN);

    lv_obj_t *label1 = lv_label_create(tab1);
    lv_label_set_text(label1, "First tab");
    lv_obj_center(label1);

    lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "tab2");
    max_id += 1;
    lv_obj_set_pos(tab2, 0, 0);
    lv_obj_set_size(tab2, lv_disp_get_hor_res(NULL), lv_disp_get_ver_res(NULL));
    lv_obj_set_style_bg_color(tab2, lv_color_hex(0x00ff00), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(tab2, LV_OPA_80, LV_PART_MAIN);

    lv_obj_t *label2 = lv_label_create(tab2);
    lv_label_set_text(label2, "Second tab");
    lv_obj_center(label2); 
}

// lvgl task thread
static void* lvgl_entry(void *arg)
{
    int ret = -1;
    
    lv_init();              // lvgl init

    lv_port_disp_init();    // port init
    lv_port_indev_init();
    lv_port_fs_init();
    lv_port_font_init(24);

    pthread_mutex_unlock(&lvgl_mutex);  // lvlg and port init done

    uint16_t cnt = 0;

    while (1) 
    {
        cnt++;
        if (cnt >= 200)
        {
            switch_tab();
            cnt = 0;
        }

        lv_timer_handler();
        usleep(5 * 1000);   // 5ms
    }
}