AndroidUI：用ItemDecoration实现物流时间轴

time_line.png

github 源码

昨天看到有人实现了这个ui,但是主要在布局里写的。当然我之前也是在布局里写的，但是貌似见过用ItemDecoration实现的。于是我评论说让他用ItemDecoration试一下，他回复我想多了。好吧，不管想的多不多，我自己试下就知道可行不可行了。当然是可行的，不然我也不会写这篇文章了。还发现了这样写的优点。

• 布局简单
• 可复用
• 对ItemDecoration更了解

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="15dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/tv_describe"
        tools:text="客户签收"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_marginTop="5dp"
        android:textSize="12sp"
        tools:text="2018-6-1"
        android:id="@+id/tv_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

布局是再简单不过了（用布局实现过的心里清楚）。

ItemDecoration

package com.xunevermore.timelinedecor;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.View;

/**
 * Created by Administrator on 2018/6/1 0001.
 * com.xunevermore.timelinedecor
 */

public class TimelineDecoration extends RecyclerView.ItemDecoration {


    private int width;//时间轴宽度
    private int top;//圆距离item顶部高度
    private Drawable goingDrawable;//绿色对勾圆
    private int goingDrawableSize;//绿色对勾圆的直径
    private int dividerHeight;//线条粗细

    private int lintColor = 0xff999999;//线条颜色
    private Paint mPaint;

    private int ovalRadius = 12;//灰色圆的半径


    public TimelineDecoration(int width, int top, Drawable goingDrawable,int goingDrawableSize, int dividerHeight) {
        this.width = width;
        this.top = top;
        this.goingDrawableSize = goingDrawableSize;
        this.goingDrawable = goingDrawable;
        this.dividerHeight = dividerHeight;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.set(width, 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() + width / 2;
            c.drawRect(left,
                    i==0?this.top+goingDrawableSize:top,//第一个item线有空一段
                    left + dividerHeight,
                    bottom + dividerHeight,
                    mPaint);

            //小圆点

            int ovalCenterX = top + this.top + ovalRadius;
            if (i == 0) {
                goingDrawable.setBounds(left-goingDrawableSize/2,top+this.top,left+goingDrawableSize/2,top+this.top+goingDrawableSize);
                goingDrawable.draw(c);
            } else {
                c.drawCircle(left, ovalCenterX, ovalRadius, mPaint);
            }


            //分割线
            mPaint.setColor(lintColor);
            c.drawRect(parent.getPaddingLeft() + width, bottom, parent.getWidth() - parent.getPaddingRight(), bottom + dividerHeight, mPaint);


        }

    }
}

Activity

package com.xunevermore.timelinedecor;

import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.widget.TextView;

import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.Arrays;

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),
                ContextCompat.getDrawable(this,R.drawable.ic_check_circle),
                getDimen(R.dimen.time_going_size),
                1));
        recyclerView.setAdapter(adapter);

    }

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


}

Ok,完事了。