选项卡容器


选项卡容器控件(tabview)是一个用于存储选项卡的容器,并根据用户选择切换并显示不同的选项卡。如图 1 所示,“绿色区域”代表实际显示区域,五个带有红色虚线的矩形是整个选项卡容器控件 (tabview) 区域。每个矩形是选项卡控件 (tab) 。”idx” 表示 X 轴上的索引,”idy” 表示 Y 轴上的索引。


图-1

用法

创建选项卡容器

开发者在创建选项卡控件(tab)时,需要先构建一个容器来容纳选项卡页,也就是选项卡容器 (tabview) 控件, 需要使用 gui_tabview_create(parent, filename, x, y, w, h) 这个函数来创建一个选项卡容器容器。

选项卡切换

在使用过程中,默认情况下选项卡页的切换一般是通过左右或者上下滑动进行,如果用户希望快速切换到某一个指定的选项卡页时,就需要使用 gui_tabview_jump_tab(parent_tabview, idx, idy) 这个函数来实现。该函数可以实现跳转到指定选项卡页的功能,并通过 idx 和 idy 来指定选项卡页的位置。

设置选项卡切换风格

开发者可以使用 gui_tabview_set_style(this, style) 来设置所需的选项卡容器样式。默认情况下,使用的是经典样式(CLASSIC)。具体的切换风格请参考下列枚举:

typedef enum t_slide_style
{
    CLASSIC          = 0x0000,
    REDUCTION        = 0x0001,
    FADE             = 0x0002,
    REDUCTION_FADE   = 0x0003,
    STACKING         = 0x0004,

    TAB_ROTATE       = 0x0005,
    TAB_CUBE         = 0x0006,
    TAB_PAGE         = 0x0007,
} T_SLIDE_STYLE;

设置选项卡循环显示

选项卡容器循环功能是一项巧妙的特性,可以让用户轻松地遍历所有已创建的选项卡页。通过使用 gui_tabview_loop_x(tabview, loop) 启用x反向的循环显示功能,gui_tabview_loop_y(tabview, loop) 启用y反向的循环显示功能,如图2所示,可以看到蓝色的外框表示当前屏幕的可使选项卡控件。箭头的方向表示选项卡切换的方向。当向左滑动时,一旦所有选项卡都移至可见范围的左侧,再次左滑将从最左侧已创建的选项卡开始循环。相反,如图3所示,当再次向右滑动时,显示将从最右侧的选项卡开始循环。


图-2


图-3

示例

请参考以下示例代码:

tab

API

Enums

enum T_SLIDE_STYLE

Values:

enumerator CLASSIC
enumerator REDUCTION
enumerator FADE
enumerator REDUCTION_FADE
enumerator STACKING
enumerator TAB_ROTATE
enumerator TAB_CUBE
enumerator TAB_PAGE
enum T_GUI_TABVIEW_EVENT

Values:

enumerator TABVIEW_EVENT_TAB_CHANGE

Functions

gui_tabview_t *gui_tabview_create(void *parent, const char *name, int16_t x, int16_t y, int16_t w, int16_t h)

create a tabview widget, which can nest tabs.

参数:
  • parent – the father widget it nested in.

  • filename – this tabview widget’s name.

  • x – the X-axis coordinate relative to parent widget

  • y – the Y-axis coordinate relative to parent widget

  • w – width

  • h – height

返回:

return the widget object pointer.

void gui_tabview_jump_tab(gui_tabview_t *parent_tabview, int8_t idx, int8_t idy)

jump to a specify tab

参数:
  • parent_tabview – tabview pointer

  • idx – Horizontal index value

  • idy – Vertical index value

void gui_tabview_set_style(gui_tabview_t *this, T_SLIDE_STYLE style)

config slide effect

参数:
  • this – tabview pointer

  • style – refer to T_SLIDE_STYLE

void gui_tabview_loop_x(gui_tabview_t *tabview, bool loop)

Config tabview loop_x sliding feature. The default setting is no looping.

参数:
  • tabview – tabview pointer.

  • loop – Loops when set to true, does not loop when set to false.

void gui_tabview_loop_y(gui_tabview_t *tabview, bool loop)

Config tabview loop_y sliding feature. The default setting is no looping.

参数:
  • tabview – tabview pointer.

  • loop – Loops when set to true, does not loop when set to false.

void gui_tabview_tp_disable(gui_tabview_t *tabview, bool disable_tp)

disable tp action for this tabview.

参数:
  • tabview – tabview pointer.

  • disable_tp – true: disable tp action, false: enable tp action.

void gui_tabview_enable_pre_load(gui_tabview_t *this, bool enable)

enable tab widget cache

参数:
  • this

  • cache

void gui_tabview_tab_change(gui_tabview_t *tabview, void *callback, void *parameter)

Register callback for tab change.

参数:
  • tabview – tabview pointer.

  • callback – callback func.

  • parameter – callback parameter.

struct gui_tabview_tab_id_t
#include <gui_tabview.h>

Public Members

int32_t x
int32_t y
struct gui_index_t
#include <gui_tabview.h>

Public Members

int8_t x
int8_t y
struct gui_jump_t
#include <gui_tabview.h>

Public Members

bool jump_flag
gui_index_t jump_id
struct gui_tabview_t
#include <gui_tabview.h>

tabview structure

Public Members

gui_obj_t base
uint16_t tab_cnt
int8_t tab_cnt_left
int8_t tab_cnt_right
int8_t tab_cnt_up
int8_t tab_cnt_down
gui_tabview_tab_id_t cur_id
gui_jump_t jump
T_SLIDE_STYLE style
int16_t release_x
int16_t release_y
uint8_t loop_x
uint8_t loop_y
bool enable_pre_load
bool tab_change_ready
bool tab_need_pre_load
bool tp_disable
bool initial
uint8_t *left_shot
uint8_t *center_shot
uint8_t *right_shot
uint8_t checksum