欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿淘宝物流追踪的实例代码

程序员文章站 2023-11-17 21:45:58
今天跟大家聊聊我心目中的物流追踪效果,效果图如下,有需要的朋友,可以直接带走,实现也没有想象中的那么复杂,特别是左边那个时间轴线,没那么复杂 拿到这个图,大家首先想到...

今天跟大家聊聊我心目中的物流追踪效果,效果图如下,有需要的朋友,可以直接带走,实现也没有想象中的那么复杂,特别是左边那个时间轴线,没那么复杂

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。