时间:2020-11-04 11:23:54 | 栏目: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); } } }
github地址(欢迎下载完整Demo):https://github.com/zhouxu88/LogisticsDemo