乐趣区

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

作者：

jiezi

在

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章