Android仿淘宝物流追踪的实例代码
作者:陪你唠嗑 发布时间:2021-08-19 22:57:23
标签: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
来源:http://www.jianshu.com/p/fa73bf3e6f02?utm_source=tuicool&utm_medium=referral
0
投稿
猜你喜欢
- 本文实例为大家分享了java实现饮料自助售货机的具体代码,供大家参考,具体内容如下①用户类import java.util.Scanner;
- 一、简述:cmd中,执行java命令与javac命令的区别:javac:是编译命令,将java源文件编译成.class字节码文件。例如:ja
- 在最近的两个项目中,项目需求要求我们实现 /*登陆页面的内容能够随着键盘的弹出而被顶上去,避免键盘遮挡住登陆按钮*/ 这样的效果,宝宝心里苦
- 智能指针(auto_ptr) 这个名字听起来很酷是不是?其实auto_ptr 只是C++标准库提供的一个类模板,它与传统的new/delet
- 使用INI配置文件,简单便捷。该辅助工具类为C#操作INI文件的辅助类,源码在某位师傅的基础上完善的来,因为忘记最初的来源了,因此不能提及引
- Sentinel是阿里巴巴开源的限流器熔断器,并且带有可视化操作界面。在日常开发中,限流功能时常被使用,用于对某些接口进行限流熔断,譬如限制
- 两种基本的输入方式1.使用Scanner类需要java.util包构造Scanner类的对象,附属于标准输入流System.in,之后通过其
- 创建普通Maven工程导入所需依赖坐标:<dependencies> <!-- https://
- 本文实例讲述了C#实现多线程的Web代理服务器。分享给大家供大家参考。具体如下:/**Proxy.cs:C# Programming Tip
- 这里给一个样例树:代码:#include <stdio.h> #include <string.h>#include
- 文件存储文件存储方式不受类型限制,可以将一些数据直接以文件的形式保存在设备中,例如文本文件、PDF ,音频,图片等。存储类型复杂的数据时,通
- Maven搭建springboot项目本文是基于Windows 10系统环境,使用Maven搭建springboot项目Windows 10
- 本文实例为大家分享了java + dom4j.jar提取xml文档内容的具体代码,供大家参考,具体内容如下资源下载页:点击下载本例程主要借助
- 背景:SpringMVC如何响应json格式的数据?技术实现方式1:在Controller使用@RestController注解方式2:在C
- 这篇文章主要介绍了Java中 switch关键原理及用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需
- 图库在播放幻灯片时,按power键灭屏,然后再亮屏,会发现幻灯片继续在播放,没有显示keyguard。如何在亮屏后显示解锁界面。 修改方法是
- 一、项目简述功能: 前后用户的登录注册,婚纱照片分类,查看,摄影师预 订,后台订单管理,图片管理等等。二、项目运行环境配置: Jdk1.8
- 在有些情况下死锁是可以避免的。本文将展示三种用于避免死锁的技术:1.加锁顺序2.加锁时限3.死锁检测加锁顺序当多个线程需要相同的一些锁,但是
- 本文实例讲述了Java构造代码块,静态代码块原理与用法。分享给大家供大家参考,具体如下:本文内容:局部代码块构造代码块静态代码块补充&nbs
- SSM在Controller中添加事务管理本人使用:集成开发环境:idea项目管理工具:maven数据库:oracle框架:Spring+S