listview 控件可使用四种不同视图显示项目。通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。
最近在网上看到时间轴的布局效果，尝试按照这个原理，实现物流跟踪的效果，目前已经实现了，效果如下图
该效果完全是使用listview来实现了，下面我们来看一下是如何实现的
（一）：布局listview并编写item布局
首先需要在布局上面编写listview：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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="match_parent"tools:context="com.bobo.trace.mainactivity" ><listview android:id="@+id/lv_trace"android:layout_width="match_parent"android:layout_height="match_parent"android:divider="@drawable/trace_divider"android:dividerheight="1dp"></listview></relativelayout> |
然后编写listview的item布局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<?xml version="1.0" encoding="utf-8"?><relativelayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><relativelayout android:id="@+id/rl_trace_item"android:layout_width="match_parent"android:layout_height="wrap_content"><viewandroid:id="@+id/v_up_line"android:layout_width="2.5dp"android:layout_height="10dp"android:background="@color/mgrey"android:layout_marginleft="22dp"></view><imageview android:id="@+id/iv_state"android:layout_width="16dp"android:layout_height="16dp"android:src="@drawable/circle"android:layout_margintop="10dp"android:layout_marginleft="15dp"/><textview android:id="@+id/tv_trace_info"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margintop="10dp"android:layout_torightof="@id/iv_state"android:layout_marginleft="20dp"android:text="@string/test_trace_info"android:textcolor="@android:color/black"android:textsize="13sp"/><linearlayout android:id="@+id/ll_trace_phone"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margintop="3dp"android:layout_torightof="@id/iv_state"android:layout_marginleft="20dp"android:orientation="horizontal"android:layout_below="@id/tv_trace_info"><textview android:id="@+id/tv_phone_label"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/phone_label"android:textcolor="@android:color/black"android:textsize="13sp"/><textview android:id="@+id/tv_phone"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginleft="5dp"android:text="@string/test_phone"android:textcolor="@android:color/black"android:textsize="13sp"/></linearlayout><textview android:id="@+id/tv_trace_time"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margintop="3dp"android:layout_torightof="@id/iv_state"android:layout_marginleft="20dp"android:text="@string/test_trace_info"android:textcolor="@android:color/black"android:textsize="13sp"android:layout_below="@id/ll_trace_phone"/><viewandroid:id="@+id/v_down_line"android:layout_width="2.5dp"android:layout_height="45dp"android:background="@color/mgrey"android:layout_below="@id/iv_state"android:layout_marginleft="22dp"></view></relativelayout></relativelayout> |
下面我们来看一下item效果：
在上面的效果图中，我们就可以看出，在这个item布局中，左边是”线-图片-线“的布局，显示一个时间轴，右边显示相应的信息，包括物流信息，联系电话和时间；我们知道，在时间轴中，第一个点是不需要上面那个线的，最后一个点是不需要下面那个线的，所以，这个的处理就需要我们在adapter中进行相应的处理。
（二）：自定义adapter
下面我们就需要自定义adapter来填充数据和进行view处理。
当然，在编写adapter之前，我们需要一个javabean来保存相应的信息。
trace.java:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
package com.bobo.beans;public class trace {private boolean ishead;private string info;private string phone;private string time;public trace(boolean ishead, string info, string phone, string time) {super();this.ishead = ishead;this.info = info;this.phone = phone;this.time = time;}public boolean ishead() {return ishead;}public void sethead(boolean ishead) {this.ishead = ishead;}public string getinfo() {return info;}public void setinfo(string info) {this.info = info;}public string getphone() {return phone;}public void setphone(string phone) {this.phone = phone;}public string gettime() {return time;}public void settime(string time) {this.time = time;}} |
下面我们就可以愉快的编写adapter类了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
package com.bobo.adapters;import java.util.arraylist;import android.content.context;import android.view.layoutinflater;import android.view.view;import android.view.viewgroup;import android.widget.baseadapter;import android.widget.imageview;import android.widget.linearlayout;import android.widget.textview;import com.bobo.beans.trace;import com.bobo.trace.r;public class traceadapter extends baseadapter {private arraylist<trace> tradelists = null;private layoutinflater inflater;private context context;public traceadapter(arraylist<trace> tradelists,context context){this.tradelists = tradelists;this.context = context;this.inflater = layoutinflater.from(context);}@overridepublic int getcount() {// todo auto-generated method stubreturn tradelists == null ? 0 : tradelists.size();}@overridepublic object getitem(int position) {// todo auto-generated method stubreturn tradelists.get(position);}@overridepublic long getitemid(int position) {// todo auto-generated method stubreturn position;}@overridepublic view getview(int position, view convertview, viewgroup parent) {holder holder;if(convertview == null){convertview = inflater.inflate(r.layout.trace_item, null);holder = new holder();holder.v_up_line = (view)convertview.findviewbyid(r.id.v_up_line);holder.iv_state = (imageview)convertview.findviewbyid(r.id.iv_state);holder.tv_trace_info = (textview)convertview.findviewbyid(r.id.tv_trace_info);holder.ll_trace_phone = (linearlayout)convertview.findviewbyid(r.id.ll_trace_phone);holder.tv_phone = (textview)convertview.findviewbyid(r.id.tv_phone);holder.tv_trace_time = (textview)convertview.findviewbyid(r.id.tv_trace_time);holder.v_down_line = (view)convertview.findviewbyid(r.id.v_down_line);convertview.settag(holder);}else{holder = (holder)convertview.gettag();}if(tradelists.get(position).ishead()){holder.v_up_line.setvisibility(view.gone);//holder.iv_state = (imageview)convertview.findviewbyid(r.id.iv_state);holder.tv_trace_info.settext(tradelists.get(position).getinfo());holder.tv_phone.settext(tradelists.get(position).getphone());holder.tv_trace_time.settext(tradelists.get(position).gettime());holder.v_down_line.setvisibility(view.visible);}else if(tradelists.size() == (position+1)){holder.tv_trace_info.settext(tradelists.get(position).getinfo());holder.ll_trace_phone.setvisibility(view.gone);holder.tv_trace_time.settext(tradelists.get(position).gettime());holder.v_down_line.setvisibility(view.gone);}else{holder.tv_trace_info.settext(tradelists.get(position).getinfo());holder.ll_trace_phone.setvisibility(view.gone);holder.tv_trace_time.settext(tradelists.get(position).gettime());holder.v_down_line.setvisibility(view.visible);}return convertview;}class holder{view v_up_line;imageview iv_state;textview tv_trace_info;linearlayout ll_trace_phone;textview tv_phone;textview tv_trace_time;view v_down_line;}} |
这样，我们的adapter就已经适配完成，下面我们在activity中实验一下。
（三）：activity实验：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
package com.bobo.trace;import java.util.arraylist;import android.app.activity;import android.content.context;import android.os.bundle;import android.widget.listview;import com.bobo.adapters.traceadapter;import com.bobo.beans.trace;public class mainactivity extends activity {private listview lv_trace;private arraylist<trace> tradelists = new arraylist<trace>();private traceadapter ta;private context context;@overrideprotected void oncreate(bundle savedinstancestate) {super.oncreate(savedinstancestate);setcontentview(r.layout.activity_main);context = mainactivity.this;initview();}private void initview(){lv_trace = (listview)findviewbyid(r.id.lv_trace);initdata();ta = new traceadapter(tradelists, context);lv_trace.setadapter(ta);}private void initdata(){tradelists.add(new trace(true, "商家已从广东发货", "15253157943", "2016-03-16 13:30:43"));tradelists.add(new trace(false, "货物正在配送", "", "2016-03-16 18:30:43"));tradelists.add(new trace(false, "货物已到达天津转运中心", "", "2016-03-17 13:30:43"));tradelists.add(new trace(false, "货品已到济南货运站", "", "2016-03-18 13:30:43"));tradelists.add(new trace(false, "货物已送达济南高新区站点", "", "2016-03-19 13:30:43"));}} |
这样运行之后，我们就会发现，listview的selector宽度是占满全屏的，这样，我们就需要编写一个inset来调整listview的selector。
trace_divider.xml:
|
1
2
3
4
5
|
<?xml version="1.0" encoding="utf-8"?><inset xmlns:android="http://schemas.android.com/apk/res/android"android:insetleft="50dp"android:drawable="@color/mgrey"></inset> |
这样，我们的物流追踪界面就算是完成了，很简单。
关于listview物流获取追踪功能实现就给大家介绍到这里，希望对大家有所帮助！
