時間軸的實現(簡單到爆炸)

標籤（空格分隔）： 開源專案

---

###首先看下實現的效果圖

####開始運輸

####結束運輸

###原理分析 其實這個真的沒什麼困難的,之前還以為是一個不太容易的點,但是如果牽涉到了自定義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吧,開源需要您的支援。