还在用 ViewPager？是时候替换成 ViewPager2 了！

我赌一包辣条 | 作者

承香墨影（ID:cxmyDev）| 校对

https://zhpanvip.gitee.io/2019/12/14/24.Know about ViewPager2 | 原文

Hi，大家好，这里是承香墨影！

ViewPager2 已经发布了，不知道你是否已经蠢蠢欲动着手用 ViewPager2 去改造你项目的 ViewPager 呢？

一、ViewPager2的新特性

ViewPager2 从名字就可以看出来它是 ViewPager 的升级版，既然是升级版那么它相比 ViewPager 有哪些新功能和哪些 API 变化呢？

我们接着往下看。

1.1 ViewPager2新特性

• 基于 RecyclerView 实现。这意味着 RecyclerView 的优点，将会被 ViewPager2 所继承；

• 支持竖直滑动。只需要一个参数就可以改变滑动方向；

• 支持关闭用户输入。通过 setUserInputEnabled() 来设置是否禁止用户滑动页面；

• 支持通过编程方式滚动。通过 fakeDragBy(offsetPx) 代码模拟用户滑动页面；

• CompositePageTransformer 支持同时添加多个 PageTransformer；

• 支持 DiffUtil ，可以添加数据集合改变的 item 动画；

• 支持 RTL (right-to-left) 布局。我觉得这个功能对国内开发者来说可能用处不大；

1.2 对比 ViewPager

ViewPager2 相比 ViewPager 做了哪些改变呢？研究了一番之后我大概列出以下几点：

• ViewPager2 与 ViewPager 同是继承自 ViewGrop，但是 ViewPager2 被声明成了 final。意味着，我们不可能再像 ViewPager 一样，通过继承来修改 ViewPager2 的代码；

• FragmentStatePagerAdapter 被 FragmentStateAdapter 替代；

• PagerAdapter 被 RecyclerView.Adapter 替代；

• addPageChangeListener() 被 registerOnPageChangeCallback() 替代。我们知道 ViewPager 的 addPageChangeListener() 接收的是一个 OnPageChangeListener 的接口，而这个接口中有三个方法，当想要监听页面变化时，需要重写这三个方法。而 ViewPager2 的 registerOnPageChangeCallback() 方法接收的是一个叫 OnPageChangeCallback 的抽象类，因此我们可以选择性的重写需要的方法即可；

• 移除了 setPargeMargin() 方法；

• 关于 offScreenPageLimit() 离屏加载新特性；

以上所罗列的新特性和 API 可能并不完整，如有疏漏可以留言补充。

二、开启ViewPager2之旅

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

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

2.1 添加依赖

目前ViewPager2的最新版本是1.0.0。

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

2.2 ViewPager2 布局文件

在 Layout 中声明 ViewPage2。

<androidx.viewpager2.widget.ViewPager2
   android:id="@+id/view_pager"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintLeft_toLeftOf="parent"
   app:layout_constraintRight_toRightOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

2.3 声明 Adapter

因为 ViewPager2 内部封装的是 RecyclerView，因此它的 Adapter 也就是 RecyclerView 的 Adapter。

class MyAdapter : RecyclerView.Adapter<MyAdapter.PagerViewHolder>() {
  private var mList: List<Int> = ArrayList()
  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerViewHolder {
    val itemView = LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
    return PagerViewHolder(itemView)
  }

  override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
    holder.bindData(mList[position])
  }

  fun setList(list: List<Int>) {
    mList = list
  }

  override fun getItemCount(): Int {
    return mList.size
  }

  class PagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    private val mTextView: TextView = itemView.findViewById(R.id.tv_text)
    private var colors = arrayOf("#CCFF99","#41F1E5","#8D41F1","#FF99CC")

    fun bindData(i: Int) {
      mTextView.text = i.toString()
      mTextView.setBackgroundColor(Color.parseColor(colors[i]))
    }
  }
}

item_page 中代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center">

  <TextView
    android:id="@+id/tv_text"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="280dp"
    android:gravity="center"
    android:textColor="#ffffff"
    android:textSize="22sp" />
</LinearLayout>

2.4 绑定 ViewPager 与 Adapter

