学不动也要学! ViewPager2新特性

前言

前两天浏览Android开发者官网的时候,发现Google竟然曾经悄悄推出过一个新的控件:ViewPager2,纳尼???这一看名字就知道是ViewPager的升级版本,看了下推出这个控件的时间,早在2019年2月7号Google就已经发布了,之后再进行一波迭代更新,在2019年11月20号进行了正式的发布;可以关联下Google曾经在2018年推出的Jetpack,旨在帮助开发者轻松构建更稳定健壮及可维护的Android开发生态解决方案,就可想而知此次推出ViewPager2,算是Google往被寄予厚望的Jetpack全家桶中又增添一员猛将;
既然是升级版,相比ViewPager,它究竟有哪些新功能和特性呢?
让我们接着往下看。

android ViewPager2新特性

  • 基于RecyclewView实现。这意味着ViewPager2将继承RecyclewView的优点,同样完全支持RecyclerView的相关配置功能
  • 支持垂直方向滑动。只需要一个参数就可以改变滑动方向;
  • 支持关闭用户输入和模拟用户滑动。通过设置setUserInputEnabled()来设置是否禁用用户滑动行为;通过fakeDragBy(float offsetPx)模拟用户滑动页面;
  • 支持多个PageTransformer
  • 支持DiffUtil,通过添加数据集合实现局部数据刷新和Item动画。
  • 支持RTL布局

和ViewPager进行对比

ViewPager2相比ViewPager做了哪些改变呢,下面对不同点进行了罗列:

  • 采用registerOnPageChangeCallback() 代替addPageChangeListener()监听页面的变化
  • 因为ViewPager2.java这个类被申明为fianl,无法继承它进行二次改造,不过可以copy一份进行修改加工
  • 采用FragmentStateAdapter 替代FragmentStatePagerAdapter,采用 RecyclerView.Adapter 替代PagerAdapter;
  • offScreenPageLimit新参数 新体验

Android ViewPager2的使用

ViewPager2 位于 androidx 包下,也就是它不像 ViewPager 一样被内置在系统源码中。因此,使用 ViewPager2 需要额外的添加依赖库。

另外,android support 中不包含 ViewPager2,也就是要使用 ViewPager2 必须迁移到 androidx 才可以。

① 添加依赖

目前ViewPager2的最新稳定版本是1.0.0。

    dependencies {
       implementation "androidx.viewpager2:viewpager2:1.0.0"
    }

② 在XML文件中申明

    

③自定义Adapter

ViewPager2 是用 RecyclerView来实现的,因此它的 Adapter 其实就是 RecyclerView 的 Adapter。

       class MyAdapter extends RecyclerView.Adapter {
        private List mList;

        public PagerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page, parent, false);
            return new PagerViewHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull PagerViewHolder holder, int position) {
            holder.bindData(position);
        }

        @Override
        public int getItemCount() {
            return mList.size();
        }

        public void setList(List list){
            this.mList = list;
        }

        class PagerViewHolder extends RecyclerView.ViewHolder {
            private TextView mTextView = itemView.findViewById(R.id.tv_text);
            private String[] colors = new String[]{"#CCFF99", "#41F1E5", "#8D41F1", "#FF99CC"};

            public PagerViewHolder(@NonNull View itemView) {
                super(itemView);
            }

            private void bindData(int index) {
                mTextView.setText(index);
                mTextView.setBackgroundColor(Color.parseColor(colors[index]));
            }
        }
    }

item_page布局文件:

    

      
    

④ 绑定ViewPager和Adpater

        ViewPager2 viewPager2 = findViewById(R.id.view_pager);
        MyAdapter myAdapter = new MyAdapter();
        myAdapter.setList(data)
        viewPager2.setAdapter(myAdapter);

通过上述接入,就可以完成一个ViewPager滑动页简单的效果,如下;

学不动也要学! ViewPager2新特性_第1张图片

⑤ 设置竖向滑动

只需要一行代码就能设置ViewPager2进行竖向方向的滑动:

    viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL); 

而这一点,如果是换做之前的ViewPager是比较难达到的效果,可以来看下效果:

