花式实现时间轴，样式由你来定！

前言

由于公司业务常常会涉及到流程，因此使用相似时间轴的控件是不可避免。而且公司一直是使用的平板，单列时间轴已不足以胜任，故一直使用双列的时间轴TimeLine，这是一个借助2列的瀑布流布局的RecyclerView完成的时间轴，已知足我司平常的需求，不过，使用瀑布流带来的烦恼是：

• 位置很差控制：时间轴的每一个点的距离不可以均匀分布（不过这也是瀑布流的优势，充分利用空间）
• 选择单一：若是你的项目既有单列时间轴，又想集成双列时间轴，这种状况下就须要集成两个第三方库
• 样式单一：多数时间轴库的样式选择过于单一，不可以本身定制

为了解决以上的痛点，我提供了一种仍基于RecyclerView的新解决方案，该方案已被我集成在Orient-Ui中，如下是我基于此方案自定义实现的几个例子：

两列时间轴	单列时间轴-左侧标题	单列时间轴-顶部标题

1、介绍

为何说Orient-Ui中的TimeLine灵活呢？由于该方案具备以下特色：

• 主体样式包括单列时间轴和双列时间轴：单列时间轴使用的RecyclerView中的LinearLayoutManager（线性布局），双列时间轴则使用的Orient-Ui中的DoubleSideLayoutManager（两侧布局）
• 内容样式可控性强：能够轻松控制时间轴的点绘制方式、时间轴中的标题位置和内容、以及时间轴中的时间线等
• 样式高度的自定义：须要本身在给定的区域内绘制时间标题和时间点，这也是该方案灵活的缘由

上述的特色的描述可能不是特别清晰，咱们借助两张图加以说明：

图片	图片

左右两边分别表明着双列时间轴和单列时间轴，其中dot area和title area是须要实现绘制的区域，其余的例如标题放在RecyclerView子视图的上侧仍是仍是左侧、标题的颜色、时间点采用的资源文件绘制仍是自绘制、时间线的风格及占用大小等须要建立的时候进行设置。

2、使用

我会以上述图片为例，分别介绍单例时间轴和双列时间轴。不过在此以前，你须要在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。

以上就是单列时间轴和双列时间轴的配置了。

3、更多信息

通过上面了解，我相信你已经认识到，TimeLine能作的不只仅是一个时间轴，与流程、步骤相关的它同样能够胜任。不过须要指出的是，TimeLine作的只是为你提供时间轴的布局逻辑，具体时间点和标题的绘制仍需你本身实现，更多的绘制方案以及配置信息还需查看项目地址： github.com/mCyp/Orient…

除此之外，该项目中还集成了一些其余有趣的控件，欢迎使用。

若是你对DoubleSideLayoutManager（两侧布局）感兴趣，还能够查看：

《抽丝剥茧RecyclerView - LayoutManager》

最后，感谢你的阅读~