hi, I adjust my code, and now the effect is nearly what I expect. now, I still have 2 problem.
1、as the picture I uploaded, the thin rectangle on indicating the current tab don’t align with the tab button accurately, see the circle in picture.
2、how to set the tab button width, I read the doc it should to set the height of header is calculated like: font height and padding.top and padding.bottom from LV_TABVIEW_STYLE_BTN_REL + padding.top and padding bottom from LV_TABVIEW_STYLE_BTN_BG* . But I found it don’t work when I set the buttons positon in the left.
Here is my code:
...
static bool Tabview_Style_Init(void)
{
/* 初始化tabview的背景样式 */
lv_style_copy(&style_tv_bg, &lv_style_plain);
style_tv_bg.body.padding.top = 0;
style_tv_bg.body.padding.bottom = 0;
style_tv_bg.body.padding.left = 0;
style_tv_bg.body.padding.right = 0;
style_tv_bg.body.main_color = TAB_BG_COLOR;
style_tv_bg.body.grad_color = TAB_BG_COLOR;
/* 初始化tabview的btn指示框样式 */
lv_style_copy(&style_tv_indic, &lv_style_plain_color);
style_tv_indic.body.padding.top = 0;
style_tv_indic.body.padding.bottom = 0;
style_tv_indic.body.padding.left = 0;
style_tv_indic.body.padding.right = 0;
style_tv_indic.body.padding.inner = 0;
/* 初始化tabview的button背景样式 */
lv_style_copy(&style_tv_btn_bg, &lv_style_transp);
style_tv_btn_bg.body.padding.left = 0;
style_tv_btn_bg.body.padding.top = 0;
style_tv_btn_bg.body.padding.bottom = 0;
style_tv_btn_bg.body.padding.inner = 2;
/* 初始化tabview的button释放样式 */
lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
style_tv_btn_rel.body.radius = 0;
style_tv_btn_rel.body.border.part = LV_BORDER_NONE;
style_tv_btn_rel.body.main_color = BTN_MAIN_COLOR;
style_tv_btn_rel.body.grad_color = BTN_GRAD_COLOR;
style_tv_btn_rel.text.color = BTN_TEXT_COLOR_REL;
/* 初始化tabview的button按下样式 */
lv_style_copy(&style_tv_btn_pr, &lv_style_btn_pr);
style_tv_btn_pr.body.radius = 0;
style_tv_btn_pr.body.border.part = LV_BORDER_NONE;
style_tv_btn_pr.body.main_color = BTN_MAIN_COLOR_TGL;
style_tv_btn_pr.body.grad_color = BTN_GRAD_COLOR_TGL;
style_tv_btn_pr.body.opa = LV_OPA_100;
style_tv_btn_pr.text.color = BTN_TEXT_COLOR_TGL;
/* 初始化tabview的button切换释放样式 */
lv_style_copy(&style_tv_btn_tgl_rel, &lv_style_btn_tgl_rel);
style_tv_btn_tgl_rel.body.radius = 0;
style_tv_btn_tgl_rel.body.border.part = LV_BORDER_NONE;
style_tv_btn_tgl_rel.body.main_color = BTN_MAIN_COLOR_TGL;
style_tv_btn_tgl_rel.body.grad_color = BTN_GRAD_COLOR_TGL;
style_tv_btn_tgl_rel.body.opa = LV_OPA_100;
style_tv_btn_tgl_rel.text.color = BTN_TEXT_COLOR_TGL;
/* 初始化tabview的button切换按下样式 */
lv_style_copy(&style_tv_btn_tgl_pr, &lv_style_btn_tgl_pr);
style_tv_btn_tgl_pr.body.radius = 0;
style_tv_btn_tgl_pr.body.border.part = LV_BORDER_NONE;
return true;
}
lv_obj_t* Create_Tabview(lv_obj_t* parent, lv_coord_t w, lv_coord_t h)
{
/* tabview初始化 */
Tabview_Style_Init();
/* 创建tabview */
lv_obj_t * tabview = lv_tabview_create(parent, NULL);
lv_obj_set_size(tabview, w, h);
lv_tabview_set_btns_pos(tabview, LV_TABVIEW_BTNS_POS_LEFT);
lv_obj_t* tab1 = lv_tabview_add_tab(tabview, " 系统\n结构图");
lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "实时\n数据");
lv_obj_t* tab3 = lv_tabview_add_tab(tabview, "报警\n状态");
lv_obj_t* tab4 = lv_tabview_add_tab(tabview, "数据\n查询");
lv_obj_t* tab5 = lv_tabview_add_tab(tabview, "系统\n设置");
TabAttribute_Init(tab1);
TabAttribute_Init(tab2);
TabAttribute_Init(tab3);
TabAttribute_Init(tab4);
TabAttribute_Init(tab5);
/* 设置tabview的样式 */
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BG, &style_tv_bg);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_INDIC, &style_tv_indic);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_BG, &style_tv_btn_bg);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_PR, &style_tv_btn_pr);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_REL, &style_tv_btn_tgl_rel);
lv_tabview_set_style(tabview, LV_TABVIEW_STYLE_BTN_TGL_PR, &style_tv_btn_tgl_pr);
//lv_obj_set_event_cb(tabview, tabview_event_cb);
Tab1_create(tab1);
Tab2_create(tab2);
Tab3_create(tab3);
Tab4_create(tab4);
Tab5_create(tab5);
return tabview;
}
...
and it’s the effect picture:
my code is showed below:
