Android仿淘寶物流追蹤的實(shí)例代碼
今天跟大家聊聊我心目中的物流追蹤效果,效果圖如下,有需要的朋友,可以直接帶走,實(shí)現(xiàn)也沒有想象中的那么復(fù)雜,特別是左邊那個(gè)時(shí)間軸線,沒那么復(fù)雜
拿到這個(gè)圖,大家首先想到的是這是一個(gè)RecyclerView來實(shí)現(xiàn),可能比較疑惑的地方是那個(gè)紅色的小圓點(diǎn)和灰色的小圓點(diǎn),以及穿過圓點(diǎn)之間的那條豎線,最重要的是豎線的高度還是自適應(yīng)的,并不是固定高度,老鐵,自己說,有沒有戳中你的痛點(diǎn),要是能把這個(gè)時(shí)間軸線的問題解決了,你也可以說我上我也行。
看了網(wǎng)上的,有人說要什么自定義View啦,又是繪制,又是測量,其實(shí)沒那么復(fù)雜,下面說說我是怎么解決的。想了想,可以各個(gè)view的相對(duì)位置來實(shí)現(xiàn)啊,比如,那個(gè)圓點(diǎn)也可以用imageview實(shí)現(xiàn)啊,唯一不同的就是豎線的view是穿過灰色的圓view的,大家有沒有發(fā)現(xiàn),除了第一個(gè)圓點(diǎn)意外的其他圓點(diǎn),都是在那條水平的分割線下固定高度的位置(我這里好像是10dp)的左側(cè) ,那我完全可以在這個(gè)分割線下方弄一個(gè)空的View,那么穿過圓孔的這條豎線不就是在這個(gè)空的View的上方,在圓點(diǎn)的下方,并且高度是match,這樣,通過一個(gè)相對(duì)布局,這個(gè)時(shí)間軸的問題也解決了
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ū)光谷公司長江社區(qū)便民服務(wù)站進(jìn)行簽收掃描,快件已被 已簽收 簽收")); mTraceList.add(new Trace(1, "2017年6月18日 上午11:57:25", "在湖北武漢洪山區(qū)光谷公司長江社區(qū)便民服務(wù)站進(jìn)行派件掃描;派送業(yè)務(wù)員:老王;聯(lián)系電話:17786550311在湖北武漢洪山區(qū)光谷公司長江社區(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ū)光谷公司長江社區(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", "在湖南長沙分撥中心進(jìn)行裝車掃描,即將發(fā)往:湖北武漢分撥中心")); mTraceList.add(new Trace(1, "2017年6月17日 上午1:50:18", "在分撥中心湖南長沙分撥中心進(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. */ 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); } } }
github地址(歡迎下載完整Demo):https://github.com/zhouxu88/LogisticsDemo
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
很詳細(xì)的android序列化過程Parcelable
這篇文章主要為大家詳細(xì)介紹了很詳細(xì)的android序列化過程Parcelable,代碼注釋很詳細(xì),感興趣的小伙伴們可以參考一下2016-08-08RecyclerView中使用CheckBox出現(xiàn)勾選混亂的解決方法
這篇文章主要為大家詳細(xì)介紹了RecyclerView中使用CheckBox出現(xiàn)勾選混亂的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android自定義View實(shí)現(xiàn)垂直時(shí)間軸布局
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)垂直時(shí)間軸布局的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03Android中通過訪問本地相冊或者相機(jī)設(shè)置用戶頭像實(shí)例
本篇文章主要介紹了Android中通過訪問本地相冊或者相機(jī)設(shè)置用戶頭像,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01Android 簡單跳轉(zhuǎn)頁面工具的實(shí)例詳解
這篇文章主要介紹了Android 簡單跳轉(zhuǎn)頁面工具的實(shí)例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03Android開發(fā)實(shí)現(xiàn)標(biāo)題隨scrollview滑動(dòng)變色的方法詳解
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)標(biāo)題隨scrollview滑動(dòng)變色的方法,涉及Android針對(duì)滑動(dòng)事件的響應(yīng)、界面布局、屬性動(dòng)態(tài)變換等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11Android側(cè)滑菜單和輪播圖之滑動(dòng)沖突問題
這篇文章主要介紹了Android側(cè)滑菜單和輪播圖之滑動(dòng)沖突問題,需要的朋友可以參考下2017-06-06