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

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

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

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

一、反对的 XML 属性

Tablist 的共有 XML 属性继承自：ScrollView

Tablist 的自有 XML 属性见下表：

二、创立和设置 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);


    }

成果：

<img src=”https://img.chengxuka.com/WX20210615-180026@2x.png/mark” alt=”WX20210615-180026@2x” style=”zoom:50%;” />

4、设置 FixedMode

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

xml 中：

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

java 代码中设置：

tabList.setFixedMode(true);

fixedMode 设为 true 的成果：

<img src=”https://img.chengxuka.com/tablistyunxing1.gif” alt=”tablistyunxing1″ style=”zoom:50%;” />

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 的成果：

<img src=”https://img.chengxuka.com/tablistyunxing2.gif” alt=”tablistyunxing2″ style=”zoom:50%;” />

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 罕用接口

三、Tab 的应用

• 设置 Tab 属性

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

• 选中某个 Tab

  tab.select();

• 获取 Tab 在 TabList 中的地位索引

  tab.getPosition();

更多内容：

1、社区：鸿蒙巴士 https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

4、视频课：https://www.chengxuka.com