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

Posted 2021-07-03 Forever_wj

一、什么是 Tablist 与 Tab ？

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

二、支持的 XML 属性

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

属性名称	中文描述	取值	取值说明	使用案例
fixed_mode	固定所有页签并同时显示	boolean类型	可以直接设置true/false，也可以引用boolean资源	ohos:fixed_mode="true" 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" ohos:normal_text_color="$color:black"
selected_text_color	选中的文本颜色	color类型	可以直接设置色值，也可以引用color资源	ohos:normal_text_color="#FFFFFFFF" ohos:normal_text_color="$color:black"
selected_tab_indicator_color	选中页签的颜色	color类型	可以直接设置色值，也可以引用color资源	ohos:normal_text_color="#FFFFFFFF" ohos:normal_text_color="$color:black"
selected_tab_indicator_height	选中页签的高度	float类型	表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源	ohos:tab_length="100" ohos:tab_length="20vp" 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" ohos:tab_length="20vp" ohos:tab_length="$float:size_value"
tab_margin	页签间距	float类型	表示尺寸的float类型。可以是浮点数值，其默认单位为px；也可以是带px/vp/fp单位的浮点数值；也可以引用float资源
text_alignment	文本对齐方式	left	表示文本靠左对齐	可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:text_alignment="center" 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" ohos:text_size="16fp" 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 常用接口

方法	说明
getSelectedTab	返回选中的Tab
getSelectedTabIndex	返回选中的Tab的位置索引
getTabCount	获取Tab的个数
getTabAt	获取某个Tab
removeTab	移除某个位置的tab
setOrientation	设置横或竖方向

四、Tab 的使用

• 设置 Tab 属性：

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

• 选中某个 Tab：

	tab.select();

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

	tab.getPosition();