一、什么是 Tablist 与 Tab ？

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

二、支持的 XML 属性

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

| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
| fixed_mode | 固定所有页签并同时显示 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源 | ohos:fixed_mode="true"<br>ohos:fixed_mode="$boolean:true_tag" |
| orientation | 页签排列方向 | horizontal | 表示水平排列 | ohos:orientation="horizontal" |
| vertical | 表示垂直排列 | ohos:orientation="vertical" |
| normal_text_color | 未选中的文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源 | ohos:normal_text_color="#FFFFFFFF"<br>ohos:normal_text_color="$color:black" |
| selected_text_color | 选中的文本颜色 | color类型 | 可以直接设置色值，也可以引用color资源 | ohos:normal_text_color="#FFFFFFFF"<br>ohos:normal_text_color="$color:black" |
| selected_tab_indicator_color | 选中页签的颜色 | color类型 | 可以直接设置色值，也可以引用color资源 | ohos:normal_text_color="#FFFFFFFF"<br>ohos:normal_text_color="$color:black" |
| selected_tab_indicator_height | 选中页签的高度 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源 | ohos:tab_length="100"<br>ohos:tab_length="20vp"<br>ohos:tab_length="$float:size_value" |
| tab_indicator_type | 页签指示类型 | invisible | 表示选中的页签无指示标记 | ohos:tab_indicator_type="invisible" |
| bottom_line | 表示选中的页签通过底部下划线标记 | ohos:tab_indicator_type="bottom_line" |
| left_line | 表示选中的页签通过左侧分割线标记 | ohos:tab_indicator_type="left_line" |
| oval | 表示选中的页签通过椭圆背景标记 | ohos:tab_indicator_type="oval" |
| tab_length | 页签长度 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源 | ohos:tab_length="100"<br>ohos:tab_length="20vp"<br>ohos:tab_length="$float:size_value" |
| tab_margin | 页签间距 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源 | |
| text_alignment | 文本对齐方式 | left | 表示文本靠左对齐 | 可以设置取值项如表中所列，也可以使用“|”进行多项组合。<br>ohos:text_alignment="center"<br>ohos:text_alignment="top|left" |
| top | 表示文本靠顶部对齐 |
| right | 表示文本靠右对齐 |
| bottom | 表示文本靠底部对齐 |
| horizontal_center | 表示文本水平居中对齐 |
| vertical_center | 表示文本垂直居中对齐 |
| center | 表示文本居中对齐 |
| start | 表示文本靠起始端对齐 |
| end | 表示文本靠结尾端对齐 |
| text_size | 文本大小 | float类型 | 表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源 | ohos:text_size="100"<br>ohos:text_size="16fp"<br>ohos:text_size="$float:size_value" |

三、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>

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

<TabList
	    ...
	    ohos:normal_text_color="#999999"
	    ohos:selected_text_color="#FFFFFF"
	    ohos:selected_tab_indicator_color="#FFFFFF"
	    ohos:selected_tab_indicator_height="2vp"/>

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

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

• TabList 中添加 Tab：

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

• 效果如下：

② 设置 fixedMode

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

tabList.setFixedMode(true);

• 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表示位置

• 在某一位置新增 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已处于选中状态，再次被点击时的状态回调
	        ...
	    }
	});

⑤ TabList 常用接口

四、Tab 的使用

• 设置 Tab 属性：

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

• 选中某个 Tab：

tab.select();

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

tab.getPosition();