学不动也要学! ViewPager2新特性_第2张图片

⑥ 页面滑动监听事件

上面说到viewPager2监听页面滑动只需要重写我们需要的方法即可

       viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
            }
        });

⑦ 禁止用户滑动和模拟用户滑动

涉及 API:setUserInputEnabled() 与 fakeDragBy()。

我们知道,在使用 ViewPager 的时候想要禁止用户滑动需要重写 ViewPager 的 onInterceptTouchEvent()。而 ViewPager2 被声明为了 final,我们无法再去继承 ViewPager2。

那么我们应该怎么禁止 ViewPager2 的滑动呢?其实在 ViewPager2 中已经为我们提供了这个功能,只需要通过 setUserInputEnabled() 即可实现。

    viewPager2.setUserInputEnabled(false);

同时 ViewPager2 新增了一个 fakeDragBy() 的方法。通过这个方法可以来模拟拖拽。在使用 fakeDragBy() 前需要先 beginFakeDrag() 方法来开启模拟拖拽。

fakeDragBy() 会返回一个 boolean 值:

true 表示有 fake drag 正在执行;
false 表示当前没有 fake drag 在执行。
我们通过代码来尝试下:

    private void fakeDragBy(ViewPager2 viewPager2) {
        viewPager2.beginFakeDrag();
        if (viewPager2.fakeDragBy(100f)) {
            viewPager2.endFakeDrag();
        }
    }

需要注意到是 fakeDragBy() 接受一个 float 的参数,当参数值为正数时表示向前一个页面滑动,当值为负数时表示向下一个页面滑动。

下面来看下效果图:

学不动也要学! ViewPager2新特性_第3张图片

演示图中禁止了用户输入,通过按钮点击可以模拟用户滑动。

⑧ offScreenPageLimit()

在viewpager中也可以设置预加载页面参数,但是就算我们去设置了0,ViewPager的内部还是会强制改成,这也是被广大开发者诟病的地方;

而在ViewPager2中对这点进行了优化,可以通过源码发现:

    # VewPager2
    
    private @OffscreenPageLimit int mOffscreenPageLimit = OFFSCREEN_PAGE_LIMIT_DEFAULT;

    /**
     * Value to indicate that the default caching mechanism of RecyclerView should be used instead
     * of explicitly prefetch and retain pages to either side of the current page.
     * @see #setOffscreenPageLimit(int)
     */
    public static final int OFFSCREEN_PAGE_LIMIT_DEFAULT = -1;

     /** @hide */
    @SuppressWarnings("WeakerAccess")
    @RestrictTo(LIBRARY_GROUP_PREFIX)
    @Retention(SOURCE)
    @IntDef({OFFSCREEN_PAGE_LIMIT_DEFAULT})
    @IntRange(from = 1)
    public @interface OffscreenPageLimit {
    }

可以看到,将默认预加载页面数量设置为默认值-1,这里可以理解为不进行页面预加载操作;而且如果要设置预加载页面数量,可以通过设置setOffscreenPageLimit值来进行赋值,注意这里将其注解标注为大于等于1;

    public void setOffscreenPageLimit(@OffscreenPageLimit int limit) {
      if (limit < 1 && limit != OFFSCREEN_PAGE_LIMIT_DEFAULT) {
        throw new IllegalArgumentException(
                "Offscreen page limit must be OFFSCREEN_PAGE_LIMIT_DEFAULT or a number > 0");
      }
      mOffscreenPageLimit = limit;
      // Trigger layout so prefetch happens through getExtraLayoutSize()
      mRecyclerView.requestLayout();
    }

下面就让我们看下设置不同的mOffscreenPageLimit数量会有啥不同的效果:

首先我们在 ViewPager 中添加多个 Fragment,并且 setOffscreenPageLimit() 使用默认值,然后再 Fragment 声明周期中打印出日志,代码不再贴出,直接看日志打印的内容:

学不动也要学! ViewPager2新特性_第4张图片

可以看到只有第一个fragment初始化了,那么当我们滑动到下个fragment,看下日志:

