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

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

標(biāo)簽（空格分隔）： 開源項目

首先看下實現(xiàn)的效果圖

開始運輸


結(jié)束運輸

原理分析

其實這個真的沒什么困難的,之前還以為是一個不太容易的點,但是如果牽涉到了自定義view,那么就會有點功底了(自定義view),但是如果對于時間軸比較多,那么對于自定義view就會出現(xiàn)性能問題,過度繪制。
還有的就是我們可以分析一下這個時間軸,我們可以發(fā)現(xiàn)基本就是好多item進(jìn)行的擴(kuò)展,可能第一個(快遞類比)和最后一個會有所不同,但是其余都是一樣的,第一個和最后一個我們可以控制紅線的顯示(第一個上面紅線不顯示,最后一個紅線下方不顯示),要說原理也就這么多,我也沒辦法在詳細(xì)了(關(guān)鍵不知道怎么說了啊,他就是一個ListView或者RecyclerView啊,放過我吧。。。。)

直接代碼

首先我們來看下json定義吧

  • 說明一下:這里我們的時間,如果是真的項目中,我們的時間應(yīng)該是一個時間戳,然后我們?nèi)カ@取到時間,然后進(jìn)行DataFormat,也可以是類似于我這樣定義的,這個就看后端怎么定義的了,還有我這邊定義的字段比較少,只是用來滿足一下UI顯示,詳情還需要看自己的公司產(chǎn)品需求啊
{
  "datas": [
    {
      "time": "2017.05.05-16:20",
      "type": "0",
      "address": "您的快遞將要攬收,開始轉(zhuǎn)運"
    },
    {
      "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": "浙江省杭州市蕭山中部公司 已發(fā)出,下一站 杭州轉(zhuǎn)運中心"
    },
    {
      "time": "2017.05.05-20:55",
      "type": "1",
      "address": "杭州轉(zhuǎn)運中心公司 已收入"
    },
    {
      "time": "2017.05.05-22:09",
      "type": "1",
      "address": "杭州轉(zhuǎn)運中心公司 已發(fā)出,下一站 北京轉(zhuǎn)運公司"
    },
    {
      "time": "2017.05.06-20:55",
      "type": "1",
      "address": "北京轉(zhuǎn)運公司中心 已收入"
    },
    {
      "time": "2017.05.06-21:55",
      "type": "1",
      "address": "北京轉(zhuǎn)運公司中心 已發(fā)出,下一站 北京市朝陽區(qū)大中華區(qū)"
    },
    {
      "time": "2017.05.07-05:55",
      "type": "1",
      "address": "北京市朝陽區(qū)酒仙橋 已收入"
    },
    {
      "time": "2017.05.07-06:55",
      "type": "2",
      "address": "北京市朝陽區(qū)酒仙橋公司 派件中 電話:112234124"
    },
    {
      "time": "2017.05.07-13:55",
      "type": "3",
      "address": "北京市朝陽區(qū)酒仙橋公司 已經(jīng)簽收 簽收人:郵件收發(fā)章"
    }
  ],
  "message": "請求成功",
  "errorCode": "0"
}

接下來我們看下UI吧(其實沒什么技術(shù)含量。。。)

<?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="杭州轉(zhuǎn)運公司 已收入,這邊也已經(jīng)發(fā)出了,請注意簽收"/>


</RelativeLayout>

看下我們的Adapter代碼

  • onBindViewHolder方法里面的邏輯處理
JavaBean.DatasBean javaBean = mJavaBeen.get(position);
        if (javaBean.getType().equals("0")){
            //發(fā)出圖片
            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() {
        //這個是模擬網(wǎng)絡(luò)請求,解析assets里面的json文件,如果是真實項目  就請求接口  解析數(shù)據(jù)  
        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);  //數(shù)組反轉(zhuǎn)  這個到真實環(huán)境的時候就看請求回來的數(shù)據(jù)和產(chǎn)品的排版方式了
        mExpressDeliveryAdapter.setJavaBeen(datasBeen);
    }

寫在最后

好了,時間軸就這樣簡單的實現(xiàn)了,真的沒有什么技術(shù)含量,只是不要想的過于復(fù)雜,有時候就是那么三言兩語,兩三行代碼解決的事情哈,效果圖就看上面的就行,這里就不在貼圖了啊,要知道圖片的成本(窮哈哈哈)很大的啊。
這里就給下代碼的地址吧,有用的就直接拿去,不需要和我商量的哈。
https://github.com/wuyinlei/TimelineProject

https://github.com/wuyinlei/TimelineProject

https://github.com/wuyinlei/TimelineProject

重要的事情要說三遍,記住哈,喜歡就給個star吧,開源需要您的支持。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿：20170802 前言： 排版 ...
    庭說閱讀 11,171評論 6贊 13
  • 1、時間軸效果 我們要實現(xiàn)的時間軸效果如下圖所示，這是錘子手機(jī)的查看物流信息界面的截圖。 2、主要布局的實現(xiàn) 在T...
    獨毒火閱讀 13,001評論 6贊 16
  • 在即將過去的十八年的記憶里，我做過的一些瘋狂的事情好像可以用十根手指頭就能數(shù)清楚。 那個時候是2007年，小學(xué)五年...
    疲倦少女閱讀 237評論 1贊 1
  • 一直有隱隱的遺憾，總是覺得不夠被愛，也漸漸覺察到自己也不夠愛人。 可是，明明知道他很愛我，自然也知道，我很愛他。 ...
    小紅和小火閱讀 707評論 0贊 0
  • 博士 經(jīng)濟(jì)金融 更好的學(xué)習(xí)能力，更高的思辨能力，更好的貫通能力。 企業(yè)最好的醫(yī)生。
    freshriver閱讀 230評論 0贊 0