关于时间轴效果的全文解析

先上一个效果图，今天才知道这个东西叫时间轴效果，还是从群里知道的。很多人在问这个怎么实现的，我能说其实这个很简单么？就是一个普通的listview，没什么特别，虽然这样简单还是决定写个博文记录下，让那些望而却步的人明白这东西原来这么简单。

通过这个可以自己改成相似的效果，以下对代码进行逻辑上的说明再写代码。

这个效果一看相信就知道要用listview来实现，再进一步很明显每一个事件就是一个item。所以自然而然就按普通listview方式来处理，先写一个listview放在主页面，然后写item布局，获取到要展示的数据后再设置adapter就完工。别告诉我你平时写listview不是这样的流程。分析完毕，简单吧，下面开始写点代码

先来一个主页面的布局：list_history.xml(所有values配置文件里的内容请忽略)

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/title_bg"
            android:orientation="horizontal">

        <ImageButton
                android:id="@+id/queue_back_btn"
                android:layout_gravity="center"
                android:layout_marginLeft="10dp"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/back"/>

        <TextView
                style="@style/title"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/title3"/>

        <TextView android:layout_width="23dp"
                  android:layout_height="match_parent"/>
    </LinearLayout>

    <FrameLayout
            android:id="@+id/fl_history"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <com.handmark.pulltorefresh.library.PullToRefreshListView
                android:id="@+id/pull_refresh_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:cacheColorHint="#00000000"
                android:divider="@android:color/white"
                android:dividerHeight="0dp"
                android:fadingEdge="none"
                android:fastScrollEnabled="false"
                android:footerDividersEnabled="false"
                android:headerDividersEnabled="false"
                android:smoothScrollbar="true"/>
    </FrameLayout>
</LinearLayout></span>

这个布局用了一个FrameLayout 是因为当没有数据的时候，我要显示一个“没有数据”的View.主要看PullToRefreshListView.用的这个好下拉刷新和上拉分页加载。要说明的是设置

<pre name="code" class="html"><span style="font-size:18px;">                android:cacheColorHint="#00000000"
                android:divider="@android:color/white"</span>

<span style="font-size:18px;">                android:dividerHeight="0dp"</span>

不需要默认的分隔符。

然后看看item里的布局。item_detail.xml

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <LinearLayout
            android:orientation="vertical"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/timetxt"
                android:gravity="center_horizontal"
                android:text="@string/history_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

    </LinearLayout>
    <ImageView
            android:id="@+id/history_spr_img"
            android:layout_gravity="center"
            android:src="@drawable/history_list_start"
            android:scaleType="fitCenter"
            android:layout_width="wrap_content"
            android:layout_height="105dp"/>
    <RelativeLayout
            android:id="@+id/rl_info"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <com.ever.ezwait.widget.MarqueeTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/shop_name"
                style="@style/queue_title"
                android:id="@+id/history_shop_name"/>

        <TextView
                android:id="@+id/queue_code"
                android:layout_below="@id/history_shop_name"
                android:ellipsize="end"
                style="@style/queue_num"
                android:textSize="@dimen/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <com.ever.ezwait.widget.MarqueeTextView
                android:id="@+id/history_queue_name"
                android:layout_marginTop="5dp"
                android:textSize="@dimen/content"
                android:layout_below="@id/queue_code"
                android:text="@string/queue_content"
                android:layout_width="120dp"
                android:layout_height="wrap_content"/>

        <TextView
                android:id="@+id/history_wait_txt"
                android:layout_marginLeft="0dp"
                android:layout_alignBaseline="@id/history_queue_name"
                android:layout_toRightOf="@id/history_queue_name"
                android:text="@string/history_wait_txt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <ImageView
                android:id="@+id/history_queue_flag"
                android:src="@drawable/wait_flag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_alignTop="@+id/history_queue_name"
                android:layout_toRightOf="@id/history_wait_txt"/>

        <TextView
                android:id="@+id/history_queue_tip"
                android:layout_marginTop="5dp"
                android:layout_below="@id/history_queue_name"
                android:text="@string/queue_tip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        <ImageView
                android:id="@+id/history_btn"

                android:background="#00000000"
                android:layout_marginRight="20dp"
                android:src="@drawable/ahead"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_alignParentRight="true"/>

        <TextView
                android:layout_alignParentBottom="true"
                android:background="@drawable/shape_line"
                android:layout_width="match_parent"
                android:layout_height="2dp"/>
    </RelativeLayout>
</LinearLayout></span>

看代码太累，效果图如下：

明显就是整体数据中的一个的事件，布局也不难，思路和一个普通的listview写法没什么两样。这里没什么说的。

布局写好了，就是加载数据了。

初始化布局文件中的组件：

<span style="font-size:18px;"> pullToRefreshListView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener<ListView>() {
            @Override
            public void onRefresh(PullToRefreshBase<ListView> refreshView) {
                String label = DateUtils.formatDateTime(getApplicationContext(), System.currentTimeMillis(), DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE | DateUtils.FORMAT_ABBREV_ALL);
                refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);
                if (pullToRefreshListView.isHeaderShow()) {
                    getData(0, false);
                } else if (pullToRefreshListView.isFooterShow()) {
                    Log.i(Constants.TAG, "是否完成所有数据：" + isFinished);
                    getData(myQueueList.size(), true);
                }
            }
        });

        //设置上/下拉刷新模式
        pullToRefreshListView.setMode(PullToRefreshBase.Mode.BOTH);
        getData(0, false);</span>

其中getData(int start, boolean isAppend)主要用来控制分布的数据加载，数据问题不写，这不是主要的问题。设置一个适配器，QueryListAdapter(Context context, List<MyQueue> datas);构造器相信大部分是这样写的，传入要显示的数据集合。然后在getView控制各种想要的显示效果，比如效果图中显示“已取消”其实还有很多其他的状态，比如下图

还有“已通知”、“已完成”后面显示的图标也是不一样的。这就需要在getView方法里处理。另外有些效果，比如时间轴上的长度是不一致或者颜色不同等，可以通过postion或某一个标志来判断，然后决定显示哪一种效果，到此结束，没有什么代码上的难度，当然有些复杂的布局可能不是这么简单，但这是一个很基本的思路，大神勿喷。