Android ViewPager2 使用及自定义指示器视图实现
作者:自动化BUG制造器
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() } })
以上就是Android ViewPager2 使用及自定义指示器视图实现的详细内容,更多关于Android ViewPager2指示器视图的资料请关注脚本之家其它相关文章!