知識(shí)分享—利用Tab搭建頁面切換框架
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
前言
Tab，即多頁簽，是我們?cè)谇岸碎_發(fā)中常用的一種組件。當(dāng)前市面上的大多數(shù)應(yīng)用軟件的基礎(chǔ)UI界面，都會(huì)利用Tab組件構(gòu)建一個(gè)頁面切換框架，而最經(jīng)典的就是微信的用戶界面。Tab組件所搭建的頁面切換框架，能夠?qū)崿F(xiàn)一個(gè)非常實(shí)用的功能——當(dāng)用戶左右滑動(dòng)屏幕或點(diǎn)擊Tab時(shí)可以自由切換包含不同業(yè)務(wù)功能的界面。在本期的知識(shí)分享中，筆者將展示如何利用Tab搭建一個(gè)頁面切換的框架，希望能為讀者們帶來幫助與啟發(fā)。
正文
創(chuàng)建工程
打開DevEco Studio，選擇Empty Ability模板，創(chuàng)建一個(gè)新工程(相關(guān)選項(xiàng)的勾選如圖);
完成xml布局
在項(xiàng)目的目錄中，打開entry>src>main>resource>base>layout>ability_main_xml，刪除系統(tǒng)自帶的Text組件，在DirectionLayout中加入如下代碼：
<PageSlider
ohos:height="0"
ohos:width="match_parent"
ohos:id="$+id:Slider"
ohos:weight="1"
ohos:background_element="#ffffff"
/>
<TabList
ohos:height="80vp"
ohos:width="match_parent"
ohos:id="$+id:List"
ohos:background_element="gray"
ohos:orientation="horizontal"/>
此處加入了兩個(gè)組件——PageSlider與TabList。
加入代碼后的示例圖：
在AbilitySlice中配置PageSlider并承載三個(gè)用戶界面
在項(xiàng)目的目錄中，打開entry>src>main>java>com.example.demo>slice>MainAbilitySlice，先在onStart函數(shù)的上方加入如下代碼：
public class MainAbilitySlice extends AbilitySlice {
private PageSlider mPageSlider; //創(chuàng)建PageSlider類的對(duì)象
private ArrayList<Component>mPageview; //創(chuàng)建需要PageSlider對(duì)象管理的用戶界面列表
private TabList mTabList; //創(chuàng)建TabList類的對(duì)象
@Override
public void onStart(Intent intent) {
}
之后，在onStart函數(shù)的{ }內(nèi)中加入如下代碼：
//獲取PageSlider對(duì)象
mPageSlider=(PageSlider) findComponentById(ResourceTable.Id_Slider);
//創(chuàng)建PageSlider所需要承載界面的列表
mPageview=new ArrayList<Component>();
mPageview.add(generateTextComponent("第一個(gè)界面"));
mPageview.add(generateTextComponent("第二個(gè)界面"));
mPageview.add(generateTextComponent("第三個(gè)界面"));
//實(shí)例化PageSliderProvider，為PageSlider提供界面
mPageSlider.setProvider(new PageSliderProvider() {
@Override
public int getCount() {
//界面數(shù)量
return mPageview.size();
}
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int i) {
//添加用戶界面
componentContainer.addComponent(mPageview.get(i));
return mPageview.get(i);
}
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
//添加用戶界面
componentContainer.removeComponent(mPageview.get(i));
}
@Override
public boolean isPageMatchToObject(Component component, Object o) {
return component == o;
}
});
最后，在onStart函數(shù)的下方加入如下代碼：
@Override
public void onStart(Intent intent) {
}
private Text generateTextComponent(String content) {
Text text = new Text(this);
text.setLayoutConfig(new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,
ComponentContainer.LayoutConfig.MATCH_PARENT));
text.setTextAlignment(TextAlignment.CENTER);
text.setText(content);
text.setTextSize(80);
return text;
}
加入代碼后的示例圖：
在AbilitySlice中為TabList添加Tab
仍然是在MainAbilitySlice中的onStart函數(shù)的{ }內(nèi)加入代碼：
mTabList =(TabList) findComponentById(ResourceTable.Id_List); //獲取mTabList對(duì)象
mTabList.setTabLength(getResourceManager().getDeviceCapability().width); //設(shè)置TabList的Tab總寬度
//利用for循環(huán)定義Tab對(duì)象，并將其加入mTabList中
for(int i=0;i<3;i++) {
TabList.Tab tab = mTabList.new Tab(this);
tab.setText("界面" + (i + 1));
tab.setMarginsLeftAndRight(10,10);
tab.setTag(i);
mTabList.addTab(tab);
}
//設(shè)置監(jiān)聽器
mTabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
mPageSlider.setCurrentPage((int) tab.getTag());
}
@Override
public void onUnselected(TabList.Tab tab) {
}
@Override
public void onReselected(TabList.Tab tab) {
}
});
完成上述操作之后，打開Previewer，我們便能看到用Tab組件搭建的頁面切換框架。向左右方向滑動(dòng)，或者點(diǎn)擊灰色區(qū)域的按鈕，便可實(shí)現(xiàn)界面的切換。
結(jié)尾
本期的知識(shí)分享到這里就結(jié)束了。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
