时间轴的实现(简单到爆炸)

标签（空格分隔）： 开源项目

###首先看下实现的效果图

####开始运输

####结束运输

###原理分析 其实这个真的没什么困难的,之前还以为是一个不太容易的点,但是如果牵涉到了自定义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"><Viewandroid:id="@+id/shuxian_up"android:layout_width="2dp"android:layout_height="50dp"android:layout_marginLeft="80dp"android:background="@color/colorAccent"/><Viewandroid:id="@+id/shuxian_down"android:layout_width="2dp"android:layout_marginTop="50dp"android:layout_height="50dp"android:layout_marginLeft="80dp"android:background="@color/colorAccent"/><ImageViewandroid: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"/><RelativeLayoutandroid:layout_width="70dp"android:layout_height="match_parent"android:gravity="center"><TextViewandroid: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"/><TextViewandroid: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><TextViewandroid: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吧,开源需要您的支持。