鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法

导语：大家好，我是你们的朋友朋哥，十年码农经验，对技术情有独钟。

今天来一个大招，鸿蒙中的顶部切换选项卡 TabList，开发应用的时候会经常用到，一般作为二级内容分类来用的。

不多说，今天的内容很多，下面我们开始今天的文章，还是老规矩，通过如下几点来说：

1，简介 2，属性 3，实战

简介

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

一般应用场景都是作为应用首页的二级菜单的多个分类：

用到的属性

Tablist的共有XML属性继承自：ScrollView

官网属性一大堆，看到都头大，其实使用起来就几个属性。

常用接口：

实战

1，创建项目，添加默认Tablist

<TabListohos:id="$+id:tab_list"ohos:text_size="20fp"ohos:height="50vp"ohos:width="match_parent"ohos:layout_alignment="center"ohos:orientation="horizontal"ohos:text_alignment="center"
/>

添加Tab

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
TabList.Tab tab = tabList.new Tab(getContext());
tab.setText("推荐");
tabList.addTab(tab);
TabList.Tab tab2 = tabList.new Tab(getContext());
tab2.setText("视频");
tabList.addTab(tab2);
TabList.Tab tab3 = tabList.new Tab(getContext());
tab3.setText("新闻");
tabList.addTab(tab3);
TabList.Tab tab4 = tabList.new Tab(getContext());
tab4.setText("问答");
tabList.addTab(tab4);

新增选项,在两个之间插入一个。

// 本示例中在"推荐"和"视频"之间的页签中新增"资源"页签TabList.Tab tab5 = tabList.new Tab(getContext());tab5.setText("资源");tab5.setMinWidth(80);tab5.setPadding(12, 0, 12, 0);tabList.addTab(tab5, 1); // 1 表示位置，在第一个后新增一个

默认选中第几个：

// 默认选中 某一个tabtab2.select();tab2.getPosition(); // 获取tab的当前索引下标

设置点击某一个选中后的操作：

// 设置监听tabList.addTabSelectedListener(new TabList.TabSelectedListener() {@Overridepublic void onSelected(TabList.Tab tab) {// 当某个Tab从未选中状态变为选中状态时的回调System.out.println("名称："+tab.getText()+"- 下标："+tab.getPosition());text_title.setText(tab.getText());}@Overridepublic void onUnselected(TabList.Tab tab) {// 当某个Tab从选中状态变为未选中状态时的回调}@Overridepublic void onReselected(TabList.Tab tab) {// 当某个Tab已处于选中状态，再次被点击时的状态回调}});

设置显示样式

<TabListohos:id="$+id:tab_list"ohos:text_size="20fp"ohos:height="50vp"ohos:width="match_parent"ohos:layout_alignment="center"ohos:orientation="horizontal"ohos:text_alignment="center"ohos:tab_margin="20vp" //tab间距ohos:tab_length="60vp" //tab长度ohos:normal_text_color="#000000" //未选中字体颜色ohos:selected_text_color="#CE0000" // 选中字体样式ohos:selected_tab_indicator_color="#CE0000" // 选中下面的划线样式ohos:selected_tab_indicator_height="2vp"/> //选中划线的高度

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><TabListohos:id="$+id:tab_list"ohos:text_size="20fp"ohos:height="50vp"ohos:width="match_parent"ohos:layout_alignment="center"ohos:orientation="horizontal"ohos:text_alignment="center"ohos:tab_margin="20vp"ohos:tab_length="60vp"ohos:normal_text_color="#000000"ohos:selected_text_color="#CE0000"ohos:selected_tab_indicator_color="#CE0000"ohos:selected_tab_indicator_height="2vp"/><DirectionalLayoutohos:height="1vp"ohos:width="match_parent"ohos:top_margin="10vp"ohos:background_element="#333333"/><Textohos:id="$+id:text_title"ohos:text_size="20vp"ohos:text="内容"ohos:weight="1"ohos:height="match_content"ohos:width="match_parent"ohos:text_alignment="center"/></DirectionalLayout>

