鸿蒙App开发---TabList组件

Posted 一天一篇Python库

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鸿蒙App开发---TabList组件相关的知识,希望对你有一定的参考价值。

鸿蒙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已处于选中状态,再次被点击时的状态回调
            }
        });
    }
}

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

以上是关于鸿蒙App开发---TabList组件的主要内容,如果未能解决你的问题,请参考以下文章

十华为鸿蒙HarmonyOS应用开发之Java UI框架常用TabList组件使用

自学鸿蒙应用开发(17)- TabList和Tab

鸿蒙开发(15)---PageSlider组件

鸿蒙App开发---Text组件

鸿蒙App开发---Text组件

鸿蒙App开发(10)---Switch组件