The timeline for the Android project to be unpacked

Source: Internet
Author: User

In the recently developed app to use the timeline of this thing, need to achieve the effect of the following:


Think of this thing should be able to use the ListView to achieve it. And then recently it's been simulated to write:

First write the layout of the ListView item:

Listview_item.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 "android:background=" #ffffff " android:orientation= "vertical" android:paddingright= "20DP" > <view android:id= "@+id/view_0" and Roid:layout_width= "1DP" android:layout_height= "25DP" android:layout_below= "@+id/layout_1" Android:lay out_marginleft= "71DP" android:background= "#A6A6A6"/> <view android:id= "@+id/view_1" Android : layout_width= "1DP" android:layout_height= "25DP" android:layout_below= "@+id/layout_2" Android:layout_ marginleft= "71DP" android:background= "#A6A6A6"/> <textview android:id= "@+id/show_time" Android        Oid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@+id/view_1" Android:layout_marginleft= "30dP "android:text=" test Data "android:textsize=" 12DP "/> <imageview android:id=" @+id/image " Android:layout_width= "15DP" android:layout_height= "15DP" android:layout_below= "@+id/view_1" android:l        ayout_marginleft= "65DP" android:src= "@drawable/timeline_green"/> <view android:id= "@+id/view_2" Android:layout_width= "1DP" android:layout_height= "100DP" android:layout_below= "@+id/image" Andro id:layout_marginleft= "71DP" android:background= "#A6A6A6"/> <relativelayout android:id= "@+id/relati VE "android:layout_width=" Fill_parent "android:layout_height=" wrap_content "android:layout_below=" @+i D/image "android:layout_margintop=" -20DP "android:layout_torightof=" @+id/image "android:background=" @            Drawable/timeline_content "android:padding=" 10DP "> <imageview android:id=" @+id/image_1 " Android:layout_Width= "60DP" android:layout_height= "60DP" android:layout_alignparentleft= "true" android:l Ayout_centervertical= "true" android:layout_marginleft= "5DP" android:src= "@drawable/bg_green_circle_s            Mic "/> <textview android:id=" @+id/title "android:layout_width=" Wrap_content " android:layout_height= "Wrap_content" android:layout_centerhorizontal= "true" Android:layout_centerv            Ertical= "true" android:ellipsize= "End" android:maxems= "7" android:paddingleft= "5DP" Android:singleline= "true" android:text= "test Data" android:textsize= "12SP"/> </relativela Yout></relativelayout>

The next step is to write the adapter of the ListView:

Timelineadapter.java

Package Com.example.timelinetext.test;import Java.util.list;import Java.util.map;import android.content.Context; Import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;import Android.widget.baseadapter;import Android.widget.textview;public class Timelineadapter extends BaseAdapter {private Context context;private list<map<string, object>> list;private layoutinflater inflater;public Timelineadapter (context context, list<map<string, object>> List) {super (); this.context = Context; this.list = list;} @Overridepublic int GetCount () {return list.size ();} @Overridepublic Object getItem (int position) {return position;} @Overridepublic long Getitemid (int position) {return position;} @Overridepublic view GetView (int position, view Convertview, ViewGroup parent) {Viewholder Viewholder = null;if (convertvi EW = = NULL) {Inflater = Layoutinflater.from (Parent.getcontext ()); Convertview = Inflater.inflate (r.layout.listview_ item, NULL); Viewholder = new Viewholder (); viewholder.title = (TextView) Convertview.findviewbyid (r.id.title); Convertview.settag (ViewHolder);} else {Viewholder = (Viewholder) Convertview.gettag ();} String titlestr = list.get (position). Get ("title"). ToString (); ViewHolder.title.setText (TITLESTR); return Convertview ;} Static class Viewholder {public TextView year;public TextView month;public TextView title;}}


Last use:

Mainactivity.java

Package Com.example.timelinetext.test;import Java.util.arraylist;import Java.util.hashmap;import java.util.List; Import Java.util.map;import android.app.activity;import Android.os.bundle;import android.widget.listview;public Class Mainactivity extends Activity {private ListView listview; list<string> data;p rivate timelineadapter timelineadapter; @Overrideprotected void OnCreate (Bundle Savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_listview); listview = ( ListView) This.findviewbyid (R.id.listview); listview.setdividerheight (0); timelineadapter = new Timelineadapter (this , GetData ()); Listview.setadapter (Timelineadapter);} Private list<map<string, object>> GetData () {list<map<string, object>> List = new arraylist< Map<string, object>> (); map<string, object> map = new hashmap<string, object> (), Map.put ("title", "This is the 1th row of test Data"); List.add (map); map = New hashmap<string, object> (); Map.put ("title", "This is the 2nd row of test data"); List.add (map); map = new hashmap<string, object> (); Map.put (" title "," This is the 3rd row of test Data "); List.add (map); map = new Hashmap<string, object> (); Map.put ("title", "This is the 4th line of test Data"); List.add (map); return list;}}

Run effect




So simulation to write a timeline, not something complicated, not to be frightened by the UI design picture, in fact, he is an ordinary ListView.



SOURCE download


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.