github地址（歡迎下載完整Demo）

https://github.com/zhouxu88/LogisticsDemo

今天跟大家聊聊我心目中的物流追蹤效果逗载，效果圖如下，有需要的朋友烦味，可以直接帶走，實(shí)現(xiàn)也沒(méi)有想象中的那么復(fù)雜芋忿，特別是左邊那個(gè)時(shí)間軸線照捡，沒(méi)那么復(fù)雜

仿淘寶物流.jpg

拿到這個(gè)圖，大家首先想到的是這是一個(gè)RecyclerView來(lái)實(shí)現(xiàn)吃引，可能比較疑惑的地方是那個(gè)紅色的小圓點(diǎn)和灰色的小圓點(diǎn)，以及穿過(guò)圓點(diǎn)之間的那條豎線刽锤，最重要的是豎線的高度還是自適應(yīng)的镊尺，并不是固定高度，老鐵并思，自己說(shuō)庐氮，有沒(méi)有戳中你的痛點(diǎn)，要是能把這個(gè)時(shí)間軸線的問(wèn)題解決了宋彼，你也可以說(shuō)我上我也行弄砍。

看了網(wǎng)上的，有人說(shuō)要什么自定義View啦输涕，又是繪制音婶，又是測(cè)量，其實(shí)沒(méi)那么復(fù)雜莱坎，下面說(shuō)說(shuō)我是怎么解決的衣式。想了想,可以各個(gè)view的相對(duì)位置來(lái)實(shí)現(xiàn)啊,比如,那個(gè)圓點(diǎn)也可以用imageview實(shí)現(xiàn)啊,唯一不同的就是豎線的view是穿過(guò)灰色的圓view的,大家有沒(méi)有發(fā)現(xiàn)，除了第一個(gè)圓點(diǎn)意外的其他圓點(diǎn)檐什，都是在那條水平的分割線下固定高度的位置（我這里好像是10dp）的左側(cè) 碴卧，那我完全可以在這個(gè)分割線下方弄一個(gè)空的View，那么穿過(guò)圓孔的這條豎線不就是在這個(gè)空的View的上方乃正，在圓點(diǎn)的下方螟深，并且高度是match，這樣烫葬，通過(guò)一個(gè)相對(duì)布局，這個(gè)時(shí)間軸的問(wèn)題也解決了

item_trace

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff">

    <ImageView
        android:id="@+id/dot_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@mipmap/dot_red" />


    <!--快件接收站點(diǎn)-->
    <TextView
        android:id="@+id/accept_station_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/dot_iv"
        android:layout_marginEnd="15dp"
        android:layout_marginStart="15dp"
        android:layout_toEndOf="@id/dot_iv"
        android:textColor="#666666"
        android:textSize="14sp"
        tools:text="快件已從杭州中轉(zhuǎn)部發(fā)出" />
    <!--快件接收時(shí)間-->
    <TextView
        android:id="@+id/accept_time_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/accept_station_tv"
        android:layout_below="@id/accept_station_tv"
        android:layout_marginEnd="15dp"
        android:layout_marginTop="10dp"
        android:textColor="#999999"
        android:textSize="12sp"
        tools:text="2017-05-15 10:59:04" />

    <!--分割線-->
    <View
        android:id="@+id/divider_line_view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignStart="@id/accept_time_tv"
        android:layout_below="@id/accept_time_tv"
        android:layout_marginBottom="15dp"
        android:layout_marginTop="15dp"
        android:background="#eeeeee" />

    <View
        android:id="@+id/empty_view"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:layout_below="@id/divider_line_view"
        android:layout_marginStart="15dp" />


    <!--時(shí)間軸的豎線-->
    <View
        android:id="@+id/time_line_view"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_above="@id/empty_view"
        android:layout_alignStart="@id/dot_iv"
        android:layout_below="@id/dot_iv"
        android:layout_marginStart="7dp"
        android:background="#eeeeee" />


</RelativeLayout>

MainActivity

package com.zx.logisticsdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.OrientationHelper;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

/**
 * 仿淘寶物流追蹤效果
 */
public class MainActivity extends AppCompatActivity {

    private RecyclerView traceRv; //物流追蹤列表
    private List<Trace> mTraceList; //物流追蹤列表的數(shù)據(jù)源
    private TraceAdapter mAdapter;

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

        initData();
        initRecyclerView();
    }

    //加載物流信息的數(shù)據(jù)凡蜻，這里是模擬一些假數(shù)據(jù)
    private void initData() {
        mTraceList = new ArrayList<>();
        mTraceList.add(new Trace(0, "2017年6月18日 上午12:04:01", "在湖北武漢洪山區(qū)光谷公司長(zhǎng)江社區(qū)便民服務(wù)站進(jìn)行簽收掃描搭综，快件已被 已簽收 簽收"));
        mTraceList.add(new Trace(1, "2017年6月18日 上午11:57:25", "在湖北武漢洪山區(qū)光谷公司長(zhǎng)江社區(qū)便民服務(wù)站進(jìn)行派件掃描；派送業(yè)務(wù)員：老王划栓；聯(lián)系電話：17786550311在湖北武漢洪山區(qū)光谷公司長(zhǎng)江社區(qū)便民服務(wù)站進(jìn)行派件掃描兑巾；派送業(yè)務(wù)員：老王；聯(lián)系電話：17786550311"));
        mTraceList.add(new Trace(1, "2017年6月17日 下午4:43:29", "在湖北武漢洪山區(qū)光谷公司進(jìn)行快件掃描忠荞，將發(fā)往：湖北武漢洪山區(qū)光谷公司長(zhǎng)江社區(qū)便民服務(wù)站"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午9:11:21", "從湖北武漢分撥中心發(fā)出蒋歌，本次轉(zhuǎn)運(yùn)目的地：湖北武漢洪山區(qū)光谷公司"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午1:53:14", "在湖南長(zhǎng)沙分撥中心進(jìn)行裝車掃描帅掘，即將發(fā)往：湖北武漢分撥中心"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午1:50:18", "在分撥中心湖南長(zhǎng)沙分撥中心進(jìn)行稱重掃描"));
        mTraceList.add(new Trace(1, "2017年6月16日 上午11:27:58", "在湖南隆回縣公司進(jìn)行到件掃描"));
    }

    //初始化顯示物流追蹤的RecyclerView
    private void initRecyclerView() {
        traceRv = (RecyclerView) findViewById(R.id.traceRv);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this, OrientationHelper.VERTICAL, false);
        mAdapter = new TraceAdapter(this, mTraceList);
        traceRv.setLayoutManager(layoutManager);
        traceRv.setAdapter(mAdapter);
    }
}

Adapter

package com.zx.logisticsdemo;

import android.content.Context;
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.List;


/**
 * 追蹤物流列表的適配器
 * <p>
 * 作者： 周旭 on 2017/5/24/0024.
 * 郵箱：374952705@qq.com
 * 博客：http://www.reibang.com/u/56db5d78044d
 */

public class TraceAdapter extends RecyclerView.Adapter<TraceAdapter.TraceViewHolder> {

    private static final int TYPE_CURR = 0; //當(dāng)前
    private static final int TYPE_NORMAL = 1; //歷史記錄
    private Context mContext;
    private List<Trace> mList;
    private LayoutInflater inflater;

    public TraceAdapter(Context mContext, List<Trace> mList) {
        this.mContext = mContext;
        this.mList = mList;
        inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

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

    @Override
    public TraceViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new TraceViewHolder(inflater.inflate(R.layout.item_trace, parent, false));
    }

    @Override
    public void onBindViewHolder(TraceViewHolder holder, int position) {
        //設(shè)置相關(guān)數(shù)據(jù)
        Trace trace = mList.get(position);
        int type = trace.getType();
        if (type == TYPE_CURR) {
            holder.acceptStationTv.setTextColor(mContext.getResources().getColor(R.color.color_c03));
            holder.dotIv.setImageResource(R.mipmap.dot_red);
        } else if (type == TYPE_NORMAL) {
            holder.acceptStationTv.setTextColor(mContext.getResources().getColor(R.color.color_6));
            holder.dotIv.setImageResource(R.mipmap.dot_black);
        }
        holder.acceptTimeTv.setText(trace.getAcceptTime());
        holder.acceptStationTv.setText(trace.getAcceptStation());
        if (position == mList.size() - 1) {
            //最后一條數(shù)據(jù)，隱藏時(shí)間軸的豎線和水平的分割線
            holder.timeLineView.setVisibility(View.INVISIBLE);
            holder.dividerLineView.setVisibility(View.INVISIBLE);
        }
    }


    public class TraceViewHolder extends RecyclerView.ViewHolder {

        private TextView acceptTimeTv;  //接收時(shí)間
        private TextView acceptStationTv;  //接收地點(diǎn)
        private ImageView dotIv; //當(dāng)前位置
        private View dividerLineView; //時(shí)間軸的豎線
        private View timeLineView; //水平的分割線


        public TraceViewHolder(View itemView) {
            super(itemView);
            acceptTimeTv = (TextView) itemView.findViewById(R.id.accept_time_tv);
            acceptStationTv = (TextView) itemView.findViewById(R.id.accept_station_tv);
            dotIv = (ImageView) itemView.findViewById(R.id.dot_iv);
            dividerLineView = itemView.findViewById(R.id.divider_line_view);
            timeLineView = itemView.findViewById(R.id.time_line_view);
        }
    }
}