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

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

首先看下实现的效果图

开始运输

结束运输

原理分析

其实这个真的没什么困难的,之前还以为是一个不太容易的点,但是如果牵涉到了自定义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吧,开源需要您的支持。