Android怎么實現仿淘寶物流追蹤功能

這篇文章給大家分享的是有關Android怎么實現仿淘寶物流追蹤功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

效果圖

拿到這個圖，大家首先想到的是這是一個RecyclerView來實現，可能比較疑惑的地方是那個紅色的小圓點和灰色的小圓點，以及穿過圓點之間的那條豎線，最重要的是豎線的高度還是自適應的，并不是固定高度，老鐵，自己說，有沒有戳中你的痛點，要是能把這個時間軸線的問題解決了，你也可以說我上我也行。

看了網上的，有人說要什么自定義View啦，又是繪制，又是測量，其實沒那么復雜，下面說說我是怎么解決的。想了想,可以各個view的相對位置來實現啊,比如,那個圓點也可以用imageview實現啊,唯一不同的就是豎線的view是穿過灰色的圓view的,大家有沒有發現，除了第一個圓點意外的其他圓點，都是在那條水平的分割線下固定高度的位置（我這里好像是10dp）的左側 ，那我完全可以在這個分割線下方弄一個空的View，那么穿過圓孔的這條豎線不就是在這個空的View的上方，在圓點的下方，并且高度是match，這樣，通過一個相對布局，這個時間軸的問題也解決了

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" />


  <!--快件接收站點-->
  <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="快件已從杭州中轉部發出" />
  <!--快件接收時間-->
  <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" />


  <!--時間軸的豎線-->
  <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; //物流追蹤列表的數據源
  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;


/**
 * 追蹤物流列表的適配器
 * <p>
 * 作者： 周旭 on 2017/5/24/0024.
 */

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

  private static final int TYPE_CURR = 0; //當前
  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) {
    //設置相關數據
    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);
    }
  }
}

感謝各位的閱讀！關于“Android怎么實現仿淘寶物流追蹤功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！