10分钟带你用RecyclerView+PagerSnapHelper实现一个等级指示器

老规矩:先上最终效果图

做前端的同学在平常的工作中，很多时候都会接触到各种指示器，这次我就接到一个等级指示器的需求：

RecyclerView横向滚动，item之间有分割线，中间的item会被放大，边上的item会有一定的透明度进行淡化，滚动时要将等级变更回调给外界进行处理，停止滚动后被选中的item需要居中。

效果图如下：

实现流程

初始化基本的RecyclerView

在LevelRecyclerView初始化时设置一个横向的LinearLayoutManager

    init {
layoutManager = LinearLayoutManager(context, HORIZONTAL, false)

    }

设置基本的数据源与adapter

    private fun initRecycler() {
val list = mutableListOf<Int>()

        list.add(R.drawable.icon_vip_level_0)

        list.add(R.drawable.icon_vip_level_1)

        list.add(R.drawable.icon_vip_level_2)

        list.add(R.drawable.icon_vip_level_3)

        list.add(R.drawable.icon_vip_level_4)

        list.add(R.drawable.icon_vip_level_5)

        list.add(R.drawable.icon_vip_level_6)

        list.add(R.drawable.icon_vip_level_7)

        list.add(R.drawable.icon_vip_level_8)

        list.add(R.drawable.icon_vip_level_9)

        list.add(R.drawable.icon_vip_level_10)


        rv_level.adapter = object : CommonAdapter<Int>(this, R.layout.level_item, list) {
override fun convert(holder: ViewHolder, t: Int, position: Int) {

                holder.setImageResource(R.id.iv_image, t)

                holder.setOnClickListener(R.id.iv_image) {

                    rv_level.smoothScrollToPosition(position)

                }

            }

        }

    }

效果图：

给每个item添加分割线

创建一个LevelDividerItemDecoration类继承ItemDecoration,构造参数需要传入分割线的水平长度与高度，分割线的颜色为可选参数,重写getItemOffsets与onDraw方法，熟悉ItemDecoration的同学可能会觉得onDraw方法有点眼熟，因为我这个onDraw是在DividerItemDecoration上修改的

class LevelDividerItemDecoration @JvmOverloads constructor(
private val itemDividerHorizontalMargin : Int,
private val dividerHeight : Int,

    dividerColor : Int = Color.parseColor("#3A3A3C")

) : ItemDecoration() {

//分割线Drawable
private val mDivider = ColorDrawable(dividerColor)
//分割线绘制区域
private val mBounds = Rect()

/**

     * 计算item的分割线需要的尺寸，就是一个偏移量，可简单看成外边距

     */
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
//上下不需要分割线设置为0，左右则是将构造时传入的itemDividerHorizontalMargin设置进去

        outRect.set(itemDividerHorizontalMargin, 0, itemDividerHorizontalMargin, 0)

    }

/**

     * 绘制分割线

     */
override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(canvas, parent, state)


        canvas.save()
val top = (parent.height - dividerHeight) / 2
val bottom = top + dividerHeight
if (parent.clipToPadding) {

            canvas.clipRect(parent.paddingLeft, top, parent.width - parent.paddingRight, bottom)

        }

val childCount = parent.childCount
for (i in 0 until childCount) {
val item = parent.getChildAt(i)
//获取item的Rect，包含它的外边距(包含上面设置进去的偏移量)

            parent.layoutManager!!.getDecoratedBoundsWithMargins(item, mBounds)

//左边分割线

            mDivider.setBounds(mBounds.left, top, mBounds.left + itemDividerHorizontalMargin, bottom)

            mDivider.draw(canvas)

//右边分割线

            mDivider.setBounds(mBounds.right - itemDividerHorizontalMargin, top, mBounds.right, bottom)

            mDivider.draw(canvas)

        }

        canvas.restore()

    }

}

在init中添加到LevelRecyclerView

