HarmonyOS之常用组件TabList与Tab的功能和使用

一、什么是 Tablist 与 Tab ？

• Tablist 可以实现多个页签栏的切换，Tab 为某个页签。
• 子页签通常放在内容区上方，展示不同的分类。
• 页签名称应该简洁明了，清晰描述分类的内容。

二、支持的 XML 属性

• Tablist 的共有 XML 属性继承自 ScrollView，ScrollView 详情请参考我的博客：HarmonyOS之常用组件ScrollView的功能和使用。
• Tablist 的自有 XML 属性如下：

三、TabList 的使用

① TabList 创建

• xml 中创建 TabList

	<?xml version="1.0" encoding="utf-8"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:height="match_parent"
	    ohos:width="match_parent"
	    ohos:background_element="black"
	    ohos:orientation="vertical">
	
	   <TabList
	       ohos:id="$+id:tab_list"
	       ohos:top_margin="40vp"
	       ohos:tab_margin="24vp"
	       ohos:tab_length="140vp"
	       ohos:text_size="20fp"
	       ohos:height="36vp"
	       ohos:width="match_parent"
	       ohos:layout_alignment="center"
	       ohos:orientation="horizontal"
	       ohos:text_alignment="center" />
	
	</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 设置默认状态和选中状态的字体颜色和 indicator 的颜色：

	<TabList
	    ...
	    ohos:normal_text_color="#999999"
	    ohos:selected_text_color="#FFFFFF"
	    ohos:selected_tab_indicator_color="#FFFFFF"
	    ohos:selected_tab_indicator_height="2vp"/>
1
2
3
4
5
6

• 或者在代码中设置 Tab 的布局：

	tabList.setTabLength(140 * 3); // 设置Tab的宽度
	tabList.setTabMargin(24 * 3); // 设置两个Tab之间的间距
1
2

• TabList 中添加 Tab：

	TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
	TabList.Tab tab = tabList.new Tab(getContext());
	tab.setText("Image");
	tabList.addTab(tab);
	... // 请自行创建其他Tab
1
2
3
4
5

• 效果如下：
  

② 设置 fixedMode

• 默认为 false，该模式下 TabList 的总宽度是各 Tab 宽度的总和，若固定了 TabList 的宽度，当超出可视区域，则可以通过滑动 TabList 来显示。
• 如果设置为 true，TabList 的总宽度将与可视区域相同，各个 Tab 的宽度也会根据 TabList 的宽度而平均分配，该模式适用于 Tab 较少的情况。

	tabList.setFixedMode(true);
1

• fixedMode 设置 false/true 前后的对比效果：

③ 在某个位置新增 Tab

	// 本示例中在"图片"和"视频"之间的页签中新增"新闻"页签
	TabList.Tab tab = tabList.new Tab(getContext());
	tab.setText("News");
	tab.setMinWidth(64);
	tab.setPadding(12, 0, 12, 0);
	tabList.addTab(tab, 1); // 1表示位置
1
2
3
4
5
6

• 在某一位置新增 tab 的效果：

④ 响应焦点变化

	tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
	    @Override
	    public void onSelected(TabList.Tab tab) {
	        // 当某个Tab从未选中状态变为选中状态时的回调
	        ...
	    }
	
	    @Override
	    public void onUnselected(TabList.Tab tab) {
	        // 当某个Tab从选中状态变为未选中状态时的回调
	        ...
	    }
	
	    @Override
	    public void onReselected(TabList.Tab tab) {
	        // 当某个Tab已处于选中状态，再次被点击时的状态回调
	        ...
	    }
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

⑤ TabList 常用接口

四、Tab 的使用

• 设置 Tab 属性：

	tab.setMinWidth(64);
	tab.setPadding(12, 0, 12, 0);
1
2

• 选中某个 Tab：

	tab.select();
1

• 获取 Tab 在 TabList 中的位置索引：

	tab.getPosition();
1