Android使用RecyclerView实现时间轴，物流进度展示

前言

今天在网上看到一篇文章中有个时间轴图片，很是符合我的审美，在能表现出要表达给用户的信息外，极尽简约，很漂亮，打算实现一下。好吧，文章www.jianshu.com/p/d03f994b6…已经给出了实现方式，再copy一遍？No，换一种思路吧。

我的效果

1.只有1条发货数据

2.多于2条数据

右边的实现

右边的实际就是一个普通的不能再普通的RecyclerView了，这里不再赘述。

左边的时间轴实现

 mRecyclerView.addItemDecoration(new TimeLineItemDecoration());

原文中的效果是通过item实现的，我这里换了一个思路，使用TimeLineItemDecoration来做的：

public class TimeLineItemDecoration extends RecyclerView.ItemDecoration {

    private int mCircleSize = 14;//圆圈的半径
    private Paint mPaint;//画笔
    private int mPaintSize = 6;//画笔宽度
    private String mPaintColor = "#B8B8B8";//画笔默认颜色

    public TimeLineItemDecoration() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(mPaintSize);
        mPaint.setColor(Color.parseColor(mPaintColor));
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        Rect rect = new Rect(200, 0, 0, 0);//使item从outRect中右移200px
        outRect.set(rect);
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(canvas, parent, state);

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);

            int left = child.getLeft();
            int top = child.getTop();
            int bottom = child.getBottom();
            int right = child.getRight();

            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            int bottomMargin = params.bottomMargin;//防止在item根布局中设置marginTop和marginBottom
            int topMargin = params.topMargin;

            int leftX = left / 2;//轴线的x轴坐标
            int height = child.getHeight();//item的高度，不包含Margin

            if (childCount==1){
                canvas.drawLine(leftX, top, leftX, bottom - height / 2, mPaint);
            }else {
                if (i == 0) {
                    canvas.drawLine(leftX, top + height / 2, leftX, bottom + bottomMargin, mPaint);
                } else if (i == childCount - 1) {
                    canvas.drawLine(leftX, top - topMargin, leftX, bottom - height / 2, mPaint);
                } else {
                    canvas.drawLine(leftX, top - topMargin, leftX, bottom - height / 2, mPaint);
                    canvas.drawLine(leftX, top + height / 2, leftX, bottom + bottomMargin, mPaint);
                }
            }
            canvas.drawCircle(leftX, top + height / 2, mCircleSize, mPaint);
        }
    }
}

涉及文件

只用到了红框中的文件，可以copy到自己的项目中试试。欢迎浏览提出issue。

资源下载

点击下载