在Activity中为ViewPager设置Adapter。

val viewPager2 = findViewById<ViewPager2>(R.id.view_pager)
val myAdapter = MyAdapter()
myAdapter.setList(data)
viewPager2.adapter = myAdapter

很简单就完成了一个 ViewPager 的功能，来看下效果怎么样：

2.5 ViewPager2 竖直滑动

接下来我们通过一行代码为其设置竖直滑动。

viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL

竖直滑动用 ViewPager 是很难实现的，而通过 ViewPager2 只需要设置一个参数即可。来看下效果：

2.6 页面滑动事件监听

上文已经提到过了，我们为 ViewPager 设置页面滑动的监听事件，需要重写三个方法。

而为 ViewPager2 设置监听事件，只需要重写需要的方法即可，因为 ViewPager2 中 OnPageChangeCallback 是一个抽象类。

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
  override fun onPageSelected(position: Int) {
    super.onPageSelected(position)
    Toast.makeText(this@MainActivity, "page selected $position", Toast.LENGTH_SHORT).show()
  }
})

2.7 控制切换效果

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

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

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

viewPager2.isUserInputEnabled = false

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

fakeDragBy() 会返回一个 boolean 值：

• true 表示有 fake drag 正在执行；

• false 表示当前没有 fake drag 在执行。

我们通过代码来尝试下：

fun fakeDragBy(view: View) {
  viewPager2.beginFakeDrag()
  if (viewPager2.fakeDragBy(-310f))
    viewPager2.endFakeDrag()
}

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

下面来看下效果图：

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

2.8 offScreenPageLimit()

offScreenPageLimit() 在 ViewPager 中就已经存在，这个参数用来控制 ViewPager 左右两端预加载页面的个数。

为了保证 ViewPager 的流畅性，offScreenPageLimit() 被强制规定为大于 0 的数，即使我们将其设置为 0，ViewPager 内部也会将其改为 1。

因此 ViewPager 就被强制左右两边至少加载一个页面，这也是一直被广大开发者所诟病的一个问题。

而在 ViewPager2 中针对这一问题做了优化。我们点开 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 {
}

可以看到在 ViewPager2 中 offScreenPageLimit() 的默认值被设置为了 -1，而且 offScreenPageLimit() 这个成员变量被一个名为 @OffscreenPageLimit 的注解所修饰，而在这个注解，强制要求 int 的范围是大于等于 1 的。

什么？ViewPager2 的预加载页面，难道也必须大于等于 1？那这相比 ViewPager 有什么区别呢？

先别着急，其实最大的区别就在这个 OFFSCREEN_PAGE_LIMIT_DEFAULT 上，这个值被设置为 - 1，那么它代表什么意思呢？我们可以从 ViewPager2 源码的注释中找出一些端倪

/**
 * <p>Set the number of pages that should be retained to either side of the currently visible
 * page(s). Pages beyond this limit will be recreated from the adapter when needed. Set this to
 * {@link #OFFSCREEN_PAGE_LIMIT_DEFAULT} to use RecyclerView's caching strategy. The given value
 * must either be larger than 0, or {@code #OFFSCREEN_PAGE_LIMIT_DEFAULT}.</p>
 *
 * <p>Pages within {@code limit} pages away from the current page are created and added to the
 * view hierarchy, even though they are not visible on the screen. Pages outside this limit will
 * be removed from the view hierarchy, but the {@code ViewHolder}s will be recycled as usual by
 * {@link RecyclerView}.</p>
 *
 * <p>This is offered as an optimization. If you know in advance the number of pages you will
 * need to support or have lazy-loading mechanisms in place on your pages, tweaking this setting
 * can have benefits in perceived smoothness of paging animations and interaction. If you have a
 * small number of pages (3-4) that you can keep active all at once, less time will be spent in
 * layout for newly created view subtrees as the user pages back and forth.</p>
 *
 * <p>You should keep this limit low, especially if your pages have complex layouts. By default
 * it is set to {@code OFFSCREEN_PAGE_LIMIT_DEFAULT}.</p>
 *
 * @param limit How many pages will be kept offscreen on either side. Valid values are all
 *        values {@code >= 1} and {@link #OFFSCREEN_PAGE_LIMIT_DEFAULT}
 * @throws IllegalArgumentException If the given limit is invalid
 * @see #getOffscreenPageLimit()
 */
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();
}

