直接上圖

image

為了實現(xiàn)這樣的效果，網(wǎng)上查了資料發(fā)現(xiàn)沒有比較簡潔的實現(xiàn)方式，然后就自己來了，

由于是在現(xiàn)有代碼的基礎(chǔ)上，進行樣式改造，所有首要需要考慮低侵入性，這時候就想到了RecyclerView.ItemDecoration，

既然有了思路，那就直接開動干，貼代碼

class HorizontalScrollBarDecoration: RecyclerView.ItemDecoration() {
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State?) {
        super.onDrawOver(c, parent, state)

        val barHeight = SizeUtils.dp2px(2f)
        val scrollWidth = SizeUtils.dp2px(20f)
        val indicatorWidth = SizeUtils.dp2px(6f)
        val paddingBottom = SizeUtils.dp2px(9f)
        val barX = (parent.width / 2 - scrollWidth / 2).toFloat()
        val barY = (parent.height - paddingBottom - barHeight).toFloat()

        val paint = Paint()
        paint.isAntiAlias = true
        paint.color = Color.parseColor("#FFEAF1FE")
        paint.strokeCap = Paint.Cap.ROUND
        paint.strokeWidth = barHeight.toFloat()
        c.drawLine(barX, barY, barX + scrollWidth.toFloat(), barY, paint)

        val extent = parent.computeHorizontalScrollExtent()
        val range = parent.computeHorizontalScrollRange()
        val offset = parent.computeHorizontalScrollOffset()
        val maxEndX = (range - extent).toFloat()
        //可滑動
        if (maxEndX > 0) {
            val proportion = offset / maxEndX

            val scrollableDistance = scrollWidth - indicatorWidth

            val offsetX = scrollableDistance * proportion
            paint.color = Color.parseColor("#FF327BF9")
            c.drawLine(barX + offsetX, barY, barX + indicatorWidth.toFloat() + offsetX, barY, paint)
        } else {
            paint.color = Color.parseColor("#FF327BF9")
            c.drawLine(barX, barY, barX + scrollWidth.toFloat(), barY, paint)
        }
    }
}

Usage

  recyclerView.addItemDecoration(HorizontalScrollBarDecoration())

直接上效果

image

如此，就在盡少改動原有邏輯的基礎(chǔ)上，實現(xiàn)了樣式變動