技术不止，文章有料，关注公众号
九心说，每周一篇高质好文，和九心在大厂路上肩并肩。
前言
因为公司业务经常会涉及到流程，所以使用类似时间轴的控件是不可避免。并且公司一直是使用的平板，单列时间轴已不足以胜任，故一直使用双列的时间轴TimeLine，这是一个借助2列的瀑布流布局的RecyclerView完成的时间轴，已满足我司日常的需求，不过，使用瀑布流带来的烦恼是：
- 位置不好控制：时间轴的每个点的距离不能够均匀分布（不过这也是瀑布流的优点，充分利用空间）
- 选择单一：如果你的项目既有单列时间轴，又想集成双列时间轴，这种情况下就需要集成两个第三方库
- 样式单一：多数时间轴库的样式选择过于单一，不能够自己定制
为了解决以上的痛点，我提供了一种仍基于RecyclerView的新解决方案，该方案已被我集成在Orient-Ui中，以下是我基于此方案自定义实现的几个例子：
| 两列时间轴 | 单列时间轴-左侧标题 | 单列时间轴-顶部标题 |
|---|---|---|
一、介绍
为什么说Orient-Ui中的TimeLine灵活呢？因为该方案具有如下特点：
- 主体样式包括单列时间轴和双列时间轴：单列时间轴使用的
RecyclerView中的LinearLayoutManager（线性布局），双列时间轴则使用的Orient-Ui中的DoubleSideLayoutManager（两侧布局） - 内容样式可控性强：可以轻松控制时间轴的点绘制方式、时间轴中的标题位置和内容、以及时间轴中的时间线等
- 样式高度的自定义：需要自己在给定的区域内绘制时间标题和时间点，这也是该方案灵活的原因
上述的特点的描述可能不是特别清晰，我们借助两张图加以说明：
| 图片 | 图片 |
|---|---|
左右两边分别代表着双列时间轴和单列时间轴，其中dot area和title area是需要实现绘制的区域，其他的例如标题放在RecyclerView子视图的上侧还是还是左侧、标题的颜色、时间点采用的资源文件绘制还是自绘制、时间线的风格及占用大小等需要创建的时候进行设置。 |
二、使用
我会以上述图片为例，分别介绍单例时间轴和双列时间轴。不过在此之前，你需要在build.gradle添加依赖：
implementation 'com.orient:Orient-Ui:1.0.0'
1. 单列时间轴
第一步 继承SingleTimeLineDecoration
我们需要实现抽象方法SingleTimeLineDecoration#onDrawTitleItem，以及针对当前时间点的风格选择复写合适的方法，如果时间点采用的是FLAG_DOT_DRAW（绘制风格），需要复写SingleTimeLineDecoration#onDrawDotItem方法，如果时间点采用的是FLAG_DOT_RES（绘制资源文件），则需要复写SingleTimeLineDecoration#onDrawDotResItem方法：
public class StepSTL extends SingleTimeLineDecoration {
private Paint mRectPaint;
public StepSTL(SingleTimeLineDecoration.Config config) {
super(config);
mRectPaint = new Paint();
mRectPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID));
mDotPaint.setMaskFilter(new BlurMaskFilter(6, BlurMaskFilter.Blur.SOLID));
}
@Override
protected void onDrawTitleItem(Canvas canvas, int left, int top, int right, int bottom, int pos) {
ITimeItem item = timeItems.get(pos);
int rectWidth = UIUtils.dip2px(120);
int height = bottom - top;
int paddingLeft = UIUtils.dip2px(10);
mRectPaint.setColor(item.getColor());
canvas.drawRoundRect(left+paddingLeft,top,left+rectWidth,bottom,UIUtils.dip2px(6),UIUtils.dip2px(6),mRectPaint);
String title = item.getTitle();
if(TextUtils.isEmpty(title))
return;
Rect mRect = new Rect();
mTextPaint.getTextBounds(title,0,title.length(),mRect);
int x = left + (rectWidth - mRect.width())/2;
//int x = left + UIUtils.dip2px(20);
int y = bottom - (height - mRect.height())/2;
canvas.drawText(title,x,y,mTextPaint);
}
@Override
protected void onDrawDotItem(Canvas canvas, int cx, int cy, int radius, int pos) {
ITimeItem item = timeItems.get(pos);
mDotPaint.setColor(item.getColor());
canvas.drawCircle(cx,cy,UIUtils.dip2px(6),mDotPaint);
}
}
第二步 创建数据
创建数据类型的时候需要实现ITimeItem接口：
public class TimeItem implements ITimeItem {
private String name;
private String title;
private String detail;
private int color;
private int res;
// 构造方法省略
// ... 省略get 和 set 方法
// 得到当前的标题
@Override
public String getTitle() {
return title;
}
// 时间点的颜色
@Override
public int getColor() {
return color;
}
// 时间点的资源文件
// 如果采用的是绘制资源文件
@Override
public int getResource() {
return res;
}
// ...
}
第三步 初始化RecyclerView
构建RecyclerView对象，并设置布局方式为LinearLayoutManager以及初始化适配器，这是使用RecyclerView的必备知识，相信你早就烂熟于心了。
第四步 创建时间轴
// 初始化数据
// 仅需要知道该行代码作用即可
List<TimeItem> timeItems = TimeItem.initStepInfo();
// 适配器更新数据
// 适配器已经被我封装过
mAdapter.addAllData(timeItems);
// 构建时间轴
TimeLine decoration = new SingleTimeLineDecoration.Builder(getContext(), timeItems) // 添加数据
// 标题颜色 和 标题文本的大小为20sp
.setTitle(Color.parseColor("#ffffff"), 20)
// 标题位置设置为子视图上边，所占高度为40dp
.setTitleStyle(SingleTimeLineDecoration.FLAG_TITLE_TYPE_TOP, 40)
// 时间线风格 绘制时间线区域的宽度（非时间线宽度）为50dp
.setLine(SingleTimeLineDecoration.FLAG_LINE_DIVIDE, 50, Color.parseColor("#8d9ca9"))
// 时间点的样式 此处为自绘制
.setDot(SingleTimeLineDecoration.FLAG_DOT_DRAW)
// 相同的标题隐藏
.setSameTitleHide()
// 设置实现的时间轴
.build(StepSTL.class);
mRecyclerView.addItemDecoration(decoration);
这步完成之后就可以正常显示了，效果就是上述的活动步骤的那张图：
第五步 更新、删除、添加
如果需要对数据进行增删查改，那么在进行这些操作之后，你需要对TimeLine中的数据进行更新操作，它同样支持增删改。
| 函数 | 解释 |
|---|---|
addItems | 增加数据 |
replace | 替换数据 |
remove | 清除数据 |
2. 双列时间轴
双列时间轴与单列时间轴的区别还是很大的，我会一一说明。
第一步 继承DoubleTimeLineDecoration
这里你需要注意的是当前绘制标题是在两列布局中的左列还是右列，需要处理的方法基本同SingleTimeLineDecoration，不过处理的方法来自DoubleTimeLineDecoration。
第二步 创建数据
同SingleTimeLineDecoration。
第三步 初始化RecyclerView
这里再用线性布局显然是行不通的，需要改为我写的DoubleSideLayoutManager（两侧布局）：
mRecyclerView.setLayoutManager(new DoubleSideLayoutManager(DoubleSideLayoutManager.START_LEFT));
其他同SingleTimeLineDecoration。
第四步 创建时间轴
设置方法同SingleTimeLineDecoration。不过需要注意的是两列时间轴不支持：
- 将标题放置在子视图上侧
- 相同标题隐藏
FLAG_LINE_DIVIDE风格的时间线
第五步 更新、删除、添加
同SingleTimeLineDecoration。
以上就是单列时间轴和双列时间轴的配置了。
三、更多信息
经过上面了解，我相信你已经认识到，TimeLine能做的不仅仅是一个时间轴，与流程、步骤相关的它一样可以胜任。不过需要指出的是，TimeLine做的只是为你提供时间轴的布局逻辑，具体时间点和标题的绘制仍需你自己实现，更多的绘制方案以及配置信息还需查看项目地址：
github.com/mCyp/Orient…
除此以外，该项目中还集成了一些其他有趣的控件，欢迎使用。
如果你对DoubleSideLayoutManager（两侧布局）感兴趣，还可以查看：
最后，感谢你的阅读~
