鸿蒙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已处于选中状态，再次被点击时的状态回调 } }); } }
运行之后，效果如首图所示。
