Android ViewPager2 Usage

ViewPager2 是 ViewPager 的升级版本，解决了 ViewPager 的大部分痛点，比如从右到左的布局支持、垂直方向的支持、可修改的 Fragment 集合等能力。

使用它首先需要添加依赖：

implementation "androidx.viewpager2:viewpager2:1.0.0"

依赖版本和官方更新可以参考：

developer.android.com/jetpack/and…

使用场景

ViewPager 是一个允许用户在数据页面中进行左右切换的布局管理器。通过 PagerAdapter 的实现来生成显示的页面。最常见的用法是与 Fragment 结合使用。androidx 中甚至提供了一些标准的适配器，例如 androidx.fragment.app.FragmentPagerAdapter 和 androidx.fragment.app.FragmentStatePagerAdapter 。

而 ViewPager2 则提供了更强啊的的能力，它可以使用 RecyclerView 的 Adapter ！

ViewPager 的 setAdapter 方法：

/**
    * Set a PagerAdapter that will supply views for this pager as needed.
    *
    * @param adapter Adapter to use
    */
   public void setAdapter(@Nullable PagerAdapter adapter)

而 ViewPager2 的 setAdapter 方法：

/**
* @param adapter The adapter to use, or {@code null} to remove the current adapter
    * @see androidx.viewpager2.adapter.FragmentStateAdapter
    * @see RecyclerView#setAdapter(Adapter)
    */
public void setAdapter(@Nullable @SuppressWarnings("rawtypes") Adapter adapter) {
       final Adapter<?> currentAdapter = mRecyclerView.getAdapter();
       mAccessibilityProvider.onDetachAdapter(currentAdapter);
       unregisterCurrentItemDataSetTracker(currentAdapter);
       mRecyclerView.setAdapter(adapter);
       mCurrentItem = 0;
       restorePendingState();
       mAccessibilityProvider.onAttachAdapter(adapter);
       registerCurrentItemDataSetTracker(adapter);
   }

它的注释说明了如何使用 Fragment ：

设置一个新的适配器来按需提供页面视图。 如果您打算将 Fragments 用作页面，请实现 FragmentStateAdapter。 如果您的页面是视图，请照常实施 RecyclerView.Adapter。

ViewPager 可以用于 app 首页多 Tab 切换、轮播广告 Banner 这种多个页面可支持滑动切换的场景。

而 ViewPager2 的使用场景更加广泛，可以在一些无法使用 Fragment 的场景下实现相同的效果。

使用方法

首先在布局中添加标签：

<androidx.viewpager2.widget.ViewPager2
       android:id="@+id/viewPager"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

然后在代码中进行设置。关键的属性和方法主要是 adapter 和 registerOnPageChangeCallback 方法。

adapter 可以直接使用一个 RecyclerView.Adapter 的实现。

viewPager.adapter = ViewPagerAdapter(pageSize)

注册页面切换回调：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
     // ...
}
})

ViewPager2.OnPageChangeCallback 中提供了三个方法：

public abstract static class OnPageChangeCallback {
       /**
        * 当滚动当前页面时，将调用此方法，作为以编程方式启动的平滑滚动或用户启动的触摸滚动的一部分。
        *
        * @param position 当前显示的第一页的位置索引; 如果 positionOffset 不为零，则页面位置+1 将可见。
        * @param positionOffset 来自 [0, 1) 的值，表示在位置处与页面的偏移量。
        * @param positionOffsetPixels 以像素为单位的值，指示与位置的偏移量。
        */
       public void onPageScrolled(int position, float positionOffset,
               @Px int positionOffsetPixels) {
       }
       /**
        * 选择新页面时将调用此方法。 此时动画不一定是完成的。
        *
        * @param position 新选定页面的位置索引。
        */
       public void onPageSelected(int position) {
       }
       /**
        * 当滚动状态改变时调用。 用于发现用户何时开始拖动、何时开始假拖动、何时寻呼机自动稳定到当前页面或何时完全停止/空闲。
        * {@code state} 可以是 {@link #SCROLL_STATE_IDLE}、{@link #SCROLL_STATE_DRAGGING} 或 {@link #SCROLL_STATE_SETTLING} 之一。
        */
       public void onPageScrollStateChanged(@ScrollState int state) {
       }
   }

根据实际情况选择方法实现逻辑即可。

而如何手动触发页面的切换呢？很简单，通过更新 currentItem ：

viewPager.currentItem = viewPager.currentItem - 1

自定义指示器

通过这种 ViewPager 切换会配合一个指示器或者 Tab 布局。例如首页 Tab 切换通过配合 TabLayout 使用；而 Banner 指示器场景，通常是自定义的视图。

ViewPager2 结合 TabLayout 的使用参考：

使用 ViewPager2 创建包含标签的滑动视图：developer.android.com/guide/navig&hellip;

自定义指示器视图的实现底层原理一般是：通过 ViewPager 当前的 positon 和总数量，在 ViewPager 页面切换时，重新绘制指示器视图。

