最近開發的app中要用到時間軸這東西，需要實現的效果如下：

想想這個東西應該可以用listview實現吧。然後最近就模擬著去寫了：

首先寫  listview的item的佈局: 

listview_item.xml

1. "1.0" encoding="utf-8"?>  
2. "http://schemas.android.com/apk/res/android"
3.     android:layout_width="match_parent"
4.     android:layout_height="match_parent"
5.     android:background="#ffffff"
6.     android:orientation="vertical"
7.     android:paddingRight="20dp" >  
8.     </view  >
9.         android:id="@+id/view_0"
10.         android:layout_width="1dp"
11.         android:layout_height="25dp"
12.         android:layout_below="@+id/layout_1"
13.         android:layout_marginLeft="71dp"
14.         android:background="#A6A6A6"
     />  
15.     </view  >
16.         android:id="@+id/view_1"
17.         android:layout_width="1dp"
18.         android:layout_height="25dp"
19.         android:layout_below="@+id/layout_2"
20.         android:layout_marginLeft="71dp"
21.         android:background="#A6A6A6" />  
22.     </textview  >
23.         android:id="@+id/show_time"
24.         android:layout_width="wrap_content"
25.         android:layout_height="wrap_content"
26.         android:layout_below="@+id/view_1"
27.         android:layout_marginLeft="30dp"
28.         android:text="測試資料"
29.         android:textSize="12dp" />  
30.     </imageview  >
31.         android:id="@+id/image"
32.         android:layout_width="15dp"
33.         android:layout_height="15dp"
34.         android:layout_below="@+id/view_1"
35.         android:layout_marginLeft="65dp"
36.         android:src="@drawable/timeline_green" />  
37.     </view  >
38.         android:id="@+id/view_2"
39.         android:layout_width="1dp"
40.         android:layout_height="100dp"
41.         android:layout_below="@+id/image"
42.         android:layout_marginLeft="71dp"
43.         android:background="#A6A6A6" />  
44.     </relativelayout  >
45.         android:id="@+id/relative"
46.         android:layout_width="fill_parent"
47.         android:layout_height="wrap_content"
48.         android:layout_below="@+id/image"
49.         android:layout_marginTop="-20dp"
50.         android:layout_toRightOf="@+id/image"
51.         android:background="@drawable/timeline_content"
52.         android:padding="10dp" >  
53.         </imageview  >
54.             android:id="@+id/image_1"
55.             android:layout_width="60dp"
56.             android:layout_height="60dp"
57.             android:layout_alignParentLeft="true"
58.             android:layout_centerVertical="true"
59.             android:layout_marginLeft="5dp"
60.             android:src="@drawable/bg_green_circle_smic" />  
61.         </textview  >
62.             android:id="@+id/title"
63.             android:layout_width="wrap_content"
64.             android:layout_height="wrap_content"
65.             android:layout_centerHorizontal="true"
66.             android:layout_centerVertical="true"
67.             android:ellipsize="end"
68.             android:maxEms="7"
69.             android:paddingLeft="5dp"
70.             android:singleLine="true"
71.             android:text="測試資料"
72.             android:textSize="12sp" />  

TimelineAdapter.java

1. package com.example.timelinetext.test;  
2. import java.util.List;  
3. import java.util.Map;  
4. import android.content.Context;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.BaseAdapter;  
9. import android.widget.TextView;  
10. publicclass TimelineAdapter extends BaseAdapter {  
11. private Context context;  
12. private List > list;  </string, object>
13. private LayoutInflater inflater;  
14. public TimelineAdapter(Context context, List > list) {  </string, object>
15. super();  
16. this.context = context;  
17. this.list = list;  
18.     }  
19. @Override
20. publicint getCount() {  
21. return list.size();  
22.     }  
23. @Override
24. public Object getItem(int position) {  
25. return position;  
26.     }  
27. @Override
28. publiclong getItemId(int position) {  
29. return position;  
30.     }  
31. @Override
32. public View getView(int position, View convertView, ViewGroup parent) {  
33.         ViewHolder viewHolder = null;  
34. if (convertView == null) {  
35.             inflater = LayoutInflater.from(parent.getContext());  
36.             convertView = inflater.inflate(R.layout.listview_item, null);  
37.             viewHolder = new ViewHolder();  
38.             viewHolder.title = (TextView) convertView.findViewById(R.id.title);  
39.             convertView.setTag(viewHolder);  
40.         } else {  
41.             viewHolder = (ViewHolder) convertView.getTag();  
42.         }  
43.         String titleStr = list.get(position).get("title").toString();  
44.         viewHolder.title.setText(titleStr);  
45. return convertView;  
46.     }  
47. staticclass ViewHolder {  
48. public TextView year;  
49. public TextView month;  
50. public TextView title;  
51.     }  
52. }  

最後使用：

MainActivity.java

1. package com.example.timelinetext.test;  
2. import java.util.ArrayList;  
3. import java.util.HashMap;  
4. import java.util.List;  
5. import java.util.Map;  
6. import android.app.Activity;  
7. import android.os.Bundle;  
8. import android.widget.ListView;  
9. publicclass MainActivity extends Activity {  
10. private ListView listView;  
11.     List  data ;  
12. private TimelineAdapter timelineAdapter;  
13. @Override
14. protectedvoid onCreate(Bundle savedInstanceState) {  
15. super.onCreate(savedInstanceState);  
16.         setContentView(R.layout.activity_listview);  
17.         listView = (ListView) this.findViewById(R.id.listview);  
18.         listView.setDividerHeight(0);  
19.         timelineAdapter = new TimelineAdapter(this, getData());  
20.         listView.setAdapter(timelineAdapter);  
21.     }  
22. private List > getData() {  </string, object>
23.         List > list =  new  ArrayList >();  </string, object></string, object>
24.         Map  map =  new  HashMap ();  </string, object></string, object>
25.         map.put("title", "這是第1行測試資料");  
26.         list.add(map);  
27.         map = new HashMap ();  </string, object>
28.         map.put("title", "這是第2行測試資料");  
29.         list.add(map);  
30.         map = new HashMap ();  </string, object>
31.         map.put("title", "這是第3行測試資料");  
32.         list.add(map);  
33.         map = new HashMap ();  </string, object>
34.         map.put("title", "這是第4行測試資料");  
35.         list.add(map);  
36. return list;  
37.     }  
38. }  

所以模擬著去寫一個時間軸，並不是什麼複雜的事情，不要被UI設計的圖片嚇到，其實他就是一個普通的listview而已。

良心的公眾號，更多精品文章，不要忘記關注哈

《Android和Java技術棧》