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);}
}