探索鸿蒙(HarmonyOS):TabList和Tab

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

TabList就是页面上方的切换按钮,就像今日头条这种。

参考官方代码做了个示例,介绍一下重点。

地址:

一、原理

基本原理大概这样:页面上方设置一个TabList,下面设置一个ComponentContainer作为容器。TabList上会设置几个按钮(Tab),点击Tab的时候就将不同的“页面(layout)”载入ComponentContainer中展现出来。

这儿说的“页面”这个词不准确,实际上就是layout,对应layout的xml文件。

二、示例说明

工程名:TabListSample

说明:

1.页面上部设置一个TabList,包括3个Tab:Image、Movies、News。

2.点击Tab打开相应的页面。

3.简便起见,每个页面只包含一个Text。

三、重点部分说明

1.在ability_main.xml中添加TabList和ComponentContainer

<?xml version="1.0" encoding="utf-8"?> <DependentLayout 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:top_margin="10vp" ohos:tab_margin="24vp" ohos:tab_length="140vp" ohos:text_size="20fp" ohos:height="36vp" ohos:width="match_parent" ohos:layout_alignment="center" ohos:orientation="horizontal" ohos:text_alignment="center" ohos:normal_text_color="#999999" ohos:selected_text_color="#eb2f47" ohos:selected_tab_indicator_color="#FFFFFF" ohos:selected_tab_indicator_height="2vp"/> <DirectionalLayout ohos:id="$+id:tab_container" ohos:height="match_parent" ohos:width="match_parent"> </DirectionalLayout> </DependentLayout>

(1)TabList和ComponentContainer必须要设置id,后面要用到。

(2)ComponentContainer这儿用的DirectionalLayout布局。猜测用哪种布局都差不多,没测试过。

2.为每个Tab新建页面

在layout中新建三个Tab页面,分别对应:Image、Movies、News。比如:tabcontent_movies.xml。

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Text ohos:id="$+id:news_text" ohos:height="match_parent" ohos:width="match_parent" ohos:text_alignment="center" ohos:text="News Tab" ohos:text_size="40fp"/> </DirectionalLayout>

用了DirectionalLayout布局,简便起见只放了一Text。

3.编写代码生成TabList。

在MainAbilitySlice中编写代码生成TabList:

tabList = (TabList) findComponentById(ResourceTable.Id_tab_list); tabList.setTabLength(60); // 设置Tab的宽度 tabList.setTabMargin(26); // 设置两个Tab之间的间距 tabList.setFixedMode(true); TabList.Tab tab1 = tabList.new Tab(getContext()); tab1.setText("Image"); tabList.addTab(tab1);

注:tab也可以用布局文件生成。用布局文件可以定义比较复杂的tab。

4.定义TabList的TabSelectedListener

定义TabList的TabSelectedListener,完成各种功能。

tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container); if(tab.getText().equals("Image")) { imageContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_image, null, false); container.removeAllComponents(); container.addComponent(imageContent); }else if(tab.getText().equals("Movies")) { movieContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_movies, null, false); container.removeAllComponents(); container.addComponent(movieContent); }else if(tab.getText().equals("News")) { newsContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_news, null, false); container.removeAllComponents(); container.addComponent(newsContent); Text newsText = (Text)findComponentById(ResourceTable.Id_news_text); newsText.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { new ToastDialog(slice) .setText("you clicked: News text") // Toast显示在界面中间 .setAlignment(LayoutAlignment.CENTER | LayoutAlignment.BOTTOM) .show(); } }); } } @Override public void onUnselected(TabList.Tab tab) { } @Override public void onReselected(TabList.Tab tab) { } }); }

最重要的就这几句话:

imageContent = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_tabcontent_image, null, false); container.removeAllComponents(); container.addComponent(imageContent);

四、补充

根据官方文档,TabList应该用于页面顶部。大概试了一下放到底部也可以,效果应该也不错。

经验分享 程序员 微信小程序 职场和发展