Android ViewPager2 使用及自定義指示器視圖實現(xiàn)

更新時間：2022年09月15日 08:51:15 作者：自動化BUG制造器

這篇文章主要為大家介紹了Android ViewPager2 使用及自定義指示器視圖實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Android ViewPager2 Usage

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

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

implementation "androidx.viewpager2:viewpager2:1.0.0"

依賴版本和官方更新可以參考：

developer.android.com/jetpack/and…

使用場景

ViewPager 是一個允許用戶在數(shù)據(jù)頁面中進行左右切換的布局管理器。通過 PagerAdapter 的實現(xiàn)來生成顯示的頁面。最常見的用法是與 Fragment 結(jié)合使用。androidx 中甚至提供了一些標(biāo)準(zhǔn)的適配器，例如 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 ：

設(shè)置一個新的適配器來按需提供頁面視圖。如果您打算將 Fragments 用作頁面，請實現(xiàn) FragmentStateAdapter。如果您的頁面是視圖，請照常實施 RecyclerView.Adapter。

ViewPager 可以用于 app 首頁多 Tab 切換、輪播廣告 Banner 這種多個頁面可支持滑動切換的場景。

而 ViewPager2 的使用場景更加廣泛，可以在一些無法使用 Fragment 的場景下實現(xiàn)相同的效果。

使用方法

首先在布局中添加標(biāo)簽：

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

然后在代碼中進行設(shè)置。關(guān)鍵的屬性和方法主要是 adapter 和 registerOnPageChangeCallback 方法。

adapter 可以直接使用一個 RecyclerView.Adapter 的實現(xiàn)。

viewPager.adapter = ViewPagerAdapter(pageSize)

注冊頁面切換回調(diào)：

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

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

    public abstract static class OnPageChangeCallback {
        /**
         * 當(dāng)滾動當(dāng)前頁面時，將調(diào)用此方法，作為以編程方式啟動的平滑滾動或用戶啟動的觸摸滾動的一部分。
         *
         * @param position 當(dāng)前顯示的第一頁的位置索引; 如果 positionOffset 不為零，則頁面位置+1 將可見。
         * @param positionOffset 來自 [0, 1) 的值，表示在位置處與頁面的偏移量。
         * @param positionOffsetPixels 以像素為單位的值，指示與位置的偏移量。
         */
        public void onPageScrolled(int position, float positionOffset,
                @Px int positionOffsetPixels) {
        }
        /**
         * 選擇新頁面時將調(diào)用此方法。 此時動畫不一定是完成的。
         *
         * @param position 新選定頁面的位置索引。
         */
        public void onPageSelected(int position) {
        }
        /**
         * 當(dāng)滾動狀態(tài)改變時調(diào)用。 用于發(fā)現(xiàn)用戶何時開始拖動、何時開始假拖動、何時尋呼機自動穩(wěn)定到當(dāng)前頁面或何時完全停止/空閑。 
         * {@code state} 可以是 {@link #SCROLL_STATE_IDLE}、{@link #SCROLL_STATE_DRAGGING} 或 {@link #SCROLL_STATE_SETTLING} 之一。
         */
        public void onPageScrollStateChanged(@ScrollState int state) {
        }
    }

根據(jù)實際情況選擇方法實現(xiàn)邏輯即可。

而如何手動觸發(fā)頁面的切換呢？很簡單，通過更新 currentItem ：

viewPager.currentItem = viewPager.currentItem - 1

自定義指示器

通過這種 ViewPager 切換會配合一個指示器或者 Tab 布局。例如首頁 Tab 切換通過配合 TabLayout 使用；而 Banner 指示器場景，通常是自定義的視圖。

ViewPager2 結(jié)合 TabLayout 的使用參考：

使用 ViewPager2 創(chuàng)建包含標(biāo)簽的滑動視圖：developer.android.com/guide/navig…

自定義指示器視圖的實現(xiàn)底層原理一般是：通過 ViewPager 當(dāng)前的 positon 和總數(shù)量，在 ViewPager 頁面切換時，重新繪制指示器視圖。

主要邏輯就是在 ViewPager2 的頁面切換觸發(fā)指示器視圖的刷新：

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        // 更新當(dāng)前位置
        indicatorView.mCurrentSeletedPosition = viewPager.currentItem
        // 觸發(fā)重新繪制
        indicatorView.postInvalidate()
    }
})

下面實現(xiàn)了一個指示器視圖：

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的區(qū)域
    private var mIndicatorItemRectF: RectF? = null
    //指示器大小
    private var mIndicatorItemWidth = dp2px(40f)
    private var mIndicatorItemHeight = dp2px(2f)
    //指示器item個數(shù)
    var mIndicatorItemCount = 0
    //當(dāng)前選中的位置
    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)
    }
		// 核心邏輯，計算繪制內(nèi)容
    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 中，這一部分邏輯需要開發(fā)者根據(jù)自己的需要進行自定義。

onMeasure 負責(zé)測量整個 View 的尺寸：

  	// 核心邏輯，計算布局尺寸
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        // 獲取 View 的指定的高度
        val heightSize: Int = MeasureSpec.getSize(heightMeasureSpec)
        // 整體寬度，這里計算規(guī)則是：
      	// 實際寬度 = 指示器寬度 * 指示器數(shù)量 + 指示器之間的間距 * （指示器數(shù)量 - 1） 
        mIndicatorItemWidth = (40 * mIndicatorItemCount + (mIndicatorItemCount - 1) * mIndicatorItemDistance)
        // 整體高度，取 View 指定的高度和指示器高度較大值
        mIndicatorItemHeight = Math.max(heightSize, dp2px(2f))
        setMeasuredDimension(mIndicatorItemWidth, mIndicatorItemHeight)
    }

這里繪制的是一個矩形的指示器：

		// 核心邏輯，計算繪制內(nèi)容
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
      	// 指示器高度 / 2 = y 軸坐標(biāo)中心點
        val cy = mIndicatorItemHeight.div(2f)
      	// 繪制 指示器數(shù)量 個矩形
        for (i in 0 until mIndicatorItemCount) {
          	// 當(dāng)前索引的指示器的 x 坐標(biāo)
            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) {
        // 更新當(dāng)前位置
        indicatorView.mCurrentSeletedPosition = viewPager.currentItem
        // 觸發(fā)重新繪制
        indicatorView.postInvalidate()
    }
})

以上就是Android ViewPager2 使用及自定義指示器視圖實現(xiàn)的詳細內(nèi)容，更多關(guān)于Android ViewPager2指示器視圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: