时间轴的实现(简单到爆炸)
标签（空格分隔）： 开源项目
首先看下实现的效果图
开始运输
结束运输
原理分析
其实这个真的没什么困难的,之前还以为是一个不太容易的点,但是如果牵涉到了自定义view,那么就会有点功底了(自定义view),但是如果对于时间轴比较多,那么对于自定义view就会出现性能问题,过度绘制。
还有的就是我们可以分析一下这个时间轴,我们可以发现基本就是好多item进行的扩展,可能第一个(快递类比)和最后一个会有所不同,但是其余都是一样的,第一个和最后一个我们可以控制红线的显示(第一个上面红线不显示,最后一个红线下方不显示),要说原理也就这么多,我也没办法在详细了(关键不知道怎么说了啊,他就是一个ListView或者RecyclerView啊,放过我吧。。。。)
直接代码
首先我们来看下json定义吧
- 说明一下:这里我们的时间,如果是真的项目中,我们的时间应该是一个时间戳,然后我们去获取到时间,然后进行DataFormat,也可以是类似于我这样定义的,这个就看后端怎么定义的了,还有我这边定义的字段比较少,只是用来满足一下UI显示,详情还需要看自己的公司产品需求啊
{
"datas": [
{
"time": "2017.05.05-16:20",
"type": "0",
"address": "您的快递将要揽收,开始转运"
},
{
"time": "2017.05.05-19:51",
"type": "1",
"address": "浙江省杭州市萧山中部公司 已收件"
},
{
"time": "2017.05.05-20:55",
"type": "1",
"address": "浙江省杭州市萧山中部公司 已打包"
},
{
"time": "2017.05.05-22:59",
"type": "1",
"address": "浙江省杭州市萧山中部公司 已发出,下一站 杭州转运中心"
},
{
"time": "2017.05.05-20:55",
"type": "1",
"address": "杭州转运中心公司 已收入"
},
{
"time": "2017.05.05-22:09",
"type": "1",
"address": "杭州转运中心公司 已发出,下一站 北京转运公司"
},
{
"time": "2017.05.06-20:55",
"type": "1",
"address": "北京转运公司中心 已收入"
},
{
"time": "2017.05.06-21:55",
"type": "1",
"address": "北京转运公司中心 已发出,下一站 北京市朝阳区大中华区"
},
{
"time": "2017.05.07-05:55",
"type": "1",
"address": "北京市朝阳区酒仙桥 已收入"
},
{
"time": "2017.05.07-06:55",
"type": "2",
"address": "北京市朝阳区酒仙桥公司 派件中 电话:112234124"
},
{
"time": "2017.05.07-13:55",
"type": "3",
"address": "北京市朝阳区酒仙桥公司 已经签收 签收人:邮件收发章"
}
],
"message": "请求成功",
"errorCode": "0"
}
接下来我们看下UI吧(其实没什么技术含量。。。)
<?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="100dp"
android:orientation="vertical"
>
<View
android:id="@+id/shuxian_up"
android:layout_width="2dp"
android:layout_height="50dp"
android:layout_marginLeft="80dp"
android:background="@color/colorAccent"/>
<View
android:id="@+id/shuxian_down"
android:layout_width="2dp"
android:layout_marginTop="50dp"
android:layout_height="50dp"
android:layout_marginLeft="80dp"
android:background="@color/colorAccent"/>
<ImageView
android:id="@+id/express_delivery_img"
android:layout_width="20dp"
android:layout_height="20dp"
tools:background="@mipmap/ic_ok"
android:layout_centerVertical="true"
android:layout_marginLeft="71dp"/>
<RelativeLayout
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:maxLines="1"
android:text="22:09"/>
<TextView
android:id="@+id/tv_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_time"
android:layout_centerHorizontal="true"
android:maxLines="1"
android:text="2017.05.06"
android:textSize="10sp"/>
</RelativeLayout>
<TextView
android:id="@+id/tv_address_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_toRightOf="@+id/express_delivery_img"
android:maxLines="3"
tools:text="杭州转运公司 已收入,这边也已经发出了,请注意签收"/>
</RelativeLayout>
看下我们的Adapter代码
- onBindViewHolder方法里面的逻辑处理
JavaBean.DatasBean javaBean = mJavaBeen.get(position);
if (javaBean.getType().equals("0")){
//发出图片
holder.mExpressDeliveryImg.setImageResource(R.mipmap.postman_order_sender_icon);
} else if (javaBean.getType().equals("1")){
//运送中图片
holder.mExpressDeliveryImg.setImageResource(R.mipmap.updata_dialog_icon);
} else if (javaBean.getType().equals("2")){
//派送中图片
holder.mExpressDeliveryImg.setImageResource(R.mipmap.logistics_detail_indicator_postman_avatar);
} else if (javaBean.getType().equals("3")){
//签收中图片
holder.mExpressDeliveryImg.setImageResource(R.mipmap.postman_order_receiver_icon);
}
holder.mTvData.setText(javaBean.getDataAndTime()[0]);
holder.mTvTime.setText(javaBean.getDataAndTime()[1]);
holder.mTvAddressDetail.setText(javaBean.getAddress());
if (position == 0 ){ //如果是第一个位置,上面的红线不显示
holder.mShuxianUp.setVisibility(View.INVISIBLE);
} else {
holder.mShuxianUp.setVisibility(View.VISIBLE);
}
if (position == mJavaBeen.size()-1){ //如果是最后一个位置,下面的红线不显示
holder.mShuxianDown.setVisibility(View.INVISIBLE);
} else {
holder.mShuxianDown.setVisibility(View.VISIBLE);
}
最后看下Activity里面的逻辑吧(真的没什么啊)
private void initData() {
//这个是模拟网络请求,解析assets里面的json文件,如果是真实项目 就请求接口 解析数据
String result = JsonUtils.getJson(this, "express_delivery.json");
Gson gson = new Gson();
JavaBean javaBean = gson.fromJson(result, JavaBean.class);
List<JavaBean.DatasBean> datasBeen = new ArrayList<>();
datasBeen = javaBean.getDatas();
Collections.reverse(datasBeen); //数组反转 这个到真实环境的时候就看请求回来的数据和产品的排版方式了
mExpressDeliveryAdapter.setJavaBeen(datasBeen);
}
写在最后
好了,时间轴就这样简单的实现了,真的没有什么技术含量,只是不要想的过于复杂,有时候就是那么三言两语,两三行代码解决的事情哈,效果图就看上面的就行,这里就不在贴图了啊,要知道图片的成本(穷哈哈哈)很大的啊。
这里就给下代码的地址吧,有用的就直接拿去,不需要和我商量的哈。
https://github.com/wuyinlei/TimelineProject
https://github.com/wuyinlei/TimelineProject
https://github.com/wuyinlei/TimelineProject
重要的事情要说三遍,记住哈,喜欢就给个star吧,开源需要您的支持。
