鴻蒙 TabList 配合 Fraction 實(shí)現(xiàn)頂部切換效果演示

今天我想著配合鴻蒙里面提供的頂部切換控件 tablist，來實(shí)現(xiàn)頂部 tab 切換，然后下面多個 fraction 的效果。廢話不多說，我們正式開始。

效果圖如下：

具體實(shí)現(xiàn)

定 tablist 布局：

java 代碼邏輯，頂部標(biāo)簽數(shù)據(jù)：

privateString[]str={"關(guān)注","推薦","熱點(diǎn)","問答"};

初始化 tab 并且添加頂部標(biāo)簽文字：

privatevoidinitview(){
TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);
if(tabList!=null){
for(inti=0;i

	

	我們初始化 tablist 控件后，for 循環(huán)設(shè)置我們 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 方法。  我們在進(jìn)入 MainAbility 的時候調(diào)用 addHomeFraction 來加載第一個默認(rèn)的 fraction。

	

	然后我們在點(diǎn)擊頂部的 tablist 標(biāo)簽的時候，我們在 onSelected 回調(diào)方法中調(diào)用 layoutShow方法。

	
publicvoidonSelected(TabList.Tabtab){
//當(dāng)某個Tab從未選中狀態(tài)變?yōu)檫x中狀態(tài)時的回調(diào)
System.out.println("當(dāng)某個Tab從未選中狀態(tài)變?yōu)檫x中狀態(tài)時的回調(diào)");
layoutShow(tab.getPosition());
}


	

	我們只需要傳入 tab.getPosition() 點(diǎn)擊頂部標(biāo)簽的下標(biāo)即可，這樣依賴我們的 tablist 配合多個 fraction 切換功能就實(shí)現(xiàn)了。具體的 fraction 的內(nèi)部邏輯我們簡單說一下。

	②關(guān)注模塊

	布局文件：

	








	

	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;
/***
*
*創(chuàng)建人：xuqing
*創(chuàng)建2021年2月28日1703
*類說明：關(guān)注模塊
*
*/
publicclassAttentionFractionextendsFraction{
privatePositionProviderpositionProvider;
privateListContainerlistContainer;
@Override
protectedComponentonComponentAttached(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 其實(shí)比較簡單，都是加載本地死數(shù)據(jù)顯示在 listContainer 控件上面。

	其他幾個 fraction 因?yàn)檫壿嫸疾畈欢辔疫@邊就不展開一個一個講，有興趣的同學(xué)可以下載完整代碼去查閱，鴻蒙到此 TabList 配合 Fraction 實(shí)現(xiàn)頂部切換效果就講完了。

	總結(jié)

	   鴻蒙里面提供了比較好用的 tablist 組件，我們只需要簡單的基本就能實(shí)現(xiàn)頂部 tab 的切換了。  然后配合 fraction 跟 Ability 進(jìn)行綁定，但是我們的 Ability 需要繼承 FractionAbility。這樣我們就能完成 fraction 和 ability 的綁定。  我們在 tablist 的回調(diào)方法去調(diào)用我們替換 fraction 的方法就能實(shí)現(xiàn)頂部 tablist 點(diǎn)擊切換的時候下面的 fraction 跟著一起切換。

	更多的 tablist 和 fraction 的聯(lián)動效果同學(xué)們有興趣可以私下研究，我這邊篇幅有限就不展開講了。

	最后希望我的文章能幫助到各位解決問題，以后我還會貢獻(xiàn)更多有用的代碼分享給大家。

	項(xiàng)目地址：

	
https://gitee.com/qiuyu123/tablistcut


	

	

	原文標(biāo)題：在鴻蒙上實(shí)現(xiàn)“頂部切換”效果

	文章出處：【微信公眾號：HarmonyOS技術(shù)社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請注明出處。

	審核編輯：彭菁