addItemDecoration(LevelDividerItemDecoration(

    UIUtil.dip2px(context, 16.0),

    UIUtil.dip2px(context, 4.0)))

效果图：

这时候RecyclerView可以随意滚动，给它添加一个PagerSnapHelper，让RecyclerView停下来时，item可以自动居中

添加一个PagerSnapHelper

在内部添加一个PagerSnapHelper，并在init时设置依附于LevelRecyclerView

private val mSnapHelper = PagerSnapHelper()
init {

    mSnapHelper.attachToRecyclerView(this)

    layoutManager = mLayoutManager

}

效果图：

这时又发现首尾的item，由于滚不到RecyclerView的中间，无法被选中，于是优化LevelDividerItemDecoration的计算与绘制,调整首尾item的分割线长度，使它们可以滚动到RecyclerView的中间

优化LevelDividerItemDecoration的计算与绘制

class LevelDividerItemDecoration @JvmOverloads constructor(
private val itemDividerHorizontalMargin : Int,
private val dividerHeight : Int,

    dividerColor : Int = Color.parseColor("#3A3A3C")

) : ItemDecoration() {

//分割线Drawable
private val mDivider = ColorDrawable(dividerColor)
//分割线绘制区域
private val mBounds = Rect()

/**

     * 计算item的分割线需要的尺寸，就是一个偏移量，可简单看成外边距

     */
override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
val parentWidth = parent.measuredWidth
val itemWidth = view.layoutParams.width
val lastPosition = parent.adapter?.itemCount?.minus(1) ?: 0
//针对首尾两个item计算它们的左右边距，用parentWidth - itemWidth再除2，可以使item刚好到达RecyclerView的中间
when (parent.getChildAdapterPosition(view)) {
0 -> {

                outRect.set(((parentWidth - itemWidth) * 0.5).toInt(), 0, itemDividerHorizontalMargin, 0)

            }

            lastPosition -> {

                outRect.set(itemDividerHorizontalMargin, 0, ((parentWidth - itemWidth) * 0.5).toInt(), 0)

            }
else -> outRect.set(itemDividerHorizontalMargin, 0, itemDividerHorizontalMargin, 0)

        }

    }

/**

     * 绘制分割线

     */
override fun onDraw(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) {
super.onDraw(canvas, parent, state)


        canvas.save()
val top = (parent.height - dividerHeight) / 2
val bottom = top + dividerHeight
if (parent.clipToPadding) {

            canvas.clipRect(parent.paddingLeft, top, parent.width - parent.paddingRight, bottom)

        }

//RecyclerView宽度
val parentWidth = parent.measuredWidth
val childCount = parent.childCount
for (i in 0 until childCount) {
val item = parent.getChildAt(i)
//item宽度
val itemWidth = item.measuredWidth
//获取item的Rect，包含它的外边距(包含上面设置进去的偏移量)

            parent.layoutManager!!.getDecoratedBoundsWithMargins(item, mBounds)

//左边分割线
if (i == 0 && mBounds.width() > itemWidth + itemDividerHorizontalMargin * 2) {

                mDivider.setBounds(0, top, mBounds.right - itemWidth - itemDividerHorizontalMargin, bottom)

            } else {

                mDivider.setBounds(mBounds.left, top, mBounds.left + itemDividerHorizontalMargin, bottom)

            }

            mDivider.draw(canvas)

//右边分割线
if (i == childCount - 1 && mBounds.width() > itemWidth + itemDividerHorizontalMargin * 2) {

                mDivider.setBounds(mBounds.left + itemWidth + itemDividerHorizontalMargin, top, parentWidth, bottom)

            } else {

                mDivider.setBounds(mBounds.right - itemDividerHorizontalMargin, top, mBounds.right, bottom)

            }

            mDivider.draw(canvas)

        }

        canvas.restore()

    }

}

效果图：

给RecyclerView注册滚动监听，在滚动过程中动态修改item的缩放与透明度，并将当前选中等级回调出去

