Android ListView Logistics Acquisition and tracking function Realization _android

The ListView control can display items using four different views. This control allows you to make a column with or without column headers and to display accompanying icons and text.

Recently on the Internet to see the layout effect of the timeline, try to follow this principle, to achieve the effect of logistics tracking, has been achieved, the effect of the following figure

The effect is completely implemented using ListView, so let's take a look at how it is implemented

(i): Layout ListView and Write Item layout

First you need to write ListView on the layout:

<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>

Then write the item layout for ListView:

<?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>

Now let's take a look at the item effect:

In the above effect chart, we can see that in this item layout, the left side is the "line-picture-line" layout, display a timeline, the right to display the corresponding information, including logistics information, contact telephone and time; we know that the first point in the timeline doesn't need the top line, The last point is not the need for the following line, so the processing of this requires us to adapter in the corresponding processing.

(ii): Custom Adapter

Here we need to customize the adapter to populate the data and do the view processing.

Of course, before writing adapter, we need a javabean to hold the appropriate information.

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;
}
}

Here we can happily write the adapter class:

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 I
Nflater;
private 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 a stub return tradelists = = null? 0:tradelists.size (); @Override public Object getitem (int position) {//TODO auto-generated Method stub return Tradelists.get (position);} @O Verride 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; }
}

In this way, our adapter is already fit and complete, and we'll experiment with the activity.

(iii): Activity experiment:

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 Ar
Raylist<trace> ();
Private Traceadapter ta;
private 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 (True, "merchant shipped from Guangdong", "15253157943", "2016-03-16 13:30:43")); tradelists
. Add (False, "goods are being shipped", "", "2016-03-16 18:30:43")); Tradelists.add (False, "cargo reached Tianjin transshipment Center", "", "2016-03-17 13:30:43"));
Tradelists.add (False, "goods have arrived at Jinan freight station", "", "2016-03-18 13:30:43")); Tradelists.add (False, "the goods have been delivered to the Jinan high-tech zone site", "", "2016-03-19 13:30:43"));}

After this operation, we will find that the selector width of the ListView is full screen, so we need to write a inset to adjust the 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>

In this way, our logistics tracking interface is complete, very simple.

About ListView Logistics Access tracking function to introduce to everyone here, I hope to help!