从这段对 setOffscreenPageLimit(int) 方法的注释中，我们可以看到，当 setOffscreenPageLimit() 被设置为 OFFSCREEN_PAGE_LIMIT_DEFAULT 时候会使用 RecyclerView 的缓存机制。那么我们就来在 ViewPager2 中尝试下加载 Fragment 是一种怎样的效果吧。

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

从日志中可以看出来，初始化的只有第一个 Fragment。当我们滑动到第二个页面的时候，打印日志如下：

可以看到，第二个页面在滑动的时候才被初始化，由此我们可以看出在 ViewPager2 中默认的 offscreenPageLimit 是不会进行页面预加载的。

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

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

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

三、PageTransformer

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

ViewPager2 不仅可以通过 PageTransformer 用来设置页面动画，还可以用 PageTransformer 设置页面间距，以及同时添加多个 PageTransformer。接下来我们就来认识下 ViewPager2 的 PageTransformer 吧！

3.1 setPageMargin

在第一章中我们提到了 ViewPager2 移除了 setPageMargin() 方法，那么怎么为 ViewPager2 设置页面间距呢？

其实在 ViewPager2 中为我们提供了 MarginPageTransformer，我们可以通过 ViewPager2 的 setPageTransformer 方法来设置页面间距。代码如下：

viewPager2.setPageTransformer(MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))

上述代码我们为 ViewPager2 设置了 10dp 的页面间距。

效果如下：

3.2 认识 CompositePageTransformer

这个时候我们应该有个疑问，为 ViewPager2 设置了页面间距后，如果还想设置页面动画的 Transformer 怎么办呢？这时候就该 CompositePageTransformer 出场了。

从名字上也可以看出来，它是一个组合的 PageTransformer。没错，CompositePageTransformer 实现了 PageTransformer 接口，同时在其内部维护了一个 List 集合，我们可以将多个 PageTransformer 添加到 CompositePageTransformer 中。

val compositePageTransformer = CompositePageTransformer()
compositePageTransformer.addTransformer(ScaleInTransformer())
compositePageTransformer.addTransformer(MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))
viewPager2.setPageTransformer(compositePageTransformer)

上述代码中我们通过 CompositePageTransformer 为 ViewPager 设置了 MarginPageTransformer 和一个页面缩放的 ScaleInTransformer。来看下效果：

3.3 ViewPager2 中的 PageTransformer

PageTransformer 是一个位于 ViewPager2 中的接口，因此 ViewPager2 的 PageTransformer 是独立于 ViewPager 的，它与 ViewPager 的 PageTransformer 没有任何关系。

虽然如此，却不必担心。因为 ViewPager2 的 PageTransformer 和 ViewPager 的 PageTransformer 实现方式一模一样。我们看下上一小节中用到的 ScaleInTransformer：

class ScaleInTransformer : ViewPager2.PageTransformer {
  private val mMinScale = DEFAULT_MIN_SCALE
  override fun transformPage(view: View, position: Float) {
    view.elevation = -abs(position)
    val pageWidth = view.width
    val pageHeight = view.height

    view.pivotY = (pageHeight / 2).toFloat()
    view.pivotX = (pageWidth / 2).toFloat()
    if (position < -1) {
      view.scaleX = mMinScale
      view.scaleY = mMinScale
      view.pivotX = pageWidth.toFloat()
    } else if (position <= 1) {
      if (position < 0) {
        val scaleFactor = (1 + position) * (1 - mMinScale) + mMinScale
        view.scaleX = scaleFactor
        view.scaleY = scaleFactor
        view.pivotX = pageWidth * (DEFAULT_CENTER + DEFAULT_CENTER * -position)
      } else {
        val scaleFactor = (1 - position) * (1 - mMinScale) + mMinScale
        view.scaleX = scaleFactor
        view.scaleY = scaleFactor
        view.pivotX = pageWidth * ((1 - position) * DEFAULT_CENTER)
      }
    } else {
      view.pivotX = 0f
      view.scaleX = mMinScale
      view.scaleY = mMinScale
    }
  }

