鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法

ゞ浴缸里的玫瑰 2022-09-03 01:22 334阅读 0赞

> 导语：大家好，我是你们的朋友 朋哥，十年码农经验，对技术情有独钟。

今天来一个大招，鸿蒙中的顶部 切换 选项卡 TabList，开发应用的时候会经常用到，一般作为二级内容分类来用的 。

![图片][f9d4265662f4545c6ce8143948ab5510.png]

不多说，今天的内容很多，下面我们开始今天的文章，还是老规矩，通过如下几点来说：

> 1，简介 2，属性 3，实战

### 简介 ###

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

一般应用场景 都是作为应用首页的 二级菜单的多个分类：

![图片][5cceae32d995f0d207069ee13890b253.png]

### 用到的属性 ###

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

![图片][f0dfcb9b8555adacb634b8a9b9ea5d86.png]

![图片][09495e8e67111a6b1b6a2cf23b8bec20.png]

![图片][684a509eb8cbbc6506604afa300132f2.png]

![图片][906f6bc3165208c75cdb387e22e8e6fc.png]

官网属性一大堆，看到都头大，其实使用起来就几个属性。

**常用接口：**

![图片][0dc13f7c94751e55c23a1237b2be4987.png]

### 实战 ###

**1，创建项目，添加默认Tablist**

**添加Tab**

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
    TabList.Tab tab = tabList.new Tab(getContext());
    tab.setText("推荐");
    tabList.addTab(tab);
    TabList.Tab tab2 = tabList.new Tab(getContext());
    tab2.setText("视频");
    tabList.addTab(tab2);
    TabList.Tab tab3 = tabList.new Tab(getContext());
    tab3.setText("新闻");
    tabList.addTab(tab3);
    TabList.Tab tab4 = tabList.new Tab(getContext());
    tab4.setText("问答");
    tabList.addTab(tab4);

**新增选项,在两个之间插入一个。**

// 本示例中在"推荐"和"视频"之间的页签中新增"资源"页签
      TabList.Tab tab5 = tabList.new Tab(getContext());
      tab5.setText("资源");
      tab5.setMinWidth(80);
      tab5.setPadding(12, 0, 12, 0);
      tabList.addTab(tab5, 1); // 1 表示位置，在第一个后新增一个

默认选中第几个：

// 默认选中 某一个tab
      tab2.select();
      tab2.getPosition(); // 获取tab的当前索引下标

**设置点击某一个选中后的 操作：**

// 设置监听
      tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
          @Override
          public void onSelected(TabList.Tab tab) {
              // 当某个Tab从未选中状态变为选中状态时的回调
              System.out.println("名称："+tab.getText()+"- 下标："+tab.getPosition());
              text_title.setText(tab.getText());
          }
    
          @Override
          public void onUnselected(TabList.Tab tab) {
              // 当某个Tab从选中状态变为未选中状态时的回调
          }
    
          @Override
          public void onReselected(TabList.Tab tab) {
              // 当某个Tab已处于选中状态，再次被点击时的状态回调
          }
      });

设置显示样式

<TabList
        ohos:id="$+id:tab_list"
        ohos:text_size="20fp"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:layout_alignment="center"
        ohos:orientation="horizontal"
        ohos:text_alignment="center"
    
        ohos:tab_margin="20vp" //tab间距
        ohos:tab_length="60vp" //tab长度
    
        ohos:normal_text_color="#000000" //未选中字体颜色
        ohos:selected_text_color="#CE0000" // 选中字体样式
    
        ohos:selected_tab_indicator_color="#CE0000" // 选中下面的划线样式
        ohos:selected_tab_indicator_height="2vp"/> //选中划线的高度

**完整代码：**

<?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:orientation="vertical">
    
        <TabList
            ohos:id="$+id:tab_list"
            ohos:text_size="20fp"
            ohos:height="50vp"
            ohos:width="match_parent"
            ohos:layout_alignment="center"
            ohos:orientation="horizontal"
            ohos:text_alignment="center"
    
            ohos:tab_margin="20vp"
            ohos:tab_length="60vp"
    
            ohos:normal_text_color="#000000"
            ohos:selected_text_color="#CE0000"
    
            ohos:selected_tab_indicator_color="#CE0000"
            ohos:selected_tab_indicator_height="2vp"/>
    
        <DirectionalLayout
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:top_margin="10vp"
            ohos:background_element="#333333"/>
    
        <Text
            ohos:id="$+id:text_title"
            ohos:text_size="20vp"
            ohos:text="内容"
            ohos:weight="1"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:text_alignment="center"/>
    
    </DirectionalLayout>

