Android ViewPager2 使用及自定義指示器視圖實(shí)現(xiàn)
Android ViewPager2 Usage
ViewPager2 是 ViewPager 的升級(jí)版本，解決了 ViewPager 的大部分痛點(diǎn)，比如從右到左的布局支持、垂直方向的支持、可修改的 Fragment 集合等能力。
使用它首先需要添加依賴(lài)：
implementation "androidx.viewpager2:viewpager2:1.0.0"
依賴(lài)版本和官方更新可以參考：
developer.android.com/jetpack/and…
使用場(chǎng)景
ViewPager 是一個(gè)允許用戶(hù)在數(shù)據(jù)頁(yè)面中進(jìn)行左右切換的布局管理器。通過(guò) PagerAdapter 的實(shí)現(xiàn)來(lái)生成顯示的頁(yè)面。最常見(jià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);
}
它的注釋說(shuō)明了如何使用 Fragment ：
設(shè)置一個(gè)新的適配器來(lái)按需提供頁(yè)面視圖。 如果您打算將 Fragments 用作頁(yè)面，請(qǐng)實(shí)現(xiàn) FragmentStateAdapter。 如果您的頁(yè)面是視圖，請(qǐng)照常實(shí)施 RecyclerView.Adapter。
ViewPager 可以用于 app 首頁(yè)多 Tab 切換、輪播廣告 Banner 這種多個(gè)頁(yè)面可支持滑動(dòng)切換的場(chǎng)景。
而 ViewPager2 的使用場(chǎng)景更加廣泛，可以在一些無(wú)法使用 Fragment 的場(chǎng)景下實(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 可以直接使用一個(gè) RecyclerView.Adapter 的實(shí)現(xiàn)。
viewPager.adapter = ViewPagerAdapter(pageSize)
注冊(cè)頁(yè)面切換回調(diào)：
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
// ...
}
})
ViewPager2.OnPageChangeCallback 中提供了三個(gè)方法：
public abstract static class OnPageChangeCallback {
/**
* 當(dāng)滾動(dòng)當(dāng)前頁(yè)面時(shí)，將調(diào)用此方法，作為以編程方式啟動(dòng)的平滑滾動(dòng)或用戶(hù)啟動(dòng)的觸摸滾動(dòng)的一部分。
*
* @param position 當(dāng)前顯示的第一頁(yè)的位置索引; 如果 positionOffset 不為零，則頁(yè)面位置+1 將可見(jiàn)。
* @param positionOffset 來(lái)自 [0, 1) 的值，表示在位置處與頁(yè)面的偏移量。
* @param positionOffsetPixels 以像素為單位的值，指示與位置的偏移量。
*/
public void onPageScrolled(int position, float positionOffset,
@Px int positionOffsetPixels) {
}
/**
* 選擇新頁(yè)面時(shí)將調(diào)用此方法。 此時(shí)動(dòng)畫(huà)不一定是完成的。
*
* @param position 新選定頁(yè)面的位置索引。
*/
public void onPageSelected(int position) {
}
/**
* 當(dāng)滾動(dòng)狀態(tài)改變時(shí)調(diào)用。 用于發(fā)現(xiàn)用戶(hù)何時(shí)開(kāi)始拖動(dòng)、何時(shí)開(kāi)始假拖動(dòng)、何時(shí)尋呼機(jī)自動(dòng)穩(wěn)定到當(dāng)前頁(yè)面或何時(shí)完全停止/空閑。
* {@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)邏輯即可。
而如何手動(dòng)觸發(fā)頁(yè)面的切換呢？很簡(jiǎn)單，通過(guò)更新 currentItem ：
viewPager.currentItem = viewPager.currentItem - 1
自定義指示器
通過(guò)這種 ViewPager 切換會(huì)配合一個(gè)指示器或者 Tab 布局。例如首頁(yè) Tab 切換通過(guò)配合 TabLayout 使用；而 Banner 指示器場(chǎng)景，通常是自定義的視圖。
ViewPager2 結(jié)合 TabLayout 的使用參考：
使用 ViewPager2 創(chuàng)建包含標(biāo)簽的滑動(dòng)視圖：developer.android.com/guide/navig…
自定義指示器視圖的實(shí)現(xiàn)底層原理一般是：通過(guò) ViewPager 當(dāng)前的 positon 和總數(shù)量，在 ViewPager 頁(yè)面切換時(shí)，重新繪制指示器視圖。
主要邏輯就是在 ViewPager2 的頁(yè)面切換觸發(fā)指示器視圖的刷新：
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
// 更新當(dāng)前位置
indicatorView.mCurrentSeletedPosition = viewPager.currentItem
// 觸發(fā)重新繪制
indicatorView.postInvalidate()
}
})
下面實(shí)現(xiàn)了一個(gè)指示器視圖：
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)
//畫(huà)筆
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個(gè)數(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()
}
// 核心邏輯，計(jì)算布局尺寸
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)
}
// 核心邏輯，計(jì)算繪制內(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 中，這一部分邏輯需要開(kāi)發(fā)者根據(jù)自己的需要進(jìn)行自定義。
onMeasure 負(fù)責(zé)測(cè)量整個(gè) View 的尺寸：
// 核心邏輯，計(jì)算布局尺寸
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
// 獲取 View 的指定的高度
val heightSize: Int = MeasureSpec.getSize(heightMeasureSpec)
// 整體寬度，這里計(jì)算規(guī)則是：
// 實(shí)際寬度 = 指示器寬度 * 指示器數(shù)量 + 指示器之間的間距 * （指示器數(shù)量 - 1）
mIndicatorItemWidth = (40 * mIndicatorItemCount + (mIndicatorItemCount - 1) * mIndicatorItemDistance)
// 整體高度，取 View 指定的高度和指示器高度較大值
mIndicatorItemHeight = Math.max(heightSize, dp2px(2f))
setMeasuredDimension(mIndicatorItemWidth, mIndicatorItemHeight)
}
這里繪制的是一個(gè)矩形的指示器：
// 核心邏輯，計(jì)算繪制內(nèi)容
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// 指示器高度 / 2 = y 軸坐標(biāo)中心點(diǎn)
val cy = mIndicatorItemHeight.div(2f)
// 繪制 指示器數(shù)量 個(gè)矩形
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指示器視圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Android讀取assets目錄下的所有圖片并顯示的方法,對(duì)讀取assets文件夾的原理與方法做了詳細(xì)的分析,并給出了讀取圖片文件的實(shí)例,非常具有參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11
這篇文章主要為大家詳細(xì)介紹了Android自定義控件基本原理，了解一下自定義控件的要求和實(shí)現(xiàn)的基本原理,感興趣的小伙伴們可以參考一下2016-08-08
Android編程之動(dòng)態(tài)壁紙實(shí)例分析
這篇文章主要介紹了Android編程之動(dòng)態(tài)壁紙實(shí)現(xiàn)方法,以實(shí)例形式分析了Android動(dòng)態(tài)壁紙的原理與實(shí)現(xiàn)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
使用Android Studio檢測(cè)內(nèi)存泄露(LeakCanary)
本篇文章主要介紹了用Android Studio檢測(cè)內(nèi)存泄露的問(wèn)題的解決方法，Android Studio在為我們提供了良好的編碼體驗(yàn)的同時(shí)，也提供了許多對(duì)App性能分析的工具，下面我們一起來(lái)了解一下。2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android第三方控件PhotoView的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android使用ContentProvider實(shí)現(xiàn)跨進(jìn)程通訊示例詳解
這篇文章主要為大家介紹了Android使用ContentProvider實(shí)現(xiàn)跨進(jìn)程通訊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
android 獲取手機(jī)內(nèi)存及 內(nèi)存可用空間的方法
下面小編就為大家?guī)?lái)一篇android 獲取手機(jī)內(nèi)存及SD卡內(nèi)存可用空間的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
使用Docker來(lái)加速構(gòu)建Android應(yīng)用的基本部署思路解析
這篇文章主要介紹了使用Docker來(lái)加速構(gòu)建Android應(yīng)用的部署思路解析,在服務(wù)器中通過(guò)Docker鏡像來(lái)獲得更高效的開(kāi)發(fā)和測(cè)試流程,需要的朋友可以參考下2016-01-01
Android編程中Tween動(dòng)畫(huà)和Frame動(dòng)畫(huà)實(shí)例分析
這篇文章主要介紹了Android編程中Tween動(dòng)畫(huà)和Frame動(dòng)畫(huà),結(jié)合實(shí)例形式較為詳細(xì)的分析了Android中Tween動(dòng)畫(huà)和Frame動(dòng)畫(huà)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
Android實(shí)現(xiàn)的ListView分組布局改進(jìn)示例
這篇文章主要介紹了Android實(shí)現(xiàn)的ListView分組布局改進(jìn)的方法,結(jié)合實(shí)例形式分析了Android針對(duì)ListView的分組布局相關(guān)操作技巧,需要的朋友可以參考下2016-08-08