关于harmonyos:46HarmonyOS鸿蒙开发组件PageSlider和PageSliderIndicator

37次阅读

共计 9725 个字符，预计需要花费 25 分钟才能阅读完成。

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"/>

成果：

<img src=”https://img.chengxuka.com/WX20210616-114314@2x.png/mark” alt=”WX20210616-114314@2x” style=”zoom:50%;” />

2、每个页面可能须要出现不同的数据，因而须要适配不同的数据结构，须要应用 PageSliderProvider。

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

新建一个 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;}
    }
}

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

PageSlider 的应用成果：

<img src=”https://img.chengxuka.com/pageslideryunxing1.gif” alt=”pageslideryunxing1″ style=”zoom:50%;” />

三、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) 设置以后展现界面，并确定是否须要平滑滚动。
setSlidingPossible(boolean enable) 是否启用页面滑动。
setReboundEffect(boolean enabled) 是否启用回弹成果。
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent)setReboundEffectParams(ReboundEffectParams reboundEffectParams) 配置回弹成果参数。
setPageSwitchTime(int durationMs) 设置页面切换工夫。

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

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

在 xml 中设置：

<PageSlider
    ...
    ohos:orientation="vertical"/>

在代码中设置：

pageSlider.setOrientation(Component.VERTICAL);

设置布局方向为纵向布局

<img src=”https://img.chengxuka.com/pageslideryunxing2.gif” alt=”pageslideryunxing2″ style=”zoom:50%;” />

3、设置保留以后页面两侧的页面数

在 xml 中设置：

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

在代码中设置：

pageSlider.setPageCacheSize(2);

4、设置以后展现页面 

pageSlider.setCurrentPage(2);

示例代码：

        // 1. 初始化 PageSlider
    private void initPageSlider() {PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData()));
        // 设置以后展现页面，从 0 开始
        pageSlider.setCurrentPage(2);// Page C
    }

关上之后，默认展现第 3 个 Page：

<img src=”https://img.chengxuka.com/WX20210616-135723@2x.png/mark” alt=”WX20210616-135723@2x” style=”zoom:50%;” />

平滑滚动到指定页面 

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

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

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

ageSlider.setSlidingPossible(false);

6、设置回弹成果 

pageSlider.setReboundEffect(true);

回弹成果：图片来自官网文档。

7、设置页面切换工夫，单位：ms

pageSlider.setPageSwitchTime(2000);

四、组件 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>

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

    }

搭配 PageSlider 成果：

<img src=”https://img.chengxuka.com/pageslideryunxing3.gif” alt=”pageslideryunxing3″ style=”zoom:50%;” />

五、PageSliderIndicator 罕用办法

1、关联 PageSlider

indicator.setPageSlider(pageSlider);

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

3、设置所选领导航点的地位 

indicator.setSelected(2);

此办法也会扭转关联的 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>

在 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>

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

导航点背景设置成果：

<img src=”https://img.chengxuka.com/pageslideryunxing4.gif” alt=”pageslideryunxing4″ style=”zoom:50%;” />

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

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

成果：

<img src=”https://img.chengxuka.com/WX20210616-143633@2x.png/mark” alt=”WX20210616-143633@2x” style=”zoom:50%;” />

更多内容：

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

2、公众号：HarmonyBus

3、技术交换 QQ 群：714518656

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

正文完
harmonyos
发表至： harmonyos
2021-07-23
 0
关于harmonyos:直播回顾Hello-HarmonyOS系列应用篇完美收官
关于harmonyos:打造智能全场景7大BUFF为您助力
关于harmonyos:32HarmonyOS鸿蒙开发组件Button
关于harmonyos:直播预告HarmonyOS极客松赋能直播第二期数据库与网络连接开发