Android ListView物流获取追踪功能实现

listview 控件可使用四种不同视图显示项目。通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。

最近在网上看到时间轴的布局效果，尝试按照这个原理，实现物流跟踪的效果，目前已经实现了，效果如下图

该效果完全是使用listview来实现了，下面我们来看一下是如何实现的

（一）：布局listview并编写item布局

首先需要在布局上面编写listview：

<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布局：

<?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">
<view
android: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"/>
<view
android: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:

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类了：

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);
}
@override
public int getcount() {
// todo auto-generated method stub
return tradelists == null ? 0 : tradelists.size();
}
@override
public object getitem(int position) {
// todo auto-generated method stub
return tradelists.get(position);
}
@override
public long getitemid(int position) {
// todo auto-generated method stub
return position;
}
@override
public 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实验：

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;
@override
protected 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:

<?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物流获取追踪功能实现就给大家介绍到这里，希望对大家有所帮助！