官方文档说:“Tablist可以实现多个页签栏的切换,Tab为某个页签。子页签通常放在内容区上方,展示不同的分类。页签名称应该简洁明了,清晰描述分类的内容。”(https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-tablist-tab-0000001062229749)
TabList就是页面上方的切换按钮,就像今日头条这种。
参考官方代码做了个示例,介绍一下重点。
地址:https://download.csdn.net/download/Tulipsys/18756600
一、原理
基本原理大概这样:页面上方设置一个TabList,下面设置一个ComponentContainer作为容器。TabList上会设置几个按钮(Tab),点击Tab的时候就将不同的“页面(layout)”载入ComponentContainer中展现出来。
这儿说的“页面”这个词不准确,实际上就是layout,对应layout的xml文件。
二、示例说明
工程名:TabListSample https://download.csdn.net/download/Tulipsys/18756600
说明:
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应该用于页面顶部。大概试了一下放到底部也可以,效果应该也不错。