关于harmonyos:45HarmonyOS鸿蒙开发组件TabList和Tab

4.5【HarmonyOS鸿蒙开发】组件TabList和Tab

作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家

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

一、反对的XML属性

Tablist的共有XML属性继承自：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资源。	ohos:tab_margin="100" ohos:tab_margin="20vp" ohos:tab_margin="$float:size_value"
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

1、在xml布局文件中，创立TabList：

<!--    Tablist能够实现多个页签栏的切换，Tab为某个页签。        ohos:tab_length="100vp"，每个tab的的宽度        ohos:tab_margin="20vp"，设置两个Tab之间的间距--><TabList        ohos:id="$+id:tab_list"        ohos:top_margin="10vp"        ohos:tab_margin="24vp"        ohos:tab_length="140vp"        ohos:text_size="20fp"        ohos:height="80vp"        ohos:width="match_parent"        ohos:layout_alignment="center"        ohos:orientation="horizontal"        ohos:background_element="#66999999"        ohos:text_alignment="center"/>

当然也能够在java代码中设置Tab的布局：

tabList.setTabLength(60); // 设置Tab的宽度tabList.setTabMargin(26); // 设置两个Tab之间的间距

2、设置默认状态和选中状态的字体色彩和indicator的色彩：

<!--     ohos:normal_text_color="#000000"，tab默认的文本色彩     ohos:selected_text_color="#AA0000"，tab被选中的文本色彩     ohos:selected_tab_indicator_color="#00AA00"，被选中的tab批示线的色彩     ohos:selected_tab_indicator_height="12vp"，批示线的宽度--><TabList    ...    ohos:normal_text_color="#000000"    ohos:selected_text_color="#AA0000"    ohos:selected_tab_indicator_color="#00AA00"    ohos:selected_tab_indicator_height="12vp"/>

3、TabList中增加Tab

public class MainAbilitySlice extends AbilitySlice {    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_main);                // 1.获取TabList组件对象        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);          // 2.创立Tab        TabList.Tab tab1 = tabList.new Tab(getContext());        tab1.setText("Image");        TabList.Tab tab2 = tabList.new Tab(getContext());        tab2.setText("Video");        TabList.Tab tab3 = tabList.new Tab(getContext());        tab3.setText("Audio");                // 3.增加，将Tab增加到TabList中        tabList.addTab(tab1);        tabList.addTab(tab2);        tabList.addTab(tab3);    }

成果：

4、设置FixedMode

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

xml中：

<TabList        ...        ohos:fixed_mode="true"/>

java代码中设置：

tabList.setFixedMode(true);

fixedMode设为true的成果：

5、在某个地位新增Tab

                // 本示例中在"图片"和"视频"之间的页签中新增"新闻"页签                TabList.Tab tab = tabList.new Tab(getContext());        tab.setText("News");//        tab.setMinWidth(200);//        tab.setPadding(40, 0, 40, 0);        tabList.setTabLength(AttrHelper.vp2px(100, AttrHelper.getDensity(this))); // 设置Tab的宽度        tabList.setTabMargin(AttrHelper.vp2px(15, AttrHelper.getDensity(this))); // 设置两个Tab之间的间距        tabList.addTab(tab, 1); // 1示意地位        System.out.println("--->"+tabList.getTabCount());

在某一地位新增tab的成果：

6、响应焦点变动

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();
```