主要逻辑就是在 ViewPager2 的页面切换触发指示器视图的刷新：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
   override fun onPageSelected(position: Int) {
       // 更新当前位置
       indicatorView.mCurrentSeletedPosition = viewPager.currentItem
       // 触发重新绘制
       indicatorView.postInvalidate()
   }
})

下面实现了一个指示器视图：

class IndicatorView @JvmOverloads constructor(
   context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
   // 指示器之间的间距
   private var mIndicatorItemDistance = dp2px(12f)
   //选中与未选中的颜色
   private var mColorSelected = Color.GRAY
   private var mColorUnSelected = Color.WHITE
   // 圆点半径大小
   private var circleCircleRadius = dp2px(1f)
   //画笔
   private var mUnSelectedPaint: Paint? = null
   private var mSelectedPaint: Paint? = null
   //指示器item的区域
   private var mIndicatorItemRectF: RectF? = null
   //指示器大小
   private var mIndicatorItemWidth = dp2px(40f)
   private var mIndicatorItemHeight = dp2px(2f)
   //指示器item个数
   var mIndicatorItemCount = 0
   //当前选中的位置
   var mCurrentSeletedPosition = 0
   init {
       mUnSelectedPaint = Paint().apply {
           style = Paint.Style.FILL
           isAntiAlias = true
           color = Color.GRAY
       }
       mSelectedPaint = Paint().apply {
           style = Paint.Style.FILL
           isAntiAlias = true
           color = Color.WHITE
       }
       mIndicatorItemRectF = RectF()
       verifyItemCount()
   }
 // 核心逻辑，计算布局尺寸
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec)
       val heightSize: Int = MeasureSpec.getSize(heightMeasureSpec)
       // 整体宽度
       mIndicatorItemWidth = (40 * mIndicatorItemCount + (mIndicatorItemCount - 1) * mIndicatorItemDistance)
       // 整体高度
       mIndicatorItemHeight = Math.max(heightSize, dp2px(2f))
       setMeasuredDimension(mIndicatorItemWidth, mIndicatorItemHeight)
   }
// 核心逻辑，计算绘制内容
   override fun onDraw(canvas: Canvas) {
       super.onDraw(canvas)
       val cy = mIndicatorItemHeight.div(2f)
       for (i in 0 until mIndicatorItemCount) {
           val cx = i * dp2px(40f).toFloat() + i * mIndicatorItemDistance
           canvas.drawRect(cx, cy - 1f, cx + 40f, cy + 1f, if (i == mCurrentSeletedPosition) mSelectedPaint else mUnSelectedPaint)
       }
   }
   fun verifyItemCount() {
       if (mCurrentSeletedPosition >= mIndicatorItemCount) {
           mCurrentSeletedPosition = mIndicatorItemCount - 1
       }
       visibility = if (mIndicatorItemCount <= 1) GONE else VISIBLE
   }
   private fun dp2px(dpValue: Float): Int {
       val scale: Float = context.resources.displayMetrics.density
       return (dpValue * scale + 0.5f).toInt()
   }
}

核心部分在 onMeasure 和 onDraw 中，这一部分逻辑需要开发者根据自己的需要进行自定义。

onMeasure 负责测量整个 View 的尺寸：

// 核心逻辑，计算布局尺寸
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec)
       // 获取 View 的指定的高度
       val heightSize: Int = MeasureSpec.getSize(heightMeasureSpec)
       // 整体宽度，这里计算规则是：
     // 实际宽度 = 指示器宽度 * 指示器数量 + 指示器之间的间距 * （指示器数量 - 1）
       mIndicatorItemWidth = (40 * mIndicatorItemCount + (mIndicatorItemCount - 1) * mIndicatorItemDistance)
       // 整体高度，取 View 指定的高度和指示器高度较大值
       mIndicatorItemHeight = Math.max(heightSize, dp2px(2f))
       setMeasuredDimension(mIndicatorItemWidth, mIndicatorItemHeight)
   }

这里绘制的是一个矩形的指示器：

// 核心逻辑，计算绘制内容
   override fun onDraw(canvas: Canvas) {
       super.onDraw(canvas)
     // 指示器高度 / 2 = y 轴坐标中心点
       val cy = mIndicatorItemHeight.div(2f)
     // 绘制 指示器数量 个矩形
       for (i in 0 until mIndicatorItemCount) {
         // 当前索引的指示器的 x 坐标
           val cx = i * dp2px(40f).toFloat() + i * mIndicatorItemDistance
         // 绘制矩形
           canvas.drawRect(cx, cy - 1f, cx + 40f, cy + 1f, if (i == mCurrentSeletedPosition) mSelectedPaint else mUnSelectedPaint)
       }
   }

最后是绑定到 ViewPager ：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
   override fun onPageSelected(position: Int) {
       // 更新当前位置
       indicatorView.mCurrentSeletedPosition = viewPager.currentItem
       // 触发重新绘制
       indicatorView.postInvalidate()
   }
})

来源：https://juejin.cn/post/7142747762684559368