自定义时间轴ItemDecoration实现

栏目：游戏攻略日期：2024-06-12 作者：游戏资讯

自定义时间轴ItemDecoration实现了一些特殊效果，可以控制是否绘制在中间、线条是否为虚线、第一条数据圆顶部线条和最后一条数据圆底部线条是否绘制等。此外，还可以控制圆的大小、颜色、圆是否有上和左偏移、线条颜色等属性。除了通用的时间轴绘制，还可以通过改变绘制圆的样式，改为绘制相应的bitmap图像，来实现展示相关的流程。

关于ItemDecoration相关的内容已经写了不少，这个其实就是小菜一碟。我们需要做的工作有两点：

ItemDecoration在 getItemOffsets() 方法内做相应的偏移
在 onDraw() 方法内分别绘制圆、圆顶部线条、圆底部线条

通过下图，你将能清楚地获取到这些绘制需要的一些信息

有了以上内容，我们开始绘制

步骤一：ItemView顶部偏移

 override fun getItemOffsets(
        outRect: Rect,
        view: View,
        parent: RecyclerView,
        state: RecyclerView.State,
    ) {
        if (parent.getChildAdapterPosition(view) != 0) {
            //第一个不做顶部偏移
            outRect.top = topItemSpace
        }
        outRect.left = leftItemSpace
    }

步骤二：绘制圆和线条

override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        //获取到的是当前屏幕可见的个数
        val childCount = parent.childCount
        //...（此处省略部分代码）

因为我们需要每个ItemView都绘制，所以需要使用循环。但因为 val childCount = parent.childCount 获取到的是当前页面可见的个数，并不是实际的个数，所以我们在判断是否是首条或者最后一条数据时，那个index要通过 val index=parent.getChildAdapterPosition(view) 的方式来获取到真实的下标位置。

流程类的绘制

和绘制通用的圆类似，不过是将 Canvas.drawCircle() 改为 Canvas.drawBitmap() 。至于不同的bitmap的加载，我们可以通过传入集合的数据类型来判断绘制哪种图片即可。

override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
	...
	val srcRect = Rect(0, 0, progressBitmap.width, progressBitmap.height)
	val dstRect = Rect(
        centerX - circleRadius,
        centerY - circleRadius,
        centerX + circleRadius,
        centerY + circleRadius
    )
    c.drawBitmap(errorBitmap, srcRect, dstRect, mCirclePaint)
    ...
}