Android仿淘宝物流追踪的实例代码
程序员文章站
2023-11-17 21:45:58
今天跟大家聊聊我心目中的物流追踪效果,效果图如下,有需要的朋友,可以直接带走,实现也没有想象中的那么复杂,特别是左边那个时间轴线,没那么复杂
拿到这个图,大家首先想到...
今天跟大家聊聊我心目中的物流追踪效果,效果图如下,有需要的朋友,可以直接带走,实现也没有想象中的那么复杂,特别是左边那个时间轴线,没那么复杂
拿到这个图,大家首先想到的是这是一个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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。