当前位置：首页 > news >正文

时间轴、流程类时间轴绘制

news 来源：原创 2024/9/30 3:26:48

效果图

可控制是否绘制在中间
控制绘制的线条是否为虚线
控制第一条数据圆顶部线条和最后一条数据圆底部线条是否绘制

除了gif图片展示的属性，还可以控制圆的大小颜色、圆是否有上和左偏移、线条颜色等属性

除了通用的时间轴绘制，我们还可以通过改变绘制圆的样式，改为绘制相应的bitmap图像，来实现展示相关的流程

思路

关于ItemDecoration相关的内容已经写了不少，如果看过以前的文章自定义ItemDecoration分割线的高度、颜色、偏移，看完这个你就懂了、Android购物车效果实现(RecyclerView悬浮头部实现)

这个其实就是小菜一碟。我们需要做的工作有两点

ItemDecoration在getItemOffsets()方法内做相应的偏移
在onDraw()方法内分别绘制圆、圆顶部线条、圆底部线条
- 绘制线条，我们需要知道start和end的点坐标；
- 绘制圆，我们需要知道圆心和半径；

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

在这里插入图片描述

具体实现

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

步骤一：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.childCountfor (i in 0 until childCount) {val view = parent.getChildAt(i)//获取真实的在整体数据中的位置val index=parent.getChildAdapterPosition(view)//ItemView左侧+偏移的矩形框(绿色框部分)val spaceRectTop = if (index == 0) view.top else view.top - topItemSpaceval spaceRectBottom = view.bottomval spaceRectLeft = view.left - leftItemSpaceval spaceRectRight = view.left//ItemView左侧,不包含偏移的矩形框(红色框部分)val dataRectLeft = view.left - leftItemSpaceval dataRectTop = view.topval dataRectRight = view.leftval dataRectBottom = view.bottom//圆心坐标var centerX = if(isDrawAtMiddle) (dataRectLeft + dataRectRight)/ 2  else (dataRectLeft + dataRectRight)/ 2 + circleLeftPaddingval centerY =if (isDrawAtMiddle) (dataRectTop + dataRectBottom) / 2 else dataRectTop + circleRadius + circleTopPadding//绘制第一条线if (index==0){if (isDrawFirstItemTopLine){c.drawLine(centerX.toFloat(),spaceRectTop.toFloat(),centerX.toFloat(),(centerY - circleRadius).toFloat(),mLinePaint)}}else{c.drawLine(centerX.toFloat(),spaceRectTop.toFloat(),centerX.toFloat(),(centerY - circleRadius).toFloat(),mLinePaint)}//绘制圆（居中显示）c.drawCircle(centerX.toFloat(), centerY.toFloat(), circleRadius.toFloat(), mCirclePaint)//绘制第二条线，注意这里要用itemCount，因为上面的childCount是当前页面可见的个数parent.adapter?.let {if (index!=it.itemCount-1){c.drawLine(centerX.toFloat(),(centerY + circleRadius).toFloat(),centerX.toFloat(),spaceRectBottom.toFloat(),mLinePaint)}else{if (isDrawLastItemBottomLine){c.drawLine(centerX.toFloat(),(centerY + circleRadius).toFloat(),centerX.toFloat(),spaceRectBottom.toFloat(),mLinePaint)}}}}}

注意：下标的获取

因为我们需要每个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)...
}