28.HarmonyOS App(JAVA)多頁簽的實現（Tab）

?HarmonyOS App(JAVA)多頁簽的實現（Tab）

頁面可左右滑動，點擊界面1,2,3切換到對應界面

PageSlider的創建和使用

在layout目錄下的xml文件中創建PageSlider。

<PageSlider

ohos:id="$+id:page_slider"

ohos:height="300vp"

ohos:width="300vp"

ohos:layout_alignment="horizontal_center"

每個頁面可能需要呈現不同的數據，因此需要適配不同的數據結構，創建TestPageProvider.java，需繼承PageSliderProvider.java，必須重寫以下方法：

方法名	作用
getCount()	獲取可用視圖的數量。
createPageInContainer(ComponentContainer componentContainer,?int?position)	在指定位置創建頁面。
destroyPageFromContainer(ComponentContainer componentContainer,?int?i, Object o)	銷毀容器中的指定頁面。
isPageMatchToObject(Component component, Object o)	視圖是否關聯指定對象。

PageSlider的常用方法

常用方法

方法名	作用
setProvider(PageSliderProvider provider)	設置Provider，用于配置PageSlider的數據結構。
addPageChangedListener(PageChangedListener listener)	響應頁面切換事件。
removePageChangedListener(PageChangedListener listener)	移除頁面切換的響應。
setOrientation(int orientation)	設置布局方向。
setPageCacheSize(int count)	設置要保留當前頁面兩側的頁面數。
setCurrentPage(int itemPos)	設置當前展示頁面。
setCurrentPage(int itemPos, boolean smoothScroll)	設置當前展示界面，并確定是否需要平滑滾動。smoothScroll默認為true，即默認為平滑滾動。
setSlidingPossible(boolean enable)	是否啟用頁面滑動。enable默認為true，即默認開啟頁面滑動。
setReboundEffect(boolean enabled)	是否啟用回彈效果。
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent) setReboundEffectParams(ReboundEffectParams reboundEffectParams)	配置回彈效果參數。
setPageSwitchTime(int durationMs)	設置頁面切換時間。

響應頁面切換事件

pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
@Override
public void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) {
}
@Override
public void onPageSlideStateChanged(int state) {
}
@Override
public void onPageChosen(int itemPos) {
}
});

設置布局方向

PageSlider默認為橫向布局。

在xml中設置布局方向為縱向，示例如下：

<PageSlider

ohos:orientation="vertical"/>

在代碼中設置，示例如下：

pageSlider.setOrientation(Component.VERTICAL);

TabList和Tab

Tablist可以實現多個頁簽欄的切換，Tab為某個頁簽。子頁簽通常放在內容區上方，展示不同的分類。頁簽名稱應該簡潔明了，清晰描述分類的內容。

支持的XML屬性

Tablist的共有XML屬性繼承自：ScrollView

Tablist的自有XML屬性見下表：

**表1?**Tablist的自有XML屬性
屬性名稱	中文描述	取值	取值說明	使用案例
fixed_mode	固定所有頁簽并同時顯示	boolean類型	可以直接設置true/false，也可以引用boolean資源。	ohos:fixed_mode="true" ohos:fixed_mode="$boolean:true_tag"
orientation	頁簽排列方向	horizontal	表示水平排列。	ohos:orientation="horizontal"
orientation	頁簽排列方向	vertical	表示垂直排列。	ohos:orientation="vertical"
normal_text_color	未選中的文本顏色	color類型	可以直接設置色值，也可以引用color資源。	ohos:normal_text_color="#FFFFFFFF" ohos:normal_text_color="$color:black"
selected_text_color	選中的文本顏色	color類型	可以直接設置色值，也可以引用color資源。	ohos:selected_text_color="#FFFFFFFF" ohos:selected_text_color="$color:black"
selected_tab_indicator_color	選中頁簽的顏色	color類型	可以直接設置色值，也可以引用color資源。	ohos:selected_tab_indicator_color="#FFFFFFFF" ohos:selected_tab_indicator_color="$color:black"
selected_tab_indicator_height	選中頁簽的高度	float類型	表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源。	ohos:selected_tab_indicator_height="100" ohos:selected_tab_indicator_height="20vp" ohos:selected_tab_indicator_height="$float:size_value"
tab_indicator_type	頁簽指示類型	invisible	表示選中的頁簽無指示標記。	ohos:tab_indicator_type="invisible"
		bottom_line	表示選中的頁簽通過底部下劃線標記。	ohos:tab_indicator_type="bottom_line"
		left_line	表示選中的頁簽通過左側分割線標記。	ohos:tab_indicator_type="left_line"
		oval	表示選中的頁簽通過橢圓背景標記。	ohos:tab_indicator_type="oval"
