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"

/>

1. 每个页面可能需要呈现不同的数据，因此需要适配不同的数据结构，创建TestPageProvider.java，需继承PageSliderProvider.java，必须重写以下方法：

   方法名	作用
   getCount()	获取可用视图的数量。
   createPageInContainer(ComponentContainer componentContainer, int position)	在指定位置创建页面。
   destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o)	销毁容器中的指定页面。
   isPageMatchToObject(Component component, Object o)	视图是否关联指定对象。

PageSlider的常用方法

常用方法

响应页面切换事件

1. pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
2. @Override
3. public void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) {
4. }
5. @Override
6. public void onPageSlideStateChanged(int state) {
7. }
8. @Override
9. public void onPageChosen(int itemPos) {
10. }
11. });

设置布局方向

PageSlider默认为横向布局。

在xml中设置布局方向为纵向，示例如下：

<PageSlider

1. 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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">
 
    <PageSlider
        ohos:id="$+id:page_slider"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:background_element="#fffff"
        ohos:layout_alignment="horizontal_center"
        ohos:weight="1"
        />
    <TabList
        ohos: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;
    @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<Component>();
        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);
    }
}