package com.example.tablist_tab.slice;import com.example.tablist_tab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;public class MainAbilitySlice extends AbilitySlice {private Text text_title;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);text_title = (Text) findComponentById(ResourceTable.Id_text_title);TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);TabList.Tab tab = tabList.new Tab(getContext());tab.setText("推荐");tabList.addTab(tab);TabList.Tab tab2 = tabList.new Tab(getContext());tab2.setText("视频");tabList.addTab(tab2);TabList.Tab tab3 = tabList.new Tab(getContext());tab3.setText("新闻");tabList.addTab(tab3);TabList.Tab tab4 = tabList.new Tab(getContext());tab4.setText("问答");tabList.addTab(tab4);// 新增选项// 本示例中在"推荐"和"视频"之间的页签中新增"资源"页签TabList.Tab tab5 = tabList.new Tab(getContext());tab5.setText("资源");tab5.setMinWidth(80);tab5.setPadding(12, 0, 12, 0);tabList.addTab(tab5, 1); // 1 表示位置，在第一个后新增一个// 默认选中 某一个tabtab2.select();tab2.getPosition(); // 获取tab的当前索引下标// 设置监听tabList.addTabSelectedListener(new TabList.TabSelectedListener() {@Overridepublic void onSelected(TabList.Tab tab) {// 当某个Tab从未选中状态变为选中状态时的回调System.out.println("名称："+tab.getText()+"- 下标："+tab.getPosition());text_title.setText(tab.getText());}@Overridepublic void onUnselected(TabList.Tab tab) {// 当某个Tab从选中状态变为未选中状态时的回调}@Overridepublic void onReselected(TabList.Tab tab) {// 当某个Tab已处于选中状态，再次被点击时的状态回调}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

源码：https://gitee.com/codegrowth/haomony-develop/tree/master/TabList_Tab

关注公众号【程序员漫话编程】，后台回复 ”鸿蒙“ ，即可获得上千鸿蒙开源组件。

原创不易，有用就关注一下。要是帮到了你就给个三连吧，多谢支持。

觉得不错的小伙伴，记得帮我 点个赞和关注哟，笔芯笔芯~**

作者：码工

有问题请留言或者私信，可以微信搜索：程序员漫话编程，关注公众号获得更多免费学习资料。

鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法相关推荐

HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...
ios开发学习--选项卡（Tab Bar）效果源码分享--系列教程
自定义UITabBar 介绍: 自定义UITabBar,包括可自定义tab bar的背景图.tab bar的高度以及每个tab的图片,满足各种界面需求.但是,没有文字. http://ios.itmd ...
鸿蒙应用开发 | 按钮（Button）组件的功能与用法
大家好,我是你们的朋友朋哥,今天开始朋哥开始研究鸿蒙了,定时会写一些文章分享给大家,希望多多提意见. 上一篇原创文章解读了文本框(Text)和编辑框(TextField)的功能与用法. 没有跟上 ...
最全面鸿蒙系统开发的相关资料收录
开发本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...
Windows Mobile 6 中为开发人员提供的新功能(1)
Windows Mobile 6 中为开发人员提供的新功能(1) 2007年06月10日星期日 10:29 Jim Wilson,JW Hedgehog, Inc. 摘要 Windows Mobil ...
js跳转页面时添加header_鸿蒙应用开发踩坑记之路由跳转
本来打算先搞地图方面的开发,但是遇到一些,已经在官方论坛发帖求助了: 关于JS UI开发的一些问题developer.huawei.com 大家如果对鸿蒙应用开发有兴趣,也去帮我催催官方吧. 这两天 ...
鸿蒙应用开发培训笔记02：应用开发入门
文章目录零.本讲学习目标一.应用开发概述 (一)鸿蒙应用开发定位 (二)应用开发学习路线 (三)应用开发实例 - 小鸿网课二.搭建鸿蒙集成开发环境 - DevEco Studio 2.1 (一) ...
鸿蒙应用开发培训笔记01：HarmonyOS介绍
文章目录零.本讲学习目标一.鸿蒙系统理念与关键技术 (一)智能终端产业飞速发展带来历史性机遇 (二)HarmonyOS+超级终端,带给消费者的不一样 (三)HarmonyOS 开启万物互联时代的一 ...
《 HarmonyOS实战—HarmonyOS（鸿蒙）开发初体验，华为如何引领物联网时代》
Harmonyos(鸿蒙)开发初体验,华为如何引领物联网时代华为鸿蒙系统是一款全新的面向全场景的分布式操作系统,创造一个超级虚拟终端互联的世界,将人.设备.场景有机地联系在一起,将消费者在全场景生活 ...

鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法

简介

用到的属性

实战

鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法相关推荐

最新文章

热门文章