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怎么实现仿淘宝物流追踪功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！