先上一个效果图,今天才知道这个东西叫时间轴效果,还是从群里知道的。很多人在问这个怎么实现的,我能说其实这个很简单么?就是一个普通的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>
看代码太累,效果图如下:
布局写好了,就是加载数据了。
初始化布局文件中的组件:
<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或某一个标志来判断,然后决定显示哪一种效果,到此结束,没有什么代码上的难度,当然有些复杂的布局可能不是这么简单,但这是一个很基本的思路,大神勿喷。