鸿蒙App开发之TabList组件

在众多的资讯App中，我们能够看到各式各样的头部标签。比如我们的CSDN，通过头部分类标签可以快速找到自己需要学习的内容。

这在鸿蒙之中实现起来也是非常简单的，它给我们提供了TabList组件。今天，我们将详细介绍TabList并实现相应的交互效果。

创建TabList组件

同样的，我们首先在XML布局文件中创建TabList组件。示例代码如下：

<TabList
    ohos:id="$+id:test_tablist"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:tab_length="60vp"
    ohos:text_alignment="center"
    ohos:orientation="horizontal"
    ohos:text_size="20vp"
    ohos:normal_text_color="#FFFFFF"
    ohos:selected_text_color="#00FF00"
    ohos:selected_tab_indicator_color="#FF0000"
    ohos:selected_tab_indicator_height="5vp"/>

可以看出来，这上面并没有给标签赋值。因为在大多数App中，标签的内容都会随着App的迭代而变更，有的甚至会给用户自定义。

所以，在代码中添加标签内容最为合适，但样式在XML布局中配置已经非常完美了。而TabList独有的属性如下表：

属性	含义
normal_text_color	非选中标签文字颜色
selected_text_color	选中标签文字颜色
selected_tab_indicator_color	选中标签下划线颜色
selected_tab_indicator_height	选中标签下划线高度
tab_length	每个标签的宽度
orientation	横向或者还是纵向标签
tab_margin	标签间距
tab_indicator_type	标签指示类型（比如上面选中是下划线，我们还可以设置左侧分割线left_line）

下面，我们在Java代码中配置标签的内容，同时设置默认哪个标签被选中。毕竟没有一个App打开是无标签选中状态。示例如下：

public class MainAbilitySlice extends AbilitySlice{
    private TabList tabList;
    private String[] tab_str_list={"关注","推荐","热榜","问答","社区","Blink"};
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.tabList=(TabList)findComponentById(ResourceTable.Id_test_tablist);
        for(int i=0;i<tab_str_list.length;i++){
            TabList.Tab tab = tabList.new Tab(getContext());
            tab.setText(tab_str_list[i]);
            this.tabList.addTab(tab);
            if(i==1){
                tab.select();
            }
        }
    }
}

从上面的代码看出，TabList组件的每个小标签是TabList.Tab。如果需要添加必须创建一个TabList.Tab然后对其添加字符串内容，最后整体添加到TabList。

如果是要选中某个标签的话，需要调用TabList.Tab的select()函数，进行默认选中设置。运行之后，效果如下：

这里博主运行了2种模式的效果，也就是orientation设置为垂直或水平时的效果。可以看到，如果改为垂直，那么把selected_tab_indicator_height设置为0，就可以实现竖向分类菜单选择。当然，一般这种竖菜单我们用的是后面的ListContainer列表组件。

TabList事件监听

一般来说，App当中使用标签是为了切换页面，但是页面的组件涉及PageSlider，这个还没有讲解，我们先来看看如果监听其切换哪个标签。

示例代码如下：

public class MainAbilitySlice extends AbilitySlice{
    private TabList tabList;
    private String[] tab_str_list={"关注","推荐","热榜","问答","社区","Blink"};
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.tabList=(TabList)findComponentById(ResourceTable.Id_test_tablist);
        for(int i=0;i<tab_str_list.length;i++){
            TabList.Tab tab = tabList.new Tab(getContext());
            tab.setText(tab_str_list[i]);
            this.tabList.addTab(tab);
            if(i==1){
                tab.select();
            }
        }
        this.tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                //当某个Tab从未选中状态变为选中状态时的回调
                new ToastDialog(getContext()).setText(tab.getText()).show();
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                //当某个Tab从选中状态变为未选中状态时的回调
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //当某个Tab已处于选中状态，再次被点击时的状态回调
            }
        });
    }
}

运行之后，效果如首图所示。