package com.example.tablist_tab.slice;
    
    import com.example.tablist_tab.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.TabList;
    import ohos.agp.components.Text;
    
    public class MainAbilitySlice extends AbilitySlice {
        private Text text_title;
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
    
            text_title = (Text) findComponentById(ResourceTable.Id_text_title);
    
            TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
            TabList.Tab tab = tabList.new Tab(getContext());
            tab.setText("推荐");
            tabList.addTab(tab);
            TabList.Tab tab2 = tabList.new Tab(getContext());
            tab2.setText("视频");
            tabList.addTab(tab2);
            TabList.Tab tab3 = tabList.new Tab(getContext());
            tab3.setText("新闻");
            tabList.addTab(tab3);
            TabList.Tab tab4 = tabList.new Tab(getContext());
            tab4.setText("问答");
            tabList.addTab(tab4);
    
    
            // 新增选项
            // 本示例中在"推荐"和"视频"之间的页签中新增"资源"页签
            TabList.Tab tab5 = tabList.new Tab(getContext());
            tab5.setText("资源");
            tab5.setMinWidth(80);
            tab5.setPadding(12, 0, 12, 0);
            tabList.addTab(tab5, 1); // 1 表示位置，在第一个后新增一个
    
            // 默认选中 某一个tab
            tab2.select();
            tab2.getPosition(); // 获取tab的当前索引下标
    
            // 设置监听
            tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
                @Override
                public void onSelected(TabList.Tab tab) {
                    // 当某个Tab从未选中状态变为选中状态时的回调
                    System.out.println("名称："+tab.getText()+"- 下标："+tab.getPosition());
                    text_title.setText(tab.getText());
                }
    
                @Override
                public void onUnselected(TabList.Tab tab) {
                    // 当某个Tab从选中状态变为未选中状态时的回调
                }
    
                @Override
                public void onReselected(TabList.Tab tab) {
                    // 当某个Tab已处于选中状态，再次被点击时的状态回调
                }
            });
        }
    
        @Override
        public void onActive() {
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }

源码：[https://gitee.com/codegrowth/haomony-develop/tree/master/TabList\_Tab][https_gitee.com_codegrowth_haomony-develop_tree_master_TabList_Tab]

关注公众号【**程序员漫话编程**】，后台回复 **”鸿蒙“** ，**即可获得上千鸿蒙开源组件。**

> 原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。  
>

**觉得不错的小伙伴，记得帮我** 点个赞和关注哟，笔芯笔芯~\*\*

> 作者：码工  
>

有问题请留言或者私信，可以 微信搜索：**程序员漫话编程**，关注公众号获得更多免费学习资料。

[f9d4265662f4545c6ce8143948ab5510.png]: /images/20220829/d461fce82a7e4bc69fa205ec3f56c1ff.png
[5cceae32d995f0d207069ee13890b253.png]: /images/20220829/962e33bf2efe438281d4ec1e31c06fb8.png
[f0dfcb9b8555adacb634b8a9b9ea5d86.png]: /images/20220829/ca15a5af934542bca2766a370bbadf0f.png
[09495e8e67111a6b1b6a2cf23b8bec20.png]: /images/20220829/029325e1559c4ccf8c6041cc4aff3867.png
[684a509eb8cbbc6506604afa300132f2.png]: /images/20220829/74eda4d40a274e33824654b0b2a69091.png
[906f6bc3165208c75cdb387e22e8e6fc.png]: /images/20220829/58fcb70d4cd34727ab0cfc50502e757f.png
[0dc13f7c94751e55c23a1237b2be4987.png]: /images/20220829/9ab0d0dc9e5b4d23858d4889c6a69618.png
[https_gitee.com_codegrowth_haomony-develop_tree_master_TabList_Tab]: https://gitee.com/codegrowth/haomony-develop/tree/master/TabList_Tab