学不动也要学! ViewPager2新特性_第5张图片

看到只有当滑动到第二个fragment时候,页面才开始加载;因此当采用默认值-1时,滑动过程中不会发生预加载

接下来我们将 offscreenPageLimit 值改为 1,再来看下输出日志:

学不动也要学! ViewPager2新特性_第6张图片

此时可以看到 offscreenPageLimit 设置为 1 后,会预加载进来一个页面,和 ViewPager 几乎是一样的效果。

总之,ViewPager2 对于 ViewPager 的预加载机制做了优化,使得体验上变得更好。

看到这里,很多人都会觉得,就这就这?ViewPager2难道只多了这么点功能?别急,下面这个新动效才是亮点;

三 PageTransformer

ViewPager2 的 Transformer 功能相比于 ViewPager 有了很大的扩展。

ViewPager2 不仅可以通过 PageTransformer 用来设置页面动画,还可以同时添加多个 PageTransformer。接下来我们就来看看 ViewPager2 的 PageTransformer 吧!

首先介绍一下 CompositePageTransformer

从名字上可以看出,它是一个组合了的PageTransformer,其实CompositePageTransformer实现了 PageTransformer 的接口,内部维护了一个 PageTransformer的List集合;

那么看看如何使用这个CompositePageTransformer

   CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
   compositePageTransformer.addTransformer(new ScaleInTransformer());
   compositePageTransformer.addTransformer(new MarginPageTransformer(10));
   viewPager2.setPageTransformer(compositePageTransformer);

上面代码中,我们给CompositePageTransformer设置了一个自定义页面缩放的ScaleInTransformer和一个页边距的MarginPageTransformer,可以看下效果:

学不动也要学! ViewPager2新特性_第7张图片

自定义页面缩放的ScaleInTransformer代码如下:

    class ScaleInTransformer implements ViewPager2.PageTransformer {
        static final float DEFAULT_MIN_SCALE = 0.85f;
        static final float DEFAULT_CENTER = 0.5f;

        @Override
        public void transformPage(@NonNull View view, float position) {
            view.setElevation(-abs(position));
            int pageWidth = view.getWidth();
            int pageHeight = view.getHeight();

            view.setPivotY((pageHeight / 2));
            view.setPivotX((pageWidth / 2));
            if (position < -1) {
                view.setScaleX(DEFAULT_MIN_SCALE);
                view.setScaleY(DEFAULT_MIN_SCALE);
                view.setPivotX(pageWidth);
            } else if (position <= 1) {
                if (position < 0) {
                    float scaleFactor = (1 + position) * (1 - DEFAULT_MIN_SCALE) + DEFAULT_MIN_SCALE;
                    view.setScaleX(scaleFactor);
                    view.setScaleY(scaleFactor);
                    view.setPivotX(pageWidth * (DEFAULT_CENTER + DEFAULT_CENTER * -position));
                } else {
                    float scaleFactor = (1 - position) * (1 - DEFAULT_MIN_SCALE) + DEFAULT_MIN_SCALE;
                    view.setScaleX(scaleFactor);
                    view.setScaleY(scaleFactor);
                    view.setPivotX(pageWidth * ((1 - position) * DEFAULT_CENTER));
                }
            } else {
                view.setPivotX(0f);
                view.setScaleX(DEFAULT_MIN_SCALE);
                view.setScaleY(DEFAULT_MIN_SCALE);
            }
        }
    }

viewpager2一屏多页的实现

查看google官方文档,可以看到官方实现一屏多页给出的代码是通过给recyclerview设置padding来实现的,代码如下:

        RecyclerView recyclerView = (RecyclerView) viewPager2.getChildAt(0);
        int padding = 20;
        recyclerView.setPadding(padding, 0, padding, 0);
        recyclerView.setClipToPadding(false);

        CompositePageTransformer compositePageTransformer = new CompositePageTransformer();
        compositePageTransformer.addTransformer(new ScaleInTransformer());
        compositePageTransformer.addTransformer(new MarginPageTransformer(10));
        viewPager2.setPageTransformer(compositePageTransformer);

最后来看下效果:

