HarmonyOS App(JAVA)多页签的实现（Tab）
页面可左右滑动，点击界面1,2,3切换到对应界面
PageSlider的创建和使用
在layout目录下的xml文件中创建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() {@Overridepublic void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) {}@Overridepublic void onPageSlideStateChanged(int state) {}@Overridepublic void onPageChosen(int itemPos) {}}); 设置布局方向 PageSlider默认为横向布局。 在xml中设置布局方向为纵向，示例如下： 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" 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 xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> ohos:id="$+id:page_slider" ohos:height="0vp" ohos:width="match_parent" ohos:background_element="#fffff" ohos:layout_alignment="horizontal_center" ohos:weight="1" /> ohos:id="$+id:tab_list" ohos:height="60vp" ohos:width="match_parent" ohos:background_element="gray" ohos:orientation="horizontal" /> 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 private TabList mTabList; @Override public 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 mPageview.add(generateTextComponent("第一个界面")); mPageview.add(generateTextComponent("第二个界面")); mPageview.add(generateTextComponent("第三个界面")); //为pageSlider提供界面 mPageSlider.setProvider(new PageSliderProvider() { @Override public int getCount() { 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; } }); //获取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() { @Override public 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()); } @Override public 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()); } @Override public 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; } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } } 参考文章
您阅读本篇文章共花了：
发表评论