【移動應(yīng)用開發(fā)技術(shù)】Android怎么實現(xiàn)仿淘寶物流追蹤功能

【移動應(yīng)用開發(fā)技術(shù)】Android怎么實現(xiàn)仿淘寶物流追蹤功能

這篇文章給大家分享的是有關(guān)Android怎么實現(xiàn)仿淘寶物流追蹤功能的內(nèi)容。在下覺得挺實用的，因此分享給大家做個參考，一起跟隨在下過來看看吧。效果圖拿到這個圖，大家首先想到的是這是一個RecyclerView來實現(xiàn)，可能比較疑惑的地方是那個紅色的小圓點和灰色的小圓點，以及穿過圓點之間的那條豎線，最重要的是豎線的高度還是自適應(yīng)的，并不是固定高度，老鐵，自己說，有沒有戳中你的痛點，要是能把這個時間軸線的問題解決了，你也可以說我上我也行。看了網(wǎng)上的，有人說要什么自定義View啦，又是繪制，又是測量，其實沒那么復(fù)雜，下面說說我是怎么解決的。想了想,可以各個view的相對位置來實現(xiàn)啊,比如,那個圓點也可以用imageview實現(xiàn)啊,唯一不同的就是豎線的view是穿過灰色的圓view的,大家有沒有發(fā)現(xiàn)，除了第一個圓點意外的其他圓點，都是在那條水平的分割線下固定高度的位置（我這里好像是10dp）的左側(cè)，那我完全可以在這個分割線下方弄一個空的View，那么穿過圓孔的這條豎線不就是在這個空的View的上方，在圓點的下方，并且高度是match，這樣，通過一個相對布局，這個時間軸的問題也解決了item_trace<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:tools="/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="快件已從杭州中轉(zhuǎn)部發(fā)出"

/>

<!--快件接收時間-->

<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>MainActivitypackage

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ū)光谷公司長江社區(qū)便民服務(wù)站進行簽收掃描，快件已被

已簽收

簽收"));

mTraceList.add(new

Trace(1,

"2017年6月18日

上午11:57:25",

"在湖北武漢洪山區(qū)光谷公司長江社區(qū)便民服務(wù)站進行派件掃描；派送業(yè)務(wù)員：老王；聯(lián)系電話湖北武漢洪山區(qū)光谷公司長江社區(qū)便民服務(wù)站進行派件掃描；派送業(yè)務(wù)員：老王；聯(lián)系電話));

mTraceList.add(new

Trace(1,

"2017年6月17日

下午4:43:29",

"在湖北武漢洪山區(qū)光谷公司進行快件掃描，將發(fā)往：湖北武漢洪山區(qū)光谷公司長江社區(qū)便民服務(wù)站"));

mTraceList.add(new

Trace(1,

"2017年6月17日

上午9:11:21",

"從湖北武漢分撥中心發(fā)出，本次轉(zhuǎn)運目的地：湖北武漢洪山區(qū)光谷公司"));

mTraceList.add(new

Trace(1,

"2017年6月17日

上午1:53:14",

"在湖南長沙分撥中心進行裝車掃描，即將發(fā)往：湖北武漢分撥中心"));

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);

}

}Adapterpackage

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)

{

//設(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ù)，隱藏時間軸的豎線和水平的分割線

holder.timeLineView.setVisibility(View.INVISIBLE);

holder.dividerLineView.setVisibility(View.INVISIBLE);

}

}

public

class

TraceViewHolder

extends

RecyclerView.ViewHolder

{