四、Fragment中如何使用ViewPager2

上文讲述到在 ViewPager2 中采用 FragmentStateAdapter 代替了原先的 FragmentStatePagerAdapter,那么接下来看下如何搭配Fragment去使用ViewPager2

4.1 xml布局文件中添加ViewPager2

    

4.2 实现 FragmentStateAdapter

要使用FragmentStateAdapter最好的方式就是去自定义一个自己的Adapter,让我们来看下代码:

    class CustomAdapterFragmentPager extends FragmentStateAdapter {

        final int PAGE_HOME = 0;
        final int PAGE_FIND = 1;
        final int PAGE_INDICATOR = 2;
        final int PAGE_OTHERS = 3;

        public CustomAdapterFragmentPager(@NonNull FragmentActivity fragmentActivity) {
            super(fragmentActivity);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            switch (position) {
                case PAGE_HOME:
                    return HomeFragment.getInstance();
                case PAGE_FIND:
                    return PageFragment.getInstance();
                case PAGE_INDICATOR:
                    return IndicatorFragment.getInstance();
                case PAGE_OTHERS:
                    return OthersFragment.getInstance();
                default:
                    return EmptyFragment.getInstance();
            }
        }

        @Override
        public int getItemCount() {
            return 4;
        }
    }

上述代码覆写了createFragment和getItemCount方法,可以看到其实和FragmentStatePagerAdapter做的事情差不多;

4.3 ViewPager2设置FragmentStateAdapter

初始化完ViewPager2和FragmentStateAdapter之后,最后一步就是给ViewPager设置上adapter,代码如下:

        viewPager2.setAdapter(new CustomAdapterFragmentPager(this));
        viewPager2.setOffscreenPageLimit(3);
        viewPager2.setUserInputEnabled(false);

五、TabLayout和ViewPager2

TabLayout在平时开发工作中出现的频率也不算低了,经常会用来和ViewPager一起搭配使用,那么在TabLayout中如何搭配使用ViewPager2呢?

和原有的ViewPager不同,不能直接通过setViewPager来进行vp的设置;在ViewPager2中需要用到一个控件 TabLayoutMediator,这个类是在 material-1.2.0 中新增的一个类,目前 material 包的最新版本是 1.2.0-alpha03,添加依赖如下:

    implementation 'com.google.android.material:material:1.2.0-alpha03'

需要传入三个参数去构造 TabLayoutMediator,第一个参数为 TabLayout;第二个参数为 ViewPager2;第三个参数是 TabConfigurationStrategy,这是一个接口,里面需要实现一个方法, onConfigureTab(@NonNull TabLayout.Tab tab, int position),第一个参数是当前的tablayout,第二个是当前的位置:

    public interface TabConfigurationStrategy {
      /**
       * Called to configure the tab for the page at the specified position. Typically calls {@link
       * TabLayout.Tab#setText(CharSequence)}, but any form of styling can be applied.
       *
       * @param tab The Tab which should be configured to represent the title of the item at the given
       *     position in the data set.
       * @param position The position of the item within the adapter's data set.
       */
      void onConfigureTab(@NonNull TabLayout.Tab tab, int position);
    }

通过构造TabLayoutMediator,我们就可以将tablayout和viewpager2搭配起来使用了:

    new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
         @Override
         public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText(titles[position]);
        }
    });

最后来看下效果图:

学不动也要学! ViewPager2新特性_第8张图片

六、总结

在上述文章带领大家了解了一下ViewPager2的新特性,以及和ViewPager在开发使用中的区别;
可以看到不管是从API、性能还是动效上,ViewPager2都是远远领先于ViewPager的,所以我认为未来有很大概率将会取代原来的ViewPager的;

看完这些,是时候将ViewPager2接入到你的项目里了!

参考文章:
https://www.jianshu.com/p/bd7...

❤️ 谢谢支持

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

欢迎关注公众号 程序员巴士,一辆有趣、有范儿、有温度的程序员巴士,涉猎大厂面经、程序员生活、实战教程、技术前沿等内容,关注我,交个朋友。

你可能感兴趣的