用ItemDecoration實作物流時間軸

1、效果圖

2、TimelineDecoration

自定義ItemDecoration ，繪制虛線和圓點；

public class TimelineDecoration extends RecyclerView.ItemDecoration {
    private int leftWidth;//時間軸寬度
    private int marginTop;//圓距離item頂部高度
    private int dividerHeight;//線條粗細
    private int ovalRadius = 12;//灰色圓的半徑

    private Paint linePaint;
    private Paint circlePaint;

    public TimelineDecoration(int leftWidth, int marginTop, int dividerHeight, int lineColor) {
        this.leftWidth = leftWidth;
        this.marginTop = marginTop;
        this.dividerHeight = dividerHeight;
        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        linePaint.setColor(lineColor);
        //設定畫直線格式
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setAntiAlias(true);
        //設定虛線效果
        linePaint.setPathEffect(new DashPathEffect(new float[]{15f, 10f}, 0));
        linePaint.setStrokeWidth(2);//設定畫筆寬度 ，機關px

        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        circlePaint.setColor(lineColor);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.set(leftWidth, 0, 0, dividerHeight);
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {

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

            int top = child.getTop();
            int bottom = child.getBottom();
            int left = parent.getPaddingLeft() + leftWidth / 2;
            //圓點起始位置
            int ovalCenterY = top + marginTop + ovalRadius;

            //豎直線 https://blog.csdn.net/qq_33210042/article/details/105187871
            Path linePath = new Path();
            if (i == 0) {
                linePath.moveTo(left, ovalCenterY);
                linePath.lineTo(left + dividerHeight, bottom + dividerHeight);
            } else if (i == childCount - 1) {
                linePath.moveTo(left, top);
                linePath.lineTo(left + dividerHeight, ovalCenterY + dividerHeight);
            } else {
                linePath.moveTo(left, top);
                linePath.lineTo(left + dividerHeight, bottom + dividerHeight);
            }
            c.drawPath(linePath, linePaint);

            //繪制小圓點
            c.drawCircle(left, ovalCenterY, ovalRadius, circlePaint);

            Log.d("caowj", left + "," + top + "," + bottom + "," + ovalCenterY);

            //橫向分割線
            c.drawLine(parent.getPaddingLeft() + leftWidth, bottom, parent.getWidth() - parent.getPaddingRight(), bottom + dividerHeight, linePaint);
        }
    }
}
           

3、調用方式

RecyclerView正常設定addItemDecoration();

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        BaseQuickAdapter<String,BaseViewHolder> adapter = new BaseQuickAdapter<String, BaseViewHolder>(R.layout.item_transport,
                Arrays.asList(getResources().getStringArray(R.array.transport_list))) {
            @Override
            protected void convert(BaseViewHolder helper, String item) {
                TextView tvDescribe = helper.getView(R.id.tv_describe);
                TextView tvTime = helper.getView(R.id.tv_time);
                tvDescribe.setText(item);
                tvTime.setText("2018-06-01 12:00");

                int position = helper.getAdapterPosition();
                tvDescribe.setTextColor(position==0?0xff4caf65:0xff999999);
                tvTime.setTextColor(position==0?0xff4caf65:0xff999999);
            }
        };

        recyclerView.addItemDecoration(new TimelineDecoration(getDimen(R.dimen.time_line_width),
                getDimen(R.dimen.time_line_top), 1, getResources().getColor(R.color.lineColor)));
        recyclerView.setAdapter(adapter);
    }

    private int getDimen(int dimeRes){
        return (int) getResources().getDimension(dimeRes);
    }
}
           

參考：https://www.jianshu.com/p/64eb1fbea2d5