4.6【HarmonyOS鸿蒙开发】组件PageSlider和PageSliderIndicator_鸿蒙pageslider使用

4.6【HarmonyOS鸿蒙开发】组件PageSlider和PageSliderIndicator

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

PageSlider是用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换。

一、支持的XML属性

PageSlider无自有的XML属性，共有XML属性继承自：StackLayout

二、PageSlider的使用方法

1、在layout目录下的xml文件中创建PageSlider。

<PageSlider
        ohos:id="$+id:page_slider"
        ohos:height="300vp"
        ohos:width="300vp"
        ohos:background_element="#33aa0000"
        ohos:layout_alignment="horizontal_center"/>
1
2
3
4
5
6

效果：

2、每个页面可能需要呈现不同的数据，因此需要适配不同的数据结构，需要使用PageSliderProvider。

新建一个provider包，创建TestPageProvider.java，需继承PageSliderProvider.java，必须重写以下方法：

示例代码：

package com.example.hanrupageslider.provider;

import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
import java.util.List;

/**
 * 继承PageSliderProvider
 */
public class TestPagerProvider extends PageSliderProvider {
    // 数据源，每个页面对应list中的一项
    private List<DataItem> list;
    public TestPagerProvider(List<DataItem> list) {
        this.list = list;
    }

    /**
     * 表示当前 Provider 当中加载数据的条目
     * @return 返回值表示 Provider 中数据条目个数
     */
    @Override
    public int getCount() {
        return list.size();
    }

    /**
     * 表示根据下标实例化 PageSlider 中每个page页数据
     *
     * @param componentContainer，表示当前实例化item属于的 PageSlider 控件
     * @param position，表示当前实例化下标
     * @return
     */
    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int position) {
        // 1.根据下标获取数据
        final DataItem data = list.get(position);
        // 2.创建一个Text对象，以及各种设置该text
        Text label = new Text(null);
        label.setTextAlignment(TextAlignment.CENTER);
        label.setLayoutConfig(
                new StackLayout.LayoutConfig(
                        ComponentContainer.LayoutConfig.MATCH_PARENT,
                        ComponentContainer.LayoutConfig.MATCH_PARENT
                ));
        label.setText(data.mText);
        label.setTextColor(Color.BLACK);
        label.setTextSize(50);
        ShapeElement element = new ShapeElement();
        element.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#AFEEEE")));
        label.setBackground(element);

        // 3.将刚刚创建的Text对象，加载到 PageSlider 中
        componentContainer.addComponent(label);
        return label;
    }

    /**
     * 表示根据下标移除 PageSlider 中的pager页
     * @param componentContainer ，表示当前移除的pager页所属得 PageSlider 控件
     * @param position ， 表示移除page页的下标
     * @param object
     */
    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int position, Object object) {
        componentContainer.removeComponent((Component) object);
    }

    /**
     * 视图是否关联指定对象。
     * @param component
     * @param object
     * @return
     */
    @Override
    public boolean isPageMatchToObject(Component component, Object object) {
        return true;

    }
    //数据实体类
    public static class DataItem{
        String mText;
        public DataItem(String txt) {
            mText = txt;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

3、在MainAbilitySlice中，添加数据，，并适配PageSlider的数据结构。

package com.example.hanrupageslider.slice;

import com.example.hanrupageslider.ResourceTable;
import com.example.hanrupageslider.provider.TestPagerProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;

import java.util.ArrayList;

/**
 * PageSlider 主要通过左右滑动展示数据的控件
 * PageSlider 中展示数据列表 所以属于Provider控件
 */
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initPageSlider();
    }
    // 1.初始化PageSlider
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData()));
    }

    // 2.提供数据源
    private ArrayList<TestPagerProvider.DataItem> getData() {
        ArrayList<TestPagerProvider.DataItem> dataItems = new ArrayList<>();
        dataItems.add(new TestPagerProvider.DataItem("Page A"));
        dataItems.add(new TestPagerProvider.DataItem("Page B"));
        dataItems.add(new TestPagerProvider.DataItem("Page C"));
        dataItems.add(new TestPagerProvider.DataItem("Page D"));
        return dataItems;
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

PageSlider的使用效果：

三、PageSlider常用方法

常用方法表

1、响应页面切换事件

        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) { 
            }
        });
1
2
3
4
5
6
7
8
9
10
11

2、设置布局方向，默认为横向布局

在xml中设置：

<PageSlider
    ...
    ohos:orientation="vertical"/>
1
2
3

在代码中设置：

pageSlider.setOrientation(Component.VERTICAL);
1

设置布局方向为纵向布局

3、设置保留当前页面两侧的页面数

在xml中设置：

<PageSlider
    ...
    ohos:page_cache_size="2"/>
1
2
3

在代码中设置：

