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