定义一个等级回调接口

interface OnLevelChangeListener {
fun onLevelChange(position : Int)

}

添加OnScrollListener，在滚动过程中做了一些计算，每个方法都写了注释，具体看下面代码↓

addOnScrollListener(object : OnScrollListener() {
//系数最大值
private val maxFactor = .45F

/**

     * RecyclerView滚动

     */
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
val first = mLayoutManager.findFirstVisibleItemPosition()
val last = mLayoutManager.findLastVisibleItemPosition()
val parentCenter = recyclerView.width / 2F
for (i in first..last) {

            setItemTransform(i, parentCenter)

        }

        changeSnapView()

    }

/**

     * RecyclerView滚动状态改变

     */
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (newState == SCROLL_STATE_IDLE) {

            changeSnapView()

        }

    }

/**

     * 对item进行各种变换

     * 目前是缩放与透明度变换

     */
private fun setItemTransform(position : Int, parentCenter : Float) {

        mLayoutManager.findViewByPosition(position)?.run {
val factor = calculationViewFactor(left.toFloat(), width.toFloat(), parentCenter)
val scale = 1 + factor

            scaleX = scale

            scaleY = scale

            alpha = 1 - maxFactor + factor

        }

    }

/**

     * 计算当前item的缩放与透明度系数

     * item的中心离recyclerView的中心越远，系数越小（负相关）

     */
private fun calculationViewFactor(left: Float, width : Float, parentCenter : Float) : Float {
val viewCenter = left + width / 2
val distance = abs(viewCenter - parentCenter) / width
return max(0F, (1F - distance) * maxFactor)

    }

/**

     * 修改当前居中的item，把当前等级回调给外界

     */
private fun changeSnapView() {

        mSnapHelper.findSnapView(mLayoutManager)?.let {

            mLayoutManager.getPosition(it).let { position ->
if (lastPosition != position) {

                    lastPosition = position

                    levelListener?.onLevelChange(position)

                }

            }

        }

    }

})

给LevelRecyclerView设置等级回调监听

rv_level.levelListener = object : LevelRecyclerView.OnLevelChangeListener {
override fun onLevelChange(position: Int) {

        Log.e("levelListener","levelListener $position")

        tv_level.text = "等级:$position"

    }

}

效果图：

重写smoothScrollToPosition，方法原实现是将某个item可见，但现在的需求是居中选中，所以要重写

方法的原实现其实就是LinearLayoutManager内部创建了一个LinearSmoothScroller去进行滚动，现在我们创建一个CenterSmoothScroller类去继承LinearSmoothScroller，重写它的calculateDtToFit方法，calculateDtToFit用于计算滚动距离，而calculateSpeedPerPixel计算滚动速度

class CenterSmoothScroller(context: Context?) : LinearSmoothScroller(context) {

override fun calculateDtToFit(viewStart: Int, viewEnd: Int, boxStart: Int,

                                  boxEnd: Int, snapPreference: Int): Int {
return boxStart + (boxEnd - boxStart) / 2 - (viewStart + (viewEnd - viewStart) / 2)

    }

override fun calculateSpeedPerPixel(displayMetrics: DisplayMetrics?): Float {
return super.calculateSpeedPerPixel(displayMetrics) * 3F

    }

}

override fun smoothScrollToPosition(position : Int) {
if (position == lastPosition) return
if (position < 0 || position >= (adapter?.itemCount ?: 0)) return


    mLayoutManager.startSmoothScroll(

        CenterSmoothScroller(context).apply {

            targetPosition = position

        }

    )

}

到这里就完成了对整个LevelRecyclerView的开发了，实现了文章开头的动画效果

总结

10分钟过去了，这个简单的LevelRecyclerView你拿下没有?

觉得不错的话，就不要吝啬你的点赞！

需要整份代码的话，下面链接自提。

代码链接 : github.MyCustomView