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…

自定义指示器视图的完结底层原理一般是：经过 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()
    }
})