本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果,以及如何分析、实现自定义 view。 需要具备的知识:Paint、Canvas、自定义 view 的绘制流程。
一、已经有很多 RecycleView 实现时间轴的例子,为何还要费劲的使用自定义 view 去实现时间轴?
首先看下最终想要的效果:
根据上图可以总结出以下几点:每个阶段要显示时间、阶段名、状态图标、中间有虚线;
文字上下交错显示;
相邻阶段的文字在垂直方向上是可以相交的;
时间轴的个数不确定,但是要铺满屏幕并且不可滑动; 如果只实现上两点的效果,使用 RecycleView 无疑是最好的选择,但是要同时实现以上整个效果目前想到的最好的办法就是使用自定义 view。
二、如何开始?
相信也有人跟我一样,对自定义的绘制过程 view、canvas、path、paint 的使用有了解,但是真的要去写自定义 view 确不知道从何开始,不知道第一步如何下手。我个人的总结就是:想要的太多,迟迟不动手,所以有想法一定要去动手试验! 不要想着写完第一次运行就是最终想展示的完美效果,而是要抱着整体拆分成不重复的小块,然后去绘制重复块,然后去一点点实现一步步完美的心态才能做出来。
所以首先要把想实现的 view 拆分成一个个小的可绘制的并且没有重复的块,以目前想实现的时间轴效果来说,最小可绘制无重复块也就是只包括一个时间结点的块如图:
它包括