tab_length	頁簽長度	float類型	表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源。	ohos:tab_length="100" ohos:tab_length="20vp" ohos:tab_length="$float:size_value"
tab_margin	頁簽間距	float類型	表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源。	ohos:tab_margin="100" ohos:tab_margin="20vp" ohos:tab_margin="$float:size_value"
text_alignment	文本對齊方式	left	表示文本靠左對齊。	可以設置取值項如表中所列，也可以使用“\|”進行多項組合。 ohos:text_alignment="center" ohos:text_alignment="top\|left"
		top	表示文本靠頂部對齊。
		right	表示文本靠右對齊。
		bottom	表示文本靠底部對齊。
		horizontal_center	表示文本水平居中對齊。
		vertical_center	表示文本垂直居中對齊。
		center	表示文本居中對齊。
		start	表示文本靠起始端對齊。
		end	表示文本靠結尾端對齊。
text_size	文本大小	float類型	表示尺寸的float類型。可以是浮點數值，其默認單位為px；也可以是帶px/vp/fp單位的浮點數值；也可以引用float資源。	ohos:text_size="100" ohos:text_size="16fp" ohos:text_size="$float:size_value"

?ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><PageSliderohos:id="$+id:page_slider"ohos:height="0vp"ohos:width="match_parent"ohos:background_element="#fffff"ohos:layout_alignment="horizontal_center"ohos:weight="1"/><TabListohos:id="$+id:tab_list"ohos:height="60vp"ohos:width="match_parent"ohos:background_element="gray"ohos:orientation="horizontal"/></DirectionalLayout>

MainAbilitySlice.java

package com.example.myapplication.slice;import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.components.PageSlider;
import ohos.agp.render.opengl.Utils;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;import java.util.ArrayList;public class MainAbilitySlice extends AbilitySlice {private PageSlider mPageSlider;private ArrayList<Component> mPageview; //需要pageSlider對象管理的用戶界面列表private TabList mTabList;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//獲取pageSlider對象mPageSlider =(PageSlider) findComponentById(ResourceTable.Id_page_slider);//創建PageSlider所需要承載界面的列表mPageview = new ArrayList<Component>();mPageview.add(generateTextComponent("第一個界面"));mPageview.add(generateTextComponent("第二個界面"));mPageview.add(generateTextComponent("第三個界面"));//為pageSlider提供界面mPageSlider.setProvider(new PageSliderProvider() {@Overridepublic int getCount() {return mPageview.size();}@Overridepublic Object createPageInContainer(ComponentContainer componentContainer, int i) {componentContainer.addComponent(mPageview.get(i));return mPageview.get(i);}@Overridepublic void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {componentContainer.removeComponent(mPageview.get(i));}@Overridepublic boolean isPageMatchToObject(Component component, Object o) {return component == o;}});//獲取TabList對象mTabList =(TabList) findComponentById(ResourceTable.Id_tab_list);mTabList.setTabLength(getResourceManager().getDeviceCapability().width);for(int i=0;i<3;i++){TabList.Tab tab = mTabList.new Tab(this);tab.setText("界面"+(i+1));tab.setMarginsLeftAndRight(8,8);tab.setTag(i);mTabList.addTab(tab);}mTabList.addTabSelectedListener(new TabList.TabSelectedListener() {@Overridepublic void onSelected(TabList.Tab tab) {mPageSlider.setCurrentPage((int)tab.getTag());HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x12345, "MainAbilitySlice"); // 創建HiLog標簽對象String tag = "MyTag"; // 設置日志的tag名稱//  int level = HiLogConstants.DEBUG; // 設置日志等級為調試模式HiLog.debug(label, "%s", "已選擇"+tab.getText());}@Overridepublic void onUnselected(TabList.Tab tab) {//Utils.log("aaa");HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x12345, "MainAbilitySlice"); // 創建HiLog標簽對象String tag = "MyTag"; // 設置日志的tag名稱//  int level = HiLogConstants.DEBUG; // 設置日志等級為調試模式HiLog.debug(label, "%s", "Unselected選擇"+tab.getText());}@Overridepublic void onReselected(TabList.Tab tab) {HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x12345, "MainAbilitySlice"); // 創建HiLog標簽對象String tag = "MyTag"; // 設置日志的tag名稱//  int level = HiLogConstants.DEBUG; // 設置日志等級為調試模式HiLog.debug(label, "%s", "OnReselected選擇"+tab.getText());}});}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(60);text.setTextColor(Color.BLUE);return text;}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}