Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)
Android ViewPager2 Usage
ViewPager2 是 ViewPager 的升級版本,解決了 ViewPager 的大部分痛點(diǎn),比如從右到左的布局支持、垂直方向的支持、可修改的 Fragment 集合等能力。
使用它首先需要添加依賴:
implementation "androidx.viewpager2:viewpager2:1.0.0"
依賴版本和官方更新可以參考:
developer.android.com/jetpack/and…
使用場景
ViewPager 是一個允許用戶在數(shù)據(jù)頁面中進(jìn)行左右切換的布局管理器。通過 PagerAdapter 的實(shí)現(xiàn)來生成顯示的頁面。最常見的用法是與 Fragment 結(jié)合使用。androidx 中甚至提供了一些標(biāo)準(zhǔn)的適配器,例如 androidx.fragment.app.FragmentPagerAdapter
和 androidx.fragment.app.FragmentStatePagerAdapter
。
而 ViewPager2 則提供了更強(qiáng)啊的的能力,它可以使用 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 用作頁面,請實(shí)現(xiàn) FragmentStateAdapter。 如果您的頁面是視圖,請照常實(shí)施 RecyclerView.Adapter。
ViewPager 可以用于 app 首頁多 Tab 切換、輪播廣告 Banner 這種多個頁面可支持滑動切換的場景。
而 ViewPager2 的使用場景更加廣泛,可以在一些無法使用 Fragment 的場景下實(shí)現(xiàn)相同的效果。
使用方法
首先在布局中添加標(biāo)簽:
<androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
然后在代碼中進(jìn)行設(shè)置。關(guān)鍵的屬性和方法主要是 adapter 和 registerOnPageChangeCallback 方法。
adapter 可以直接使用一個 RecyclerView.Adapter 的實(shí)現(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)用戶何時開始拖動、何時開始假拖動、何時尋呼機(jī)自動穩(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ù)實(shí)際情況選擇方法實(shí)現(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…
自定義指示器視圖的實(shí)現(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() } })
下面實(shí)現(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 // 圓點(diǎn)半徑大小 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ù)自己的需要進(jìn)行自定義。
onMeasure 負(fù)責(zé)測量整個 View 的尺寸:
// 核心邏輯,計算布局尺寸 override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) // 獲取 View 的指定的高度 val heightSize: Int = MeasureSpec.getSize(heightMeasureSpec) // 整體寬度,這里計算規(guī)則是: // 實(shí)際寬度 = 指示器寬度 * 指示器數(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)中心點(diǎn) 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 使用及自定義指示器視圖實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于Android ViewPager2指示器視圖的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用Android Studio檢測內(nèi)存泄露(LeakCanary)
本篇文章主要介紹了用Android Studio檢測內(nèi)存泄露的問題的解決方法,Android Studio在為我們提供了良好的編碼體驗的同時,也提供了許多對App性能分析的工具,下面我們一起來了解一下。2016-12-12Android使用ContentProvider實(shí)現(xiàn)跨進(jìn)程通訊示例詳解
這篇文章主要為大家介紹了Android使用ContentProvider實(shí)現(xiàn)跨進(jìn)程通訊示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03android 獲取手機(jī)內(nèi)存及 內(nèi)存可用空間的方法
下面小編就為大家?guī)硪黄猘ndroid 獲取手機(jī)內(nèi)存及SD卡內(nèi)存可用空間的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03使用Docker來加速構(gòu)建Android應(yīng)用的基本部署思路解析
這篇文章主要介紹了使用Docker來加速構(gòu)建Android應(yīng)用的部署思路解析,在服務(wù)器中通過Docker鏡像來獲得更高效的開發(fā)和測試流程,需要的朋友可以參考下2016-01-01Android編程中Tween動畫和Frame動畫實(shí)例分析
這篇文章主要介紹了Android編程中Tween動畫和Frame動畫,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android中Tween動畫和Frame動畫的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12Android實(shí)現(xiàn)的ListView分組布局改進(jìn)示例
這篇文章主要介紹了Android實(shí)現(xiàn)的ListView分組布局改進(jìn)的方法,結(jié)合實(shí)例形式分析了Android針對ListView的分組布局相關(guān)操作技巧,需要的朋友可以參考下2016-08-08