The Android control uses ListView to achieve the timeline effect _android

Realize the idea:

This view is implemented through ListView, showing each listitem with content and time of the entity two fields

The timeline is assembled using a line (20DP) above and a middle circle (15DP) and a line (40DP) below.

In ListView, set its split line to empty with no hit effect

Effect Chart:

Step one: Use XML to draw a gray dot (time_cycle.xml)

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android " 
android:shape=" Oval > 
<solid android:color= "#CBCBCB"/> 
<size android:width 
= "15DP" 
android:height= "15DP"/> 

Step two: Preparation of JavaBean

public class Kuaidi { 
private String content; 
Private String time; 
Public Kuaidi (string time, string content) { 
this.content = content; 
This.time = time; 
} 
Public String getcontent () {return 
content; 
} 
public void SetContent (String content) { 
this.content = content; 
} 
Public String GetTime () {return time 
; 
} 
public void SetTime (String time) { 
this.time = time; 
} 
}

Step three: Write a child layout (time_item.xml)

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" 
Android "Android:layout_width=" Match_parent "android:layout_height=" 75DP "android:orientation=" Horizontal "> 
<!--line part--> <linearlayout android:layout_width= "wrap_content" android:layout_height= "Match_parent" Android:gravity= "Center_horizontal" android:orientation= "vertical" android:paddingleft= "30DP" > <view Android : layout_width= "3DP" android:layout_height= "20DP" android:background= "#CBCBCB"/> <imageview android:layout_ Width= "15DP" android:layout_height= "15DP" android:background= "@drawable/time_cycle"/> <view android:layout_ 
Width= "3DP" android:layout_height= "40DP" android:background= "#CBCBCB"/> </LinearLayout> <!--text section--> <linearlayout android:layout_width= "match_parent" android:layout_height= "Match_parent" Vertical "android:paddingleft=" 30DP "android:paddingright=" 30DP "android:paddingtop= "20DP" > <textview android:id= "@+id/tv_content" android:layout_width= "Wrap_content" Android: layout_height= "Wrap_content" "android:text=" "Shenzhen Longhua Letter center of Guangdong province China Post Group" has received "android:textcolor=" #ABABAB "/> < 
TextView android:id= "@+id/tv_time" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_below= "@id/tv_content" android:text= "2016-05-03 00:22:36" android:textcolor= "#ABABAB"/> </  Linearlayout> </LinearLayout>

The effect is as shown in figure:

Step four: Write the parent layout (activity_main.xml)

<?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 "> 
< ListView 
android:id= "@+id/lv" 
android:layout_width= wrap_content "android:layout_height=" Wrap_ 
Content " 
android:divider=" @null " 
android:listselector=" @android: Color/transparent "/> 

Step five: The adapter that writes the child layout (Kuaidiadapter.java)

public class Kuaidiadapter extends Baseadapter {//seal data private list<kuaidi> List; 
Private Layoutinflater Minflater; 
Public Kuaidiadapter (Context context, list<kuaidi> list) {this.list = list; 
Minflater = Layoutinflater.from (context); 
@Override public int GetCount () {return list.size (); 
@Override public Object getitem (int position) {return list.get (position); 
@Override public long getitemid (int position) {return position; @Override public View getview (int position, View Convertview, ViewGroup parent) {if (Convertview = null) {Convert 
View = minflater.inflate (R.layout.time_item, NULL); 
} Viewholder holder = Getviewholder (Convertview); 
Kuaidi kd = list.get (position); 
Holder.tv_content.setText (Kd.getcontent ()); 
Holder.tv_time.setText (Kd.gettime ()); 
return convertview; /** * Get control Management Object * * @param view * @return/private Viewholder Getviewholder (view view) {Viewholder holder = (V 
Iewholder) View.gettag (); if (Holder = null{holder = new Viewholder (view); 
View.settag (holder); 
return holder; 
/** * Control Management class * * Private class Viewholder {private TextView tv_content, Tv_time; 
Viewholder (view view) {tv_content = (TextView) View.findviewbyid (r.id.tv_content); 
Tv_time = (TextView) View.findviewbyid (r.id.tv_time); } 
} 
}

Step Six: Set the adapter in the parent layout

public class Mainactivity extends appcompatactivity {private ListView LV; 
Private Kuaidiadapter adapter; 
Private list<kuaidi> List; 
@Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
Setcontentview (R.layout.activity_main); 
LV = (ListView) Findviewbyid (r.id.lv); 
List =new arraylist<> (); 
List.add (New Kuaidi ("2016-09-18 08:33:50", "Your order starts processing")); 
List.add (New Kuaidi ("2016-09-18 08:40:23", "Your order to be ready to be assigned to goods")); 
List.add (New Kuaidi ("2016-09-18 08:51:33", "Your parcel has been out of stock")); 
List.add (New Kuaidi ("2016-09-18 21:12:53", "" Shenzhen Longhua Letter Centre "received")); 
List.add (New Kuaidi ("2016-09-18 17:44:20", "Reach" Shenzhen ")); 
List.add (New Kuaidi ("2016-09-18 21:26:51", "Leave" Shenzhen Longhua Letter Center, next station "Shenzhen")); 
List.add (New Kuaidi ("2016-09-18 23:18:21", "Reach" Shenzhen Processing Center ")); 
List.add (New Kuaidi ("2016-09-19 01:14:30", "Leave" Shenzhen treatment center, next station "Guangzhou")); 
List.add (New Kuaidi ("2016-09-19 04:42:11", "arrive" Guangzhou mail processing center of Guangdong province)); 
adapter = new Kuaidiadapter (this,list); 
Lv.setadapter (adapter); } 
}

The above is a small set to introduce the use of Android control ListView to achieve the timeline effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!