Android RecyclerView使用ItemDecoration刻画时间线/时间轴/时光轴timeline

在Android开发中时间线/时间轴/时光轴现在很常见，尤其涉及到进度、物流信息、进展和时态发展的图表信息等，时间线/时间轴/时光轴生动表现这一类需求。
在RecyclerView的基础上，我使用ItemDecoration刻画一条在RecyclerView左侧的时间线/时间轴/时光轴。运行结果如图：


在顶部显示一张与众不同的icon，区别表示事件或者进展已经完成。
下面是代码。

RVActivity.java是本例运行的Activity：

package zhangphil.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class RVActivity extends AppCompatActivity {
    RecyclerViewAdapter mAdapter;
    private ArrayList<Integer> mItems;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.rv_activity);

        mItems = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            mItems.add(i);
        }

        RecyclerView mRecyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);

        mAdapter = new RecyclerViewAdapter();
        mRecyclerView.setAdapter(mAdapter);

        mRecyclerView.addItemDecoration(new RVItemDecoration(getApplicationContext()));
    }

    private class RecyclerViewAdapter extends RecyclerView.Adapter<MyVH> {

        @NonNull
        @Override
        public MyVH onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(getApplicationContext()).inflate(R.layout.rv_item, parent, false);
            return new MyVH(view);
        }

        @Override
        public void onBindViewHolder(@NonNull MyVH holder, int position) {
            holder.title.setText("时间:" + position);
            holder.content.setText("事件进度 -> " + mItems.get(position));
            holder.indicator_icon.setImageResource(position == 0 ? R.mipmap.ic_launcher : R.drawable.ic_launcher_background);
        }

        @Override
        public int getItemCount() {
            return mItems.size();
        }
    }

    private class MyVH extends RecyclerView.ViewHolder {
        public TextView title;
        public TextView content;
        public ImageView indicator_icon;

        public MyVH(View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.title);
            content = itemView.findViewById(R.id.content);
            indicator_icon = itemView.findViewById(R.id.indicator_icon);
        }
    }

    private class RVItemDecoration extends RecyclerView.ItemDecoration {

        private Paint mPaint;

        public RVItemDecoration(Context context) {
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setStrokeWidth(2); //时间轴线的宽度。
            mPaint.setColor(Color.BLUE); //时间轴线的颜色。
        }

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

            int childCount = parent.getChildCount();

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

                //int index = parent.getChildAdapterPosition(view);

                float left = dip2px(getApplicationContext(), 14 + 10);
                float bottom = view.getBottom();

                c.drawLine(left, dip2px(getApplicationContext(), (50 - 20) / 2), left, bottom, mPaint);
            }
        }
    }

    public static int dip2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

其中R.layout.rv_activity.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

其实就只有一个Android的RecyclerView。

RecyclerView的Adapter用到的item布局R.layout.rv_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="14dp"
    android:paddingRight="14dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/indicator_icon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center_vertical"
            android:scaleType="centerInside"
            android:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="10dp"
            android:background="@android:color/holo_blue_bright"
            android:gravity="left|center_vertical"
            android:text="时间"
            android:textColor="@android:color/white"
            android:textSize="26dp" />

    </LinearLayout>

    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dp"
        android:layout_marginLeft="30dp"
        android:text="事件进度"
        android:textColor="@android:color/darker_gray"
        android:textSize="14dp" />

</LinearLayout>