鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示
今天我想着配合鸿蒙里面提供的顶部切换控件 tablist，来实现顶部 tab 切换，然后下面多个 fraction 的效果。废话不多说，我们正式开始。
效果图如下：
具体实现
定 tablist 布局：
我们在纵向线性布局上面写了一个 tablist 然后下面写了一个 stacklayout 来装载我们的多个 fraction。
java 代码逻辑，顶部标签数据：
private string[] str={关注,推荐,热点,问答};
初始化 tab 并且添加顶部标签文字：
private void initview() { tablist tablist = (tablist) findcomponentbyid(resourcetable.id_tab_list); if(tablist!=null){ for (int i = 0; i < str.length; i++) { tablist.tab tab = tablist.new tab(getcontext()); tab.settext(str[i]); tablist.addtab(tab); } /* tablist.settablength(60); // 设置tab的宽度 tablist.settabmargin(26); // 设置两个tab之间的间距*/ addhomefraction(); tablist.addtabselectedlistener(new tablist.tabselectedlistener() { @override public void onselected(tablist.tab tab) { // 当某个tab从未选中状态变为选中状态时的回调 system.out.println(当某个tab从未选中状态变为选中状态时的回调); layoutshow(tab.getposition()); } @override public void onunselected(tablist.tab tab) { // 当某个tab从选中状态变为未选中状态时的回调 system.out.println(当某个tab从选中状态变为未选中状态时的回调); } @override public void onreselected(tablist.tab tab) { // 当某个tab已处于选中状态，再次被点击时的状态回调 system.out.println(当某个tab已处于选中状态，再次被点击时的状态回调); } }); } }
我们初始化 tablist 控件后，for 循环设置我们 tablist 的 tab，并添加到 tablist 组件的 addtab 方法中。
①多个 fraction 切换逻辑：
private void addhomefraction(){ getfractionmanager() .startfractionscheduler() .add(resourcetable.id_mainstack, new attentionfraction()) .submit(); } public void layoutshow(int code){ switch (code){ case 0: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new attentionfraction()) .submit(); break; case 1: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new recommendfraction()) .submit(); break; case 2: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new hotspotfraction()) .submit(); break; case 3: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new questionfraction()) .submit(); break; default: break; } } 这边我们提供了一个 addhomefraction 方法和 layoutshow 方法。 我们在进入 mainability 的时候调用 addhomefraction 来加载第一个默认的 fraction。
然后我们在点击顶部的 tablist 标签的时候，我们在 onselected 回调方法中调用 layoutshow方法。
public void onselected(tablist.tab tab) { // 当某个tab从未选中状态变为选中状态时的回调 system.out.println(当某个tab从未选中状态变为选中状态时的回调); layoutshow(tab.getposition()); }
我们只需要传入 tab.getposition() 点击顶部标签的下标即可，这样依赖我们的 tablist 配合多个 fraction 切换功能就实现了。具体的 fraction 的内部逻辑我们简单说一下。
②关注模块
布局文件：
java 逻辑代码：
package com.example.tablist.fraction;import com.example.tablist.resourcetable;import com.example.tablist.bean.positioninfo;import com.example.tablist.config.api;import com.example.tablist.provider.positionprovider;import com.google.gson.gson;import ohos.aafwk.ability.fraction.fraction;import ohos.aafwk.content.intent;import ohos.agp.components.component;import ohos.agp.components.componentcontainer;import ohos.agp.components.layoutscatter;import ohos.agp.components.listcontainer;import java.util.list;/*** * * 创建人：xuqing * 创建2021年2月28日1703 * 类说明： 关注模块 * */public class attentionfraction extends fraction { private positionprovider positionprovider; private listcontainer listcontainer; @override protected component oncomponentattached(layoutscatter scatter, componentcontainer container, intent intent) { component component=scatter.parse(resourcetable.layout_fraction_attention,container,false); return component; } protected void onstart(intent intent) { super.onstart(intent); listcontainer= (listcontainer) getfractionability().findcomponentbyid(resourcetable.id_jop_page_list); getpostition(); } public void getpostition(){ gson gson=new gson(); positioninfo positioninfo=gson.fromjson(api.getpositioninfo(),positioninfo.class); list list=positioninfo.getdata(); positionprovider=new positionprovider(list, getfractionability()); listcontainer.setitemprovider(positionprovider); }}
几个 fraction 其实比较简单，都是加载本地死数据显示在 listcontainer 控件上面。
其他几个 fraction 因为逻辑都差不多我这边就不展开一个一个讲，有兴趣的同学可以下载完整代码去查阅，鸿蒙到此 tablist 配合 fraction 实现顶部切换效果就讲完了。
总结
鸿蒙里面提供了比较好用的 tablist 组件，我们只需要简单的基本就能实现顶部 tab 的切换了。 然后配合 fraction 跟 ability 进行绑定，但是我们的 ability 需要继承 fractionability。这样我们就能完成 fraction 和 ability 的绑定。 我们在 tablist 的回调方法去调用我们替换 fraction 的方法就能实现顶部 tablist 点击切换的时候下面的 fraction 跟着一起切换。
更多的 tablist 和 fraction 的联动效果同学们有兴趣可以私下研究，我这边篇幅有限就不展开讲了。
最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。
项目地址：
https://gitee.com/qiuyu123/tablistcut
原文标题：在鸿蒙上实现“顶部切换”效果
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
为什么我的显示器上会出现模糊的水平线？
多家上市公司加速布局精密减速器，为什么“这块铁”成为机器人产业链中的香饽饽？
意法半导体开发出世界上最大的影像传感器
台积电董事长否认苹果削减 5nm A14 芯片代工订单
20nm高性能开发套件现已发售！
鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示
同步加速器光源可用于新世代电池开发
新基建浪潮下，AI的下一次突破何时到来?
浅谈C语言与C++的前世今生
微电网的两种拓扑架构思路介绍
扬尘监测系统助力改善空气质量
美图公司表示：华为没有使用美图的任何影像技术
关于GAIA支撑模块的简单说明
工信部出手勒“马缰绳” 液晶面板踩刹车
NB-IoT射频指标到底是啥？一文讲清楚
80C51单片机的内部RAM简介
中国有无载人登月计划？国家航天局：先搞关键技术攻关
汽车safe检测仪的应用对于汽车安全提供了保障
关于云存储的一些优势分析
比特币扩容之争的困局是core开发组造成的吗？
效果图如下：
具体实现
定 tablist 布局：
我们在纵向线性布局上面写了一个 tablist 然后下面写了一个 stacklayout 来装载我们的多个 fraction。
java 代码逻辑，顶部标签数据：
private string[] str={关注,推荐,热点,问答};
初始化 tab 并且添加顶部标签文字：
private void initview() { tablist tablist = (tablist) findcomponentbyid(resourcetable.id_tab_list); if(tablist!=null){ for (int i = 0; i < str.length; i++) { tablist.tab tab = tablist.new tab(getcontext()); tab.settext(str[i]); tablist.addtab(tab); } /* tablist.settablength(60); // 设置tab的宽度 tablist.settabmargin(26); // 设置两个tab之间的间距*/ addhomefraction(); tablist.addtabselectedlistener(new tablist.tabselectedlistener() { @override public void onselected(tablist.tab tab) { // 当某个tab从未选中状态变为选中状态时的回调 system.out.println(当某个tab从未选中状态变为选中状态时的回调); layoutshow(tab.getposition()); } @override public void onunselected(tablist.tab tab) { // 当某个tab从选中状态变为未选中状态时的回调 system.out.println(当某个tab从选中状态变为未选中状态时的回调); } @override public void onreselected(tablist.tab tab) { // 当某个tab已处于选中状态，再次被点击时的状态回调 system.out.println(当某个tab已处于选中状态，再次被点击时的状态回调); } }); } }
我们初始化 tablist 控件后，for 循环设置我们 tablist 的 tab，并添加到 tablist 组件的 addtab 方法中。
①多个 fraction 切换逻辑：
private void addhomefraction(){ getfractionmanager() .startfractionscheduler() .add(resourcetable.id_mainstack, new attentionfraction()) .submit(); } public void layoutshow(int code){ switch (code){ case 0: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new attentionfraction()) .submit(); break; case 1: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new recommendfraction()) .submit(); break; case 2: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new hotspotfraction()) .submit(); break; case 3: getfractionmanager() .startfractionscheduler() .replace(resourcetable.id_mainstack, new questionfraction()) .submit(); break; default: break; } } 这边我们提供了一个 addhomefraction 方法和 layoutshow 方法。 我们在进入 mainability 的时候调用 addhomefraction 来加载第一个默认的 fraction。
然后我们在点击顶部的 tablist 标签的时候，我们在 onselected 回调方法中调用 layoutshow方法。
public void onselected(tablist.tab tab) { // 当某个tab从未选中状态变为选中状态时的回调 system.out.println(当某个tab从未选中状态变为选中状态时的回调); layoutshow(tab.getposition()); }
我们只需要传入 tab.getposition() 点击顶部标签的下标即可，这样依赖我们的 tablist 配合多个 fraction 切换功能就实现了。具体的 fraction 的内部逻辑我们简单说一下。
②关注模块
布局文件：
java 逻辑代码：
package com.example.tablist.fraction;import com.example.tablist.resourcetable;import com.example.tablist.bean.positioninfo;import com.example.tablist.config.api;import com.example.tablist.provider.positionprovider;import com.google.gson.gson;import ohos.aafwk.ability.fraction.fraction;import ohos.aafwk.content.intent;import ohos.agp.components.component;import ohos.agp.components.componentcontainer;import ohos.agp.components.layoutscatter;import ohos.agp.components.listcontainer;import java.util.list;/*** * * 创建人：xuqing * 创建2021年2月28日1703 * 类说明： 关注模块 * */public class attentionfraction extends fraction { private positionprovider positionprovider; private listcontainer listcontainer; @override protected component oncomponentattached(layoutscatter scatter, componentcontainer container, intent intent) { component component=scatter.parse(resourcetable.layout_fraction_attention,container,false); return component; } protected void onstart(intent intent) { super.onstart(intent); listcontainer= (listcontainer) getfractionability().findcomponentbyid(resourcetable.id_jop_page_list); getpostition(); } public void getpostition(){ gson gson=new gson(); positioninfo positioninfo=gson.fromjson(api.getpositioninfo(),positioninfo.class); list list=positioninfo.getdata(); positionprovider=new positionprovider(list, getfractionability()); listcontainer.setitemprovider(positionprovider); }}
几个 fraction 其实比较简单，都是加载本地死数据显示在 listcontainer 控件上面。
其他几个 fraction 因为逻辑都差不多我这边就不展开一个一个讲，有兴趣的同学可以下载完整代码去查阅，鸿蒙到此 tablist 配合 fraction 实现顶部切换效果就讲完了。
总结
鸿蒙里面提供了比较好用的 tablist 组件，我们只需要简单的基本就能实现顶部 tab 的切换了。 然后配合 fraction 跟 ability 进行绑定，但是我们的 ability 需要继承 fractionability。这样我们就能完成 fraction 和 ability 的绑定。 我们在 tablist 的回调方法去调用我们替换 fraction 的方法就能实现顶部 tablist 点击切换的时候下面的 fraction 跟着一起切换。
更多的 tablist 和 fraction 的联动效果同学们有兴趣可以私下研究，我这边篇幅有限就不展开讲了。
最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。
项目地址：
https://gitee.com/qiuyu123/tablistcut
原文标题：在鸿蒙上实现“顶部切换”效果
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
为什么我的显示器上会出现模糊的水平线？
多家上市公司加速布局精密减速器，为什么“这块铁”成为机器人产业链中的香饽饽？
意法半导体开发出世界上最大的影像传感器
台积电董事长否认苹果削减 5nm A14 芯片代工订单
20nm高性能开发套件现已发售！
鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示
同步加速器光源可用于新世代电池开发
新基建浪潮下，AI的下一次突破何时到来?
浅谈C语言与C++的前世今生
微电网的两种拓扑架构思路介绍
扬尘监测系统助力改善空气质量
美图公司表示：华为没有使用美图的任何影像技术
关于GAIA支撑模块的简单说明
工信部出手勒“马缰绳” 液晶面板踩刹车
NB-IoT射频指标到底是啥？一文讲清楚
80C51单片机的内部RAM简介
中国有无载人登月计划？国家航天局：先搞关键技术攻关
汽车safe检测仪的应用对于汽车安全提供了保障
关于云存储的一些优势分析
比特币扩容之争的困局是core开发组造成的吗？