物流配送頁面。主要使用RecycleView實現。通過判斷將條目的第一條進行特殊處理。日後複製貼上備用。效果圖如下：

可以通過各個view的相對位置來實現啊,比如那一條豎線可以用imageview來實現,那個圓點也可以用imageview實現啊,唯一不同的就是豎線的view是穿過灰色的圓view的,而position為0的豎線是不穿過藍色的圓view的,這個也有辦法搞定,在adapter裡面單獨處理,設定他們的相對位置!

1. 先做兩個shape圓。

一個灰色的一個紅色的。（也可以使用圖片資源）
紅色圓 logistics_shape_circle_red:

<?xml version="1.0" encoding="utf-8"?>
 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff4143" />
    <stroke
        android:width="2dp"
        android:color="#ff7471" />
</shape>

灰色圓 shape_circle_logistics_gray:

<?xml version="1.0" encoding="utf-8"?>
 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#dddddd" />
</shape>

2. 設定每個條目的佈局。

logistics_recycle_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="horizontal">

    <!--左邊 時間-->
    <TextView
        android:id="@+id/tv_time"
        android:layout_width="85dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="14dp"
        android:gravity="center"
        android:lines="2"
        android:text="2016-10-12 08:02:18"
        android:textColor="@color/gray9"
        android:textSize="16sp" />
    <!--中間 時間軸-->
    <RelativeLayout
        android:id="@+id/rl_left"
        android:layout_width="35dp"
        android:layout_height="86dp">

        <ImageView
            android:id="@+id/iv_status"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerInParent="true" />

        <ImageView
            android:id="@+id/iv_line"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_below="@id/iv_status"
            android:layout_centerInParent="true"
            android:src="#dddddd" />
    </RelativeLayout>

    <!--右邊 資訊-->
    <TextView
        android:id="@+id/tv_status"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/rl_left"
        android:autoLink="email|phone|web"
        android:text="正在派送途中,請您準備簽收(派件人:張小建,電話:18513394441)"
        android:textColor="@color/gray9" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/tv_time"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/rl_left"
        android:background="#9b9b9b"
        android:visibility="gone" />

</LinearLayout>

3. Adapter程式碼

LogisticsAdapter.xml

public class LogisticsAdapter0 extends RecyclerView.Adapter<LogisticsAdapter0.LogisticsAdapterHolder> {

    private Context context;
    private LayoutInflater mLayoutInflater;
    private LogisticsJson bean;

    public LogisticsAdapter0(Context context, LogisticsJson bean) {
        this.context = context;
        this.mLayoutInflater = LayoutInflater.from(context);
        this.bean = bean;
    }

    @Override
    public int getItemCount() {
        return bean.getData().getList().size();
    }

    @Override
    public LogisticsAdapter0.LogisticsAdapterHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new LogisticsAdapter0.LogisticsAdapterHolder(mLayoutInflater.inflate(R.layout.logistics_recycle_item, parent, false));
    }

    @Override
    public void onBindViewHolder(LogisticsAdapter0.LogisticsAdapterHolder holder, int position) {

        try {
            holder.tv_status.setText(bean.getData().getList().get(position).getContext());//訂單狀態
            holder.tv_time.setText(bean.getData().getList().get(position).getTime());//時間

            if (position == 0) {
                //紅色的圓點
                holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_red);
                RelativeLayout.LayoutParams pointParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 20), DensityUtil.dp2px(context, 20));
                pointParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_status.setLayoutParams(pointParams);

                holder.tv_time.setTextColor(context.getResources().getColor(R.color.newPrimary));
                holder.tv_status.setTextColor(context.getResources().getColor(R.color.newPrimary));

                //灰色的豎線
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線置於圓點下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            } else {
//                holder.iv_status.setBackgroundResource(R.mipmap.ic_logistics_bottom);
                holder.iv_status.setImageResource(R.drawable.logistics_shape_circle_gray);
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 10), DensityUtil.dp2px(context, 10));
                lp.addRule(RelativeLayout.CENTER_IN_PARENT);

                holder.iv_status.setLayoutParams(lp);

                holder.tv_time.setTextColor(context.getResources().getColor(R.color.textColor_9b));
                holder.tv_status.setTextColor(context.getResources().getColor(R.color.textColor_9b));

                //灰色的豎線
                RelativeLayout.LayoutParams lineParams = new RelativeLayout.LayoutParams(DensityUtil.dp2px(context, 1), ViewGroup.LayoutParams.MATCH_PARENT);
//                lineParams.addRule(RelativeLayout.BELOW, R.id.iv_status);//讓直線置於圓點下面
                lineParams.addRule(RelativeLayout.CENTER_IN_PARENT);
                holder.iv_line.setLayoutParams(lineParams);

            }

        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    //自定義的ViewHolder，持有每個Item的的所有介面元素
    public static class LogisticsAdapterHolder extends RecyclerView.ViewHolder {

        ImageView iv_status;
        TextView tv_status;
        TextView tv_time;
        ImageView iv_line;

        LogisticsAdapterHolder(View view) {
            super(view);
            iv_line = (ImageView) view.findViewById(R.id.iv_line);
            iv_status = (ImageView) view.findViewById(R.id.iv_status);
            tv_status = (TextView) view.findViewById(R.id.tv_status);
            tv_time = (TextView) view.findViewById(R.id.tv_time);

        }
    }
}

4. 最後，Activity裡面設定一下

LogisticsJson logisticsJson = new Gson().fromJson(json, LogisticsJson.class);
LogisticsAdapter logisticsAdapter = new LogisticsAdapter(LogisticsActivity.this, logisticsJson);
rvLogisticsDetail.setAdapter(logisticsAdapter);

再給一個測試的json，自己生成Gson 的bean類吧！

{
    "code": 1,
    "message": "Success",
    "data": {
        "id": "1",
        "state": "3",
        "num": "71265042088396",
        "time": "2018-03-11 12:55:09",
        "com_name": "匯通",
        "list": [
            {
                "time": "2018-03-02 08:46:40",
                "context": "秦皇島市|秦皇島市【秦皇島市區五部】，八棟西霞超市 已簽收"
            }， {
                "time": "2018-03-02 08:46:40",
                "context": "秦皇島市|秦皇島市【秦皇島市區五部】，八棟西霞超市 已簽收"
            }
        ]
    }
}

大功告成！複製貼上大法好~~