首页 / 行业

鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示

2022-01-04 14:41:00

今天我想着配合鸿蒙里面提供的顶部切换控件 tablist，来实现顶部 tab 切换，然后下面多个 fraction 的效果。废话不多说，我们正式开始。

效果图如下：

具体实现

定 tablist 布局：

<?xml version="1.0" encoding="utf-8"?>

我们在纵向线性布局上面写了一个 tablist 然后下面写了一个 StackLayout 来装载我们的多个 fraction。

java 代码逻辑，顶部标签数据：

privateString[]str={"关注","推荐","热点","问答"};

初始化 tab 并且添加顶部标签文字：

privatevoidinitview(){TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);if(tabList!=null){for(inti=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 切换逻辑：

privatevoidaddHomeFraction(){getFractionManager().startFractionScheduler().add(ResourceTable.Id_mainstack,newAttentionFraction()).submit();}publicvoidlayoutShow(intcode){switch(code){case0:getFractionManager().startFractionScheduler().replace(ResourceTable.Id_mainstack,newAttentionFraction()).submit();break;case1:getFractionManager().startFractionScheduler().replace(ResourceTable.Id_mainstack,newRecommendFraction()).submit();break;case2:getFractionManager().startFractionScheduler().replace(ResourceTable.Id_mainstack,newHotspotFraction()).submit();break;case3:getFractionManager().startFractionScheduler().replace(ResourceTable.Id_mainstack,newQuestionFraction()).submit();break;default:break;}}

这边我们提供了一个 addHomeFraction 方法和 layoutShow 方法。我们在进入 MainAbility 的时候调用 addHomeFraction 来加载第一个默认的 fraction。

然后我们在点击顶部的 tablist 标签的时候，我们在 onSelected 回调方法中调用 layoutShow方法。

publicvoidonSelected(TabList.Tabtab){//当某个Tab从未选中状态变为选中状态时的回调System.out.println("当某个Tab从未选中状态变为选中状态时的回调");layoutShow(tab.getPosition());}

我们只需要传入 tab.getPosition() 点击顶部标签的下标即可，这样依赖我们的 tablist 配合多个 fraction 切换功能就实现了。具体的 fraction 的内部逻辑我们简单说一下。

②关注模块

布局文件：

<?xml version="1.0" encoding="utf-8"?>

java 逻辑代码：

packagecom.example.tablist.fraction;importcom.example.tablist.ResourceTable;importcom.example.tablist.bean.PositionInfo;importcom.example.tablist.config.Api;importcom.example.tablist.provider.PositionProvider;importcom.google.gson.Gson;importohos.aafwk.ability.fraction.Fraction;importohos.aafwk.content.Intent;importohos.agp.components.Component;importohos.agp.components.ComponentContainer;importohos.agp.components.LayoutScatter;importohos.agp.components.ListContainer;importjava.util.List;/*****创建人：xuqing*创建2021年2月28日1703*类说明：关注模块**/publicclassAttentionFractionextendsFraction{privatePositionProviderpositionProvider;privateListContainerlistContainer;@OverrideprotectedComponentonComponentAttached(LayoutScatterscatter,ComponentContainercontainer,Intentintent){Componentcomponent=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);returncomponent;}protectedvoidonStart(Intentintent){super.onStart(intent);listContainer=(ListContainer)getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);getPostition();}publicvoidgetPostition(){Gsongson=newGson();PositionInfopositionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);Listlist=positionInfo.getData();positionProvider=newPositionProvider(list,getFractionAbility());listContainer.setItemProvider(positionProvider);}}

几个 fraction 其实比较简单，都是加载本地死数据显示在 listContainer 控件上面。

其他几个 fraction 因为逻辑都差不多我这边就不展开一个一个讲，有兴趣的同学可以下载完整代码去查阅，鸿蒙到此 TabList 配合 Fraction 实现顶部切换效果就讲完了。

总结

鸿蒙里面提供了比较好用的 tablist 组件，我们只需要简单的基本就能实现顶部 tab 的切换了。然后配合 fraction 跟 Ability 进行绑定，但是我们的 Ability 需要继承 FractionAbility。这样我们就能完成 fraction 和 ability 的绑定。我们在 tablist 的回调方法去调用我们替换 fraction 的方法就能实现顶部 tablist 点击切换的时候下面的 fraction 跟着一起切换。

更多的 tablist 和 fraction 的联动效果同学们有兴趣可以私下研究，我这边篇幅有限就不展开讲了。

最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。

项目地址：