Android Time Axis

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"Android:layout_width="1DP"Android:layout_height="25DP"Android:layout_below="@+id/layout_1"Android:layout_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: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:layout_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"Android:layout_marginleft="71DP"Android:background="#A6A6A6"/> <relativelayout Android:id="@+id/relative"Android:layout_width="fill_parent"Android:layout_height="wrap_content"Android:layout_below="@+id/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:layout_centervertical="true"Android:layout_marginleft="5DP"android:src="@drawable/bg_green_circle_smic"/> <TextView Android:id="@+id/title"Android:layout_width="wrap_content"Android:layout_height="wrap_content"Android:layout_centerhorizontal="true"android:layout_centervertical="true"android:ellipsize="End"Android:maxems="7"Android:paddingleft="5DP"Android:singleline="true"Android:text="test Data"android:textsize="12SP"/> </RelativeLayout></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 classTimelineadapter extends Baseadapter {Privatecontext Context; PrivateList<map<string, object>>list; PrivateLayoutinflater Inflater;  PublicTimelineadapter (context context, list<map<string, object>>list)        {super ();  This. Context =context;  This. List =list; } @Override Public intGetCount () {returnlist.size (); } @Override PublicObject GetItem (intposition) {        returnposition; } @Override Public LongGetitemid (intposition) {        returnposition; } @Override PublicView GetView (intposition, View Convertview, ViewGroup parent) {Viewholder Viewholder=NULL; if(Convertview = =NULL) {Inflater= Layoutinflater. from(Parent.getcontext ()); Convertview= Inflater.inflate (R.layout.listview_item,NULL); Viewholder=NewViewholder (); 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); returnConvertview; }    Static classViewholder { PublicTextView Year;  PublicTextView Month;  PublicTextView title; }}

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.

Code: here

Android Time Axis