  companion object {
    const val DEFAULT_MIN_SCALE = 0.85f
    const val DEFAULT_CENTER = 0.5f
  }
}

3.4 ViewPager2的一屏多页效果

在 ViewPager2 的官方 Sample 上看到了 ViewPager2 的一屏多页可以通过为 RecyclerView 设置 Padding 来实现。代码如下：

viewPager2.apply {
    offscreenPageLimit=1
   val recyclerView= getChildAt(0) as RecyclerView
    recyclerView.apply {
      val padding = resources.getDimensionPixelOffset(R.dimen.dp_10) +
              resources.getDimensionPixelOffset(R.dimen.dp_10)

      setPadding(padding, 0, padding, 0)
      clipToPadding = false
    }
}
val compositePageTransformer = CompositePageTransformer()
compositePageTransformer.addTransformer(ScaleInTransformer())
compositePageTransformer.addTransformer(MarginPageTransformer(resources.getDimension(R.dimen.dp_10).toInt()))
viewPager2.setPageTransformer(compositePageTransformer)

最后，我们来看下效果

四、ViewPager2 与 Fragment

我们前面也已经提到了 ViewPager2 中新增的 FragmentStateAdapter，替代了 ViewPager 的 FragmentStatePagerAdapter。那么来我们就用 ViewPager2 来实现一个 Activity 中嵌套 Fragment 的实例。

4.1 Activity的layout中添加ViewPager2

<androidx.viewpager2.widget.ViewPager2
     android:id="@+id/vp_fragment"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_above="@id/rg_tab" />

4.2 实现 FragmentStateAdapter

class AdapterFragmentPager(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {

  override fun createFragment(position: Int): Fragment {
    return when (position) {
      PAGE_HOME -> HomeFragment.getInstance();
      PAGE_FIND -> PageFragment.getInstance();
      PAGE_INDICATOR -> IndicatorFragment.getInstance();
      PAGE_OTHERS -> OthersFragment.getInstance();
      else -> EmptyFragment.getInstance();
    }
  }

  override fun getItemCount(): Int {
    return 4
  }

  companion object {
    const val PAGE_HOME = 0
    const val PAGE_FIND = 1
    const val PAGE_INDICATOR = 2
    const val PAGE_OTHERS = 3
  }
}

4.3 在Activity中为ViewPager2设置FragmentStateAdapter

vp_fragment.adapter = AdapterFragmentPager(this)
vp_fragment.offscreenPageLimit = 3
vp_fragment.isUserInputEnabled=false

五、ViewPager2与TabLayout

TabLayout 也是项目中经常用到的一个控件，它通常会与 ViewPager 一起出现。那么对于 ViewPager2 应该怎么使用 Tablayout 呢？

这需要我们认识一个新类 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), 第一个参数是当前 Tab, 第二个当前 position，源码如下：

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 关联起来了。

TabLayoutMediator(tab_layout, view_pager) { tab, position ->
    //  为Tab设置Text
    tab.text = Card.DECK[position].toString()
}.attach()

使用起来非常简单，实现效果如下图所示：

六、小结

本篇文章我们认识了 ViewPager2 的新特性以及其用法。

总得来说 ViewPager2 相比 ViewPager 不管在性能上，还是在功能上，都有了很大的提升。因此，我相信在不久的未来，ViewPager2 必定会取代 ViewPager。

那么，你是否已经考虑将 ViewPager2 用到你的项目中了呢？

最后再来给大家推荐一下 BannerViewPager。这是一个基于 ViewPager 实现的具有强大功能的无限轮播库。现在 BannerViewPager 3.0 版本中用 ViewPager2 来重构代码。欢迎大家到 GitHub 关注 BannerViewPager。

• BannerViewPager
  https://github.com/zhpanvip/BannerViewPager

-- End --

本文对你有帮助吗？留言、转发、点好看是最大的支持，谢谢！

推荐阅读：

Flutter 也能做复杂效果，影院选座走一波！

动态生成代码：AOP 之 AspectJ 在 Android 的应用！

面试官装x失败之：Activity的启动模式