鸿蒙 PageSlider 滑动组件基础用法

前言 ：

各位同学大家好 有断时间没有给大家更新文章了具体多久我也记得了。最近还在学习鸿蒙开发， 学到了PageSlider 滑动组件类似安卓里面 viewpager 可以实现 屏幕左右滑动的效果 ，那么废话不多说我们正式开始

准备工作

1 安装鸿蒙开发环境 大家可以看我之前的文章
华为鸿蒙系统开发初体验 ：[https://www.jianshu.com/p/f94c847c7fdc]

效果图

具体实现

MainAbility 布局文件

<?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:background_element="blue"    ohos:orientation="vertical">    <PageSlider        ohos:id="$+id:pager_slider"        ohos:height="0vp"        ohos:width="match_parent"        ohos:background_element="#ffffff"        ohos:weight="1"/>    <RadioContainer        ohos:id="$+id:radio_container"        ohos:height="60vp"        ohos:width="match_parent"        ohos:alignment="horizontal_center"        ohos:orientation="horizontal">        <RadioButton            ohos:height="match_parent"            ohos:width="match_content"            ohos:text_size="20fp"            />        <RadioButton            ohos:height="match_parent"            ohos:width="match_content"            ohos:text_size="20fp"            />    </RadioContainer></DirectionalLayout>

布局这边是底部写了一个RadioContainer 来处理底部的小圆圈显示影藏效果 上面我们写了一个 PageSlider 组件

具体逻辑代码

• ####初始化控件

 radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);        ((RadioButton) radioContainer.getComponentAt(0)).setChecked(true);        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pager_slider);        LayoutScatter layoutScatter = LayoutScatter.getInstance(getContext());        DependentLayout dependentLayout1 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider1, null, false);        DependentLayout dependentLayout2 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider2, null, false);

• ####将view装入数组

  pageviews = new ArrayList<Component>();  pageviews.add(dependentLayout1); pageviews.add(dependentLayout2);

• 绑定适配器

pageSlider.setProvider(new PageSliderProvider() {            @Override            //获取当前窗体界面数            public int getCount() {                HiLog.info(LOG_LABEL, "--------getCount");                return pageviews.size();            }            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的pageviews中            @Override            public Object createPageInContainer(ComponentContainer componentContainer, int i) {                componentContainer.addComponent(pageviews.get(i));                HiLog.info(LOG_LABEL, "--------createPageInContainer");                return pageviews.get(i);            }            //是从ViewGroup中移出当前View            @Override            public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {                ((PageSlider) componentContainer).removeComponent(pageviews.get(i));                HiLog.info(LOG_LABEL, "--------destroyPageFromContainer");            }            //断是否由对象生成界面            @Override            public boolean isPageMatchToObject(Component component, Object o) {                HiLog.info(LOG_LABEL, "--------isPageMatchToObject");                return component == o;            }        });

• pageSlider滑动监听事件

   pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {            @Override            public void onPageSliding(int i, float v, int i1) {                //v:指示页面的位置偏移量。值的范围是(0,1]。                // 0表示正在显示目标页面。                //i1:指示显示页面的位置偏移像素数。            }            @Override            public void onPageSlideStateChanged(int i) {                HiLog.info(LOG_LABEL, "--------onPageSlideStateChanged");            }            @Override            public void onPageChosen(int i) {                ((RadioButton) radioContainer.getComponentAt(i)).setChecked(true);            }        });

• 完整代码

package com.example.pagesliderdemo.slice;import com.example.pagesliderdemo.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.*;import ohos.hiviewdfx.HiLog;import ohos.hiviewdfx.HiLogLabel;import java.util.ArrayList;import java.util.List;public class MainAbilitySlice extends AbilitySlice {    static final HiLogLabel LOG_LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00002, "MainAbilitySlice");    private RadioContainer radioContainer;    private PageSlider pageSlider;    private List<Component> pageviews;    @Override    public void onStart(Intent intent) {        HiLog.info(LOG_LABEL, "--------onStart2");        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_main);        radioContainer = (RadioContainer) findComponentById(ResourceTable.Id_radio_container);        ((RadioButton) radioContainer.getComponentAt(0)).setChecked(true);        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pager_slider);        LayoutScatter layoutScatter = LayoutScatter.getInstance(getContext());        DependentLayout dependentLayout1 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider1, null, false);        DependentLayout dependentLayout2 = (DependentLayout) layoutScatter.parse(ResourceTable.Layout_pageSlider2, null, false);        //将view装入数组        pageviews = new ArrayList<Component>();        pageviews.add(dependentLayout1);        pageviews.add(dependentLayout2);        //绑定适配器        pageSlider.setProvider(new PageSliderProvider() {            @Override            //获取当前窗体界面数            public int getCount() {                HiLog.info(LOG_LABEL, "--------getCount");                return pageviews.size();            }            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的pageviews中            @Override            public Object createPageInContainer(ComponentContainer componentContainer, int i) {                componentContainer.addComponent(pageviews.get(i));                HiLog.info(LOG_LABEL, "--------createPageInContainer");                return pageviews.get(i);            }            //是从ViewGroup中移出当前View            @Override            public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {                ((PageSlider) componentContainer).removeComponent(pageviews.get(i));                HiLog.info(LOG_LABEL, "--------destroyPageFromContainer");            }            //断是否由对象生成界面            @Override            public boolean isPageMatchToObject(Component component, Object o) {                HiLog.info(LOG_LABEL, "--------isPageMatchToObject");                return component == o;            }        });        pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {            @Override            public void onPageSliding(int i, float v, int i1) {                //v:指示页面的位置偏移量。值的范围是(0,1]。                // 0表示正在显示目标页面。                //i1:指示显示页面的位置偏移像素数。            }            @Override            public void onPageSlideStateChanged(int i) {                HiLog.info(LOG_LABEL, "--------onPageSlideStateChanged");            }            @Override            public void onPageChosen(int i) {                ((RadioButton) radioContainer.getComponentAt(i)).setChecked(true);            }        });        radioContainer.setMarkChangedListener((radioContainer, i) -> pageSlider.setCurrentPage(i));    }}

###另外附上 Layout_pageSlider1 和 Layout_pageSlider2 的布局文件

• pageSlider1.xml

<?xml version="1.0" encoding="utf-8"?><DependentLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent">    <Text        ohos:height="match_content"        ohos:width="match_content"        ohos:center_in_parent="true"        ohos:text="PageSlider1"        ohos:text_size="25fp"/></DependentLayout>

• pageSlider2.xml

<?xml version="1.0" encoding="utf-8"?><DependentLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent">    <Text        ohos:height="match_content"        ohos:width="match_content"        ohos:center_in_parent="true"        ohos:text="PageSlider2"        ohos:text_size="25fp"/></DependentLayout>

到此鸿蒙的 PageSlider 滑动组件基本算是讲完了。

最后总结：

鸿蒙里面的 PageSlider 组件对标的是安卓的里面viewpager 做过安卓开发同学应该都比较熟悉 也容易理解 PageSlider 的各种用法包添加view 滑动监听 绑定适配器等等。PageSlider 主要使用来处理横向滑动屏幕的一个效果 可以实现轮播图滑动那种效果。关于轮播图篇幅有限就不展开讲了· 后面再更新 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