鸿蒙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组件的主要内容,如果未能解决你的问题,请参考以下文章