RecycleView基于ItemDecoration实现自定义滚动条

RecycleView基于ItemDecoration实现自定义滚动条

效果如图

在这里插入图片描述
简单查了一下,没有发现特别简洁的方式,自定义view
配和绑定RecycleView再加上各种计算比较麻烦。

这里实现方式是使用低侵入性的RecyclerView.ItemDecoration

no bb,show code~

class VerticalScrollBarDecoration : RecyclerView.ItemDecoration() {
    private val paint = Paint()
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        super.onDrawOver(c, parent, state)
        //总高度
        val scrollBarHeight = 295f
        //指示器高度
        val indicatorHeight = 90f
        //总宽度
        val width = 10f
        //距离右侧距离
        val marginEnd = 14f
        //滚动条拇指的垂直范围
        val extent = parent.computeVerticalScrollExtent()
        //可滚动的区域大小
        val range = parent.computeVerticalScrollRange()
        //当前偏移量(当前滚动的距离)
        val offset = parent.computeVerticalScrollOffset()
        //最大偏移量(最大可滚动的距离)
        val maxOffset = range - extent
        //可以滑动时,在绘制。如果数据不满一屏不能滑动则不会绘制显示
        if (maxOffset > 0) {
            val startX = parent.width - marginEnd - width
            val startY = parent.height / 2f - scrollBarHeight / 2f
            paint.isAntiAlias = true
            paint.strokeCap = Paint.Cap.ROUND
            paint.strokeWidth = width
            paint.color = Color.parseColor("#F0EEFF")
            c.drawLine(startX, startY, startX, startY + scrollBarHeight, paint)
            paint.color = Color.parseColor("#DBCFFF")
            val ratio = offset.toFloat() / maxOffset.toFloat()
            val offsetY = ratio * (scrollBarHeight - indicatorHeight)
            c.drawLine(
                startX,
                startY + offsetY,
                startX,
                startY + indicatorHeight + offsetY,
                paint
            )
        }
    }
}

给RecycleView设置上

recycleview.addItemDecoration(VerticalScrollBarDecoration())

OK,完事~

看效果
在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值