pageSlider.setPageCacheSize(2);
1

4、设置当前展示页面

pageSlider.setCurrentPage(2);
1

示例代码：

		// 1.初始化PageSlider
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData()));
        // 设置当前展示页面，从0开始
        pageSlider.setCurrentPage(2);// Page C
    }
1
2
3
4
5
6
7

打开之后，默认展示第3个Page：

平滑滚动到指定页面

pageSlider.setCurrentPage(2,true); // Page C
1

平滑滚动到页面C效果：模拟器太卡了，看不出平滑滚动的效果，这里用官方文档的图片了。

5、设置是否启用页面滑动

ageSlider.setSlidingPossible(false);
1

6、设置回弹效果

pageSlider.setReboundEffect(true);
1

回弹效果：图片来自官方文档。

7、设置页面切换时间，单位：ms

pageSlider.setPageSwitchTime(2000);
1

四、组件PageSliderIndicator

PageSliderIndicator，需配合PageSlider使用，指示在PageSlider中展示哪个界面。

1、我们在刚刚的ability_main.xml里继续添加PageSliderIndicator控件。

<?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="300vp"
        ohos:width="300vp"
        ohos:background_element="#33aa0000"
        ohos:layout_alignment="horizontal_center"/>

<!--    ohos:orientation="vertical" ， 滑动方向，默认水平-->
<!--    ohos:page_cache_size="2" , 设置保留当前页面两侧的页面数-->


    <PageSliderIndicator
        ohos:id="$+id:indicator"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="8vp"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="16vp"
        ohos:background_element="#55FFC0CB"/>
</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2、在MainAbilitySlice.java的初始化PageSlider的方法initPageSlider()中，接着创建PageSliderIndicator对象，并设置到PageSlider对象上。

// 1.初始化PageSlider
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData()));
        // 设置回弹效果
        pageSlider.setReboundEffect(true);

        // 设置页面切换时间，单位：ms
        pageSlider.setPageSwitchTime(2000);
        // 设置当前展示页面，从0开始
        // pageSlider.setCurrentPage(2); // Page C
        // 平滑滚动到指定页面
        pageSlider.setCurrentPage(2,true); // Page C

				// 创建PageSliderIndicator
        PageSliderIndicator indicator = (PageSliderIndicator)findComponentById(ResourceTable.Id_indicator);
        ShapeElement normalElement = new ShapeElement();
        normalElement.setRgbColor(RgbColor.fromArgbInt(0xADD8E6));
        normalElement.setAlpha(168);
        normalElement.setShape(ShapeElement.OVAL);
        normalElement.setBounds(0, 0, 32, 32);
        ShapeElement selectedElement = new ShapeElement();
        selectedElement.setRgbColor(RgbColor.fromArgbInt(0x00BFFF));
        selectedElement.setAlpha(168);
        selectedElement.setShape(ShapeElement.OVAL);
        selectedElement.setBounds(0, 0, 48, 48);
        indicator.setItemElement(normalElement, selectedElement);
        indicator.setItemOffset(60);
      	// 设置
        indicator.setPageSlider(pageSlider);

    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

搭配PageSlider效果：

五、PageSliderIndicator常用方法

1、关联PageSlider

indicator.setPageSlider(pageSlider);
1

2、响应页面更改事件

    indicator.addOnSelectionChangedListener(new PageSlider.PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {
            }
            @Override
            public void onPageSlideStateChanged(int i) {
            }
            @Override
            public void onPageChosen(int i) {
            }
        });
1
2
3
4
5
6
7
8
9
10
11

3、设置所选指导航点的位置

indicator.setSelected(2);
1

此方法也会改变关联的PageSlider对象中的页面。

4、设置导航点的背景

除了上述使用Java创建背景外，也可以使用XML方式创建。

在graphic文件夹下创建selected_page_bg_element.xml。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="16vp"/>
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="64vp"
        ohos:bottom="32vp"/>
    <solid
        ohos:color="#00BFFF"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11
12
13

在graphic文件夹下创建unselected_page_bg_element.xml。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="32vp"
        ohos:bottom="32vp"/>
    <solid
        ohos:color="#ADD8E6"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

在Java代码中调用，设置导航点背景。

    ShapeElement normalElement = new ShapeElement(this, ResourceTable.Graphic_unselected_page_bg_element);
        ShapeElement selectedElement = new ShapeElement(this, ResourceTable.Graphic_selected_page_bg_element);
        indicator.setItemElement(normalElement, selectedElement);
1
2
3

导航点背景设置效果：

5、设置导航点之间的偏移量

				// 置导航点之间的偏移量
        indicator.setItemOffset(100);
				// 设置
        indicator.setPageSlider(pageSlider);
1
2
3
4

效果：

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：https://www.chengxuka.com