鸿蒙开发PageSlider实现页面滑动(防ViewPage)

首先：

给大家一个鸿蒙api文档入口
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability- overview- 0000000000029852

前言：

在开发鸿蒙过程中我们会需要实现tab滑动来实现首页,另或者我们需要视频进行上下左右滑动都会需要PageSlider这个控件

开始：

在布局里面添加

<?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:orientation="vertical"
    ohos:scrollbar_background_color="$color:black"
    >

    <PageSlider
        ohos:id="$+id:hotpage"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical"
        ohos:top_margin="10vp"
        />

</DirectionalLayout>

接下来创建PageSlider适配器

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

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        Component component = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_layout_video_page_twos, null, false);
        componentContainer.addComponent(component, ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
        return component;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((Component) o);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return component == o;
    }

    @Override
    public void onUpdateFinished(ComponentContainer componentContainer) {
        super.onUpdateFinished(componentContainer);
    }
    //数据实体类
    public static class DataItem{
        String mText;
        public DataItem(String txt) {
            mText = txt;
        }
    }

}

PageSlider适配器的布局

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    >
<Text
    ohos:id="$+id:comment_text"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:text_size="15vp"
    ohos:layout_alignment="center"
 />

</DependentLayout>

然后在MainAbility里面给是配器设置值

public class MainAbility extends BasePageAbility {

    private VideoRecommendTask mDownloadTask;

    private VideoInfoDownloadTask mDownloadTask1;
    private PageSlider page_slider;
    private int index=0;
    private VideoHostListTask videoHostListTask;
    private VideoFollowTask videoRecommendTask;
    private VideoLikeTask c;

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_ability_routingt_test);
        initPageSlider();
    }
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page);
        pageSlider.setProvider(new TestPagerAdapter(getData(),this));
    }
    private ArrayList<TestPagerAdapter.DataItem> getData() {
        ArrayList<TestPagerAdapter.DataItem> dataItems = new ArrayList<>();
        dataItems.add(new TestPagerAdapter.DataItem("Page A"));
        dataItems.add(new TestPagerAdapter.DataItem("Page B"));
        dataItems.add(new TestPagerAdapter.DataItem("Page C"));
        dataItems.add(new TestPagerAdapter.DataItem("Page D"));
        return dataItems;
    }

}

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:orientation="vertical">

    <PageSlider
        ohos:id="$+id:page"
        ohos:height="match_parent"
        ohos:width="match_parent"
        />



</DirectionalLayout>

效果就是这样的暂时用这个效果图吧时间紧

这样简单的 PageSlider滑动就已经时间了

扩展：

但是有一种情况是在页面很多的情况下我们是否要优化(布局复用)答案是肯定的上代码
借鉴ListView item复用方法

public class VideoPagerProvider extends PageSliderProvider {
    /**
     * View缓存池，从ViewPager中移除的item将会存到这里面，用来复用
     */
    private List<Component> mViewPool = new ArrayList<>();

    public HashMap<Integer, PageVideoViewBlack> mPlayViewMap = new HashMap<>();
    private Context context;

    /**
     * 数据源
     */
    private List<Status> mVideoBeans;

    public VideoPagerProvider(List<Status> videoBeans, Context Context) {
        this.mVideoBeans = videoBeans;
        this.context = Context;
    }

    public void addList(List<Status> list) {
        this.mVideoBeans.addAll(list);
        notifyDataChanged();
    }

    @Override
    public int getCount() {
        return mVideoBeans == null || mVideoBeans.isEmpty() ? 0 : mVideoBeans.size();
    }


    @Override
    public Object createPageInContainer(ComponentContainer container, int position) {
        Component view = null;
        if (mViewPool.size() > 0) {//取第一个进行复用
            view = mViewPool.remove(0);
        }
        ViewHolderVideo viewHolder;
        if (view == null) {
            view = LayoutScatter.getInstance((Context) context).parse(ResourceTable.Layout_layout_video_Recommend, container, false);
            viewHolder = new ViewHolderVideo(view);
        } else {
            viewHolder = (ViewHolderVideo) view.getTag();
        }
        container.addComponent(view, ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT);
        return view;

    }
    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int position, Object o) {
        Component itemView = (Component) o;
        componentContainer.removeComponent(itemView);
        mViewPool.add(itemView);
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return component == o;
    }

    @Override
    public void onUpdateFinished(ComponentContainer componentContainer) {
        super.onUpdateFinished(componentContainer);
    }

    public static class ViewHolderVideo {

        ViewHolderVideo(Component itemView) {
            itemView.setTag(this);
        }
    }
    
}

解析
PageSlider没有复用机制但是为了性能考虑进行了复用创建ViewHolder为控件创建缓存Component集合用来存储view复用原理在创建view时将view放到ViewHolder里面在销毁时将view放到Component集合然后再里面取view页面
首先需要了解PageSlider的Adapter各个方法的回调机制。
这里主要看两个方法：instantiateItem()和 destroyItem()。
instantiateItem()方法，是在滑动到一个新的ViewItem的时候被调用的，而destroyItem()是在当用户滑到第3个ViewItem的时候被调用，在这个时候会先调用这个方法来回收第一个ViewItem，然后在调用instantiateItem()方法来实例化第3个ViewItem。利用上面所说的机制，就可以在destroyItem()的时候将要被remove掉的view回收起来，然后在instantiateItme()的时候重复利用这个view。这样，就只会有3个ViewHolder实例存在。即当前显示的，还有上一个Item和下一个Item。

PageSlider存在的bug:

  存在的问题因为业务需要在分页加载的时候 notifyDataChanged();列表会返回到顶部index返回到0

   public void addList(List<Status> list) {
        this.mVideoBeans.addAll(list);
        notifyDataChanged();
    }

我的解决方法是 pageSlider.setCurrentPage(i, false);
在分页的时候将页面选择到当前要分页的页面//false是因为将翻页的效果屏蔽掉就可以了