Android仿淘宝物流追踪

github地址（欢迎下载完整Demo）

https://github.com/zhouxu88/LogisticsDemo

今天跟大家聊聊我心目中的物流追踪效果，效果图如下，有需要的朋友，可以直接带走，实现也没有想象中的那么复杂，特别是左边那个时间轴线，没那么复杂

仿淘宝物流.jpg

拿到这个图，大家首先想到的是这是一个RecyclerView来实现，可能比较疑惑的地方是那个红色的小圆点和灰色的小圆点，以及穿过圆点之间的那条竖线，最重要的是竖线的高度还是自适应的，并不是固定高度，老铁，自己说，有没有戳中你的痛点，要是能把这个时间轴线的问题解决了，你也可以说我上我也行。

看了网上的，有人说要什么自定义View啦，又是绘制，又是测量，其实没那么复杂，下面说说我是怎么解决的。想了想,可以各个view的相对位置来实现啊,比如,那个圆点也可以用imageview实现啊,唯一不同的就是竖线的view是穿过灰色的圆view的,大家有没有发现，除了第一个圆点意外的其他圆点，都是在那条水平的分割线下固定高度的位置（我这里好像是10dp）的左侧 ，那我完全可以在这个分割线下方弄一个空的View，那么穿过圆孔的这条竖线不就是在这个空的View的上方，在圆点的下方，并且高度是match，这样，通过一个相对布局，这个时间轴的问题也解决了

item_trace

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 mTraceList; //物流追踪列表的数据源
    private TraceAdapter mAdapter;

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

        initData();
        initRecyclerView();
    }

    //加载物流信息的数据，这里是模拟一些假数据
    private void initData() {
        mTraceList = new ArrayList<>();
        mTraceList.add(new Trace(0, "2017年6月18日 上午12:04:01", "在湖北武汉洪山区光谷公司长江社区便民服务站进行签收扫描，快件已被 已签收 签收"));
        mTraceList.add(new Trace(1, "2017年6月18日 上午11:57:25", "在湖北武汉洪山区光谷公司长江社区便民服务站进行派件扫描；派送业务员：老王；联系电话：17786550311在湖北武汉洪山区光谷公司长江社区便民服务站进行派件扫描；派送业务员：老王；联系电话：17786550311"));
        mTraceList.add(new Trace(1, "2017年6月17日 下午4:43:29", "在湖北武汉洪山区光谷公司进行快件扫描，将发往：湖北武汉洪山区光谷公司长江社区便民服务站"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午9:11:21", "从湖北武汉分拨中心发出，本次转运目的地：湖北武汉洪山区光谷公司"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午1:53:14", "在湖南长沙分拨中心进行装车扫描，即将发往：湖北武汉分拨中心"));
        mTraceList.add(new Trace(1, "2017年6月17日 上午1:50:18", "在分拨中心湖南长沙分拨中心进行称重扫描"));
        mTraceList.add(new Trace(1, "2017年6月16日 上午11:27:58", "在湖南隆回县公司进行到件扫描"));
    }

    //初始化显示物流追踪的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;


/**
 * 追踪物流列表的适配器
 * 

 * 作者： 周旭 on 2017/5/24/0024.
 * 邮箱：[email protected]
 * 博客：http://www.jianshu.com/u/56db5d78044d
 */

public class TraceAdapter extends RecyclerView.Adapter {

    private static final int TYPE_CURR = 0; //当前
    private static final int TYPE_NORMAL = 1; //历史记录
    private Context mContext;
    private List mList;
    private LayoutInflater inflater;

    public TraceAdapter(Context mContext, List 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) {
        //设置相关数据
        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) {
            //最后一条数据，隐藏时间轴的竖线和水平的分割线
            holder.timeLineView.setVisibility(View.INVISIBLE);
            holder.dividerLineView.setVisibility(View.INVISIBLE);
        }
    }


    public class TraceViewHolder extends RecyclerView.ViewHolder {

        private TextView acceptTimeTv;  //接收时间
        private TextView acceptStationTv;  //接收地点
        private ImageView dotIv; //当前位置
        private View dividerLineView; //时间轴的竖线
        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);
        }
    }
}