android 简易时间轴(实质是ListView)

ListView的应用

1.在很多时候是要用到时间轴的，有些处理的时间轴比较复杂，这里就给出一个比较简单的时间轴，其实就是ListView里面的Item的设计。

直接上代码：

ListView，item的xml文件-->time_item.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#ffffff" >
 6
 7     <View
 8         android:id="@+id/top_line"
 9         android:layout_width="2dp"
10         android:layout_height="35dp"
11         android:layout_marginLeft="50dp"
12         android:background="@color/gray" />
13
14     <ImageView
15         android:id="@+id/img_icon"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_alignParentLeft="true"
19         android:layout_below="@+id/top_line"
20         android:layout_marginLeft="40dp"
21         android:src="@drawable/timeline_green" />
22
23     <TextView
24         android:id="@+id/tv_time"
25         android:layout_width="wrap_content"
26         android:layout_height="wrap_content"
27         android:layout_below="@id/top_line"
28         android:layout_marginLeft="10dp"
29         android:text="时间" />
30
31     <View
32         android:id="@+id/bottom_line"
33         android:layout_width="2dp"
34         android:layout_height="50dp"
35         android:layout_below="@id/img_icon"
36         android:layout_marginLeft="50dp"
37         android:background="@color/gray" />
38
39     <LinearLayout
40         android:layout_width="match_parent"
41         android:layout_height="match_parent"
42         android:layout_below="@id/top_line"
43         android:layout_marginLeft="65dp"
44         android:background="@drawable/timeline_content"
45         android:orientation="horizontal" >
46
47         <ImageView
48             android:layout_width="wrap_content"
49             android:layout_height="wrap_content"
50             android:src="@drawable/ic_launcher" />
51
52         <TextView
53             android:id="@+id/tv_content"
54             android:layout_width="wrap_content"
55             android:layout_height="wrap_content"
56             android:layout_gravity="center_vertical"
57             android:text="所包含的内容" />
58     </LinearLayout>
59
60 </RelativeLayout>

ListView的适配器：

　　TimeAxisAdapter

 1 public class TimeAxisAdapter extends BaseAdapter {
 2
 3     private List<HashMap<String, Object>> list;
 4
 5     private Context context;
 6
 7     private static class ViewHolder {
 8         private TextView tvContent;
 9     }
10
11     public TimeAxisAdapter(Context context, List<HashMap<String, Object>> list) {
12         this.context = context;
13         this.list = list;
14     }
15
16     @Override
17     public int getCount() {
18         return list.size();
19     }
20
21     @Override
22     public Object getItem(int position) {
23         return list.get(position);
24     }
25
26     @Override
27     public long getItemId(int position) {
28         return position;
29     }
30
31     @Override
32     public View getView(int position, View convertView, ViewGroup parent) {
33
34         ViewHolder viewHolder = null;
35
36         if (convertView == null) {
37             viewHolder = new ViewHolder();
38             convertView = LayoutInflater.from(context).inflate(
39                     R.layout.time_item, null);
40             viewHolder.tvContent = (TextView) convertView
41                     .findViewById(R.id.tv_content);
42
43             viewHolder.tvContent.setText(list.get(position).get("content")
44                     .toString());
45             convertView.setTag(viewHolder);
46         } else {
47             viewHolder = (ViewHolder) convertView.getTag();
48
49         }
50         return convertView;
51     }
52 }

MainActivity.java

 1 public class MainActivity extends Activity {
 2
 3     private ListView listView;
 4
 5     private TimeAxisAdapter mTimeAxisAdapter;
 6
 7     private List<HashMap<String, Object>> list;
 8
 9     @Override
10     protected void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.activity_main);
13         initView();
14     }
15
16     private void initView() {
17         listView = (ListView) findViewById(R.id.listView);
18         listView.setDividerHeight(0);
19         mTimeAxisAdapter = new TimeAxisAdapter(this, getList());
20         listView.setAdapter(mTimeAxisAdapter);
21
22     }
23
24     public List<HashMap<String, Object>> getList() {
25         List<HashMap<String, Object>> listChild = new ArrayList<HashMap<String, Object>>();
26         HashMap<String, Object> map = new HashMap<String, Object>();
27         map.put("content", "111111111111111111");
28         listChild.add(map);
29         HashMap<String, Object> map1 = new HashMap<String, Object>();
30         map1.put("content", "2222222222222");
31         listChild.add(map1);
32         HashMap<String, Object> map2 = new HashMap<String, Object>();
33         map2.put("content", "333333333333333333");
34         listChild.add(map2);
35         HashMap<String, Object> map3 = new HashMap<String, Object>();
36         map3.put("content", "444444444444444444");
37         listChild.add(map3);
38         HashMap<String, Object> map4 = new HashMap<String, Object>();
39         map4.put("content", "5555555555555555");
40         listChild.add(map4);
41         HashMap<String, Object> map5 = new HashMap<String, Object>();
42         map5.put("content", "66666666666");
43         listChild.add(map5);
44         return listChild;
45     }
46
47 }

MainActivity的xml文件：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context=".MainActivity" >
 7
 8     <ListView
 9         android:id="@+id/listView"
10         android:layout_width="match_parent"
11         android:layout_height="match_parent" >
12     </ListView>
13
14 </LinearLayout>

运行后的效果图:

源码地址