Android时间轴效果的实现

最近项目需要用到时间轴的效果，网上看了几个例子，和想要实现的效果也不尽相同，下面将我的实现方法和思路说一下。首先看下效果图：

数据是随便填的，显得有点乱，但是不影响效果。实现方面主要是用ListView来实现，主要是根据ListView的item位置与上一条数据进行比较，来控制时间的显示隐藏效果。思路很简单，下面看代码实现：

首先是页面的整体布局，很简单，就一个ListView：

res/layout/activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:orientation="vertical" >
   
6. 
   
7.     <ListView
   
8.         android:id="@+id/lv_list"
   
9.         android:layout_width="match_parent"
   
10.         android:layout_height="wrap_content"
    
11.         android:cacheColorHint="@null"
    
12.         android:divider="@null" >
    
13.     </ListView>
    
14. 
    
15. </LinearLayout>

复制代码

ListView的item的布局分了三部分，一个需要显示隐藏的标题栏，包括一个小圆点和一个显示时间的TextView，第二部分是展示的内容，最后是时间轴的竖线。

res/layout/item_time_line.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="wrap_content" >
   
5. 
   
6.     <RelativeLayout
   
7.         android:id="@+id/rl_title"
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="wrap_content"
   
10.         android:paddingTop="10dp" >
    
11. 
    
12.         <ImageView
    
13.             android:layout_width="wrap_content"
    
14.             android:layout_height="wrap_content"
    
15.             android:layout_centerVertical="true"
    
16.             android:layout_marginLeft="8dp"
    
17.             android:background="@drawable/img_line_point" />
    
18. 
    
19.         <TextView
    
20.             android:id="@+id/txt_date_time"
    
21.             android:layout_width="wrap_content"
    
22.             android:layout_height="wrap_content"
    
23.             android:layout_centerVertical="true"
    
24.             android:layout_marginLeft="15dp"
    
25.             android:textColor="#FC6802" />
    
26.     </RelativeLayout>
    
27. 
    
28.     <TextView
    
29.         android:id="@+id/txt_date_content"
    
30.         android:layout_width="wrap_content"
    
31.         android:layout_height="wrap_content"
    
32.         android:layout_below="@id/rl_title"
    
33.         android:layout_marginLeft="15dp"
    
34.         android:paddingBottom="10dp"
    
35.         android:textColor="#5296C5" />
    
36. 
    
37.     <View
    
38.         android:id="@+id/v_line"
    
39.         android:layout_width="2dp"
    
40.         android:layout_height="wrap_content"
    
41.         android:layout_marginLeft="10dp"
    
42.         android:background="#FC6802" />
    
43. 
    
44. </RelativeLayout>

复制代码

下面看主要的实现部分，是在listview的适配器中：

DateAdapter.java

1. package com.xiaowu.timeline;
   
2. 
   
3. import java.util.List;
   
4. 
   
5. import android.content.Context;
   
6. import android.view.LayoutInflater;
   
7. import android.view.View;
   
8. import android.view.ViewGroup;
   
9. import android.widget.BaseAdapter;
   
10. import android.widget.RelativeLayout;
    
11. import android.widget.RelativeLayout.LayoutParams;
    
12. import android.widget.TextView;
    
13. 
    
14. public class DateAdapter extends BaseAdapter {
    
15.         private Context context;
    
16.         private List<DateText> list;
    
17. 
    
18.         public DateAdapter(Context context, List<DateText> list) {
    
19.                 this.context = context;
    
20.                 this.list = list;
    
21.         }
    
22. 
    
23.         @Override
    
24.         public int getCount() {
    
25.                 if (list == null) {
    
26.                         return 0;
    
27.                 }
    
28.                 return list.size();
    
29.         }
    
30. 
    
31.         @Override
    
32.         public Object getItem(int position) {
    
33.                 if (list == null) {
    
34.                         return null;
    
35.                 }
    
36.                 return list.get(position);
    
37.         }
    
38. 
    
39.         @Override
    
40.         public long getItemId(int position) {
    
41.                 return position;
    
42.         }
    
43. 
    
44.         @Override
    
45.         public View getView(int position, View convertView, ViewGroup parent) {
    
46.                 ViewHolder holder = null;
    
47.                 if (convertView == null) {
    
48.                         holder = new ViewHolder();
    
49.                         convertView = LayoutInflater.from(context).inflate(
    
50.                                         R.layout.item_time_line, parent, false);
    
51.                         holder.date = (TextView) convertView
    
52.                                         .findViewById(R.id.txt_date_time);
    
53.                         holder.content = (TextView) convertView
    
54.                                         .findViewById(R.id.txt_date_content);
    
55.                         holder.line = (View) convertView.findViewById(R.id.v_line);
    
56.                         holder.title = (RelativeLayout) convertView
    
57.                                         .findViewById(R.id.rl_title);
    
58.                         convertView.setTag(holder);
    
59.                 } else {
    
60.                         holder = (ViewHolder) convertView.getTag();
    
61.                 }
    
62.                 //时间轴竖线的layout
    
63.                 LayoutParams params = (LayoutParams) holder.line.getLayoutParams();
    
64.                 //第一条数据，肯定显示时间标题
    
65.                 if (position == 0) {
    
66.                         holder.title.setVisibility(View.VISIBLE);
    
67.                         holder.date.setText(TimeFormat.format("yyyy.MM.dd",
    
68.                                         list.get(position).getDate()));
    
69.                         params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
    
70.                         params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.txt_date_content);
    
71.                 } else { // 不是第一条数据
    
72.                         // 本条数据和上一条数据的时间戳相同，时间标题不显示
    
73.                         if (list.get(position).getDate()
    
74.                                         .equals(list.get(position - 1).getDate())) {
    
75.                                 holder.title.setVisibility(View.GONE);
    
76.                                 params.addRule(RelativeLayout.ALIGN_TOP, R.id.txt_date_content);
    
77.                                 params.addRule(RelativeLayout.ALIGN_BOTTOM,
    
78.                                                 R.id.txt_date_content);
    
79.                         } else {
    
80.                                 //本条数据和上一条的数据的时间戳不同的时候，显示数据
    
81.                                 holder.title.setVisibility(View.VISIBLE);
    
82.                                 holder.date.setText(TimeFormat.format("yyyy.MM.dd",
    
83.                                                 list.get(position).getDate()));
    
84.                                 params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
    
85.                                 params.addRule(RelativeLayout.ALIGN_BOTTOM,
    
86.                                                 R.id.txt_date_content);
    
87.                         }
    
88.                 }
    
89.                 holder.line.setLayoutParams(params);
    
90.                 holder.content.setText(list.get(position).getText());
    
91.                 return convertView;
    
92.         }
    
93. 
    
94.         public static class ViewHolder {
    
95.                 RelativeLayout title;
    
96.                 View line;
    
97.                 TextView date;
    
98.                 TextView content;
    
99.         }
    
100. }
     
101. 
     

复制代码

其中DateText是实体类，包括标题和内容：

DateText.java

1. package com.xiaowu.timeline;
   
2. 
   
3. public class DateText {
   
4.         private String date;
   
5.         private String text;
   
6. 
   
7.         public DateText() {
   
8. 
   
9.         }
   
10. 
    
11.         public DateText(String date, String text) {
    
12.                 super();
    
13.                 this.date = date;
    
14.                 this.text = text;
    
15.         }
    
16. 
    
17.         public String getDate() {
    
18.                 return date;
    
19.         }
    
20. 
    
21.         public void setDate(String date) {
    
22.                 this.date = date;
    
23.         }
    
24. 
    
25.         public String getText() {
    
26.                 return text;
    
27.         }
    
28. 
    
29.         public void setText(String text) {
    
30.                 this.text = text;
    
31.         }
    
32. 
    
33. }
    
34. 
    

复制代码

adapter里面用到了一个时间戳转为指定格式的工具类：

TimeFormat.java

1. package com.xiaowu.timeline;
   
2. 
   
3. import java.text.ParseException;
   
4. import java.text.SimpleDateFormat;
   
5. import java.util.Date;
   
6. 
   
7. public class TimeFormat {
   
8.         public static String format(String format, String time) {
   
9.                 String result = "";
   
10.                 SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
    
11.                 try {
    
12.                         Date date = df.parse(time);
    
13.                         SimpleDateFormat df1 = new SimpleDateFormat(format);
    
14.                         result = df1.format(date);
    
15.                 } catch (ParseException e) {
    
16.                         e.printStackTrace();
    
17.                 }
    
18.                 return result;
    
19.         }
    
20. }
    
21. 
    

复制代码

场景类中还用到一个比较时间戳的工具类：

DateComparator.java

1. package com.xiaowu.timeline;
   
2. 
   
3. import java.util.Comparator;
   
4. 
   
5. public class DateComparator implements Comparator<DateText> {
   
6. 
   
7.         @Override
   
8.         public int compare(DateText lhs, DateText rhs) {
   
9.                 return rhs.getDate().compareTo(lhs.getDate());
   
10.         }
    
11. 
    
12. }
    
13. 
    

复制代码

下面看下场景类：

MainActivity.java

1. package com.xiaowu.timeline;
   
2. 
   
3. import java.util.ArrayList;
   
4. import java.util.Collections;
   
5. import java.util.List;
   
6. 
   
7. import android.app.Activity;
   
8. import android.os.Bundle;
   
9. import android.widget.ListView;
   
10. 
    
11. public class MainActivity extends Activity {
    
12.         // 时间轴列表
    
13.         private ListView lvList;
    
14.         // 数据list
    
15.         private List<DateText> list;
    
16.         // 列表适配器
    
17.         private DateAdapter adapter;
    
18. 
    
19.         @Override
    
20.         protected void onCreate(Bundle savedInstanceState) {
    
21.                 super.onCreate(savedInstanceState);
    
22.                 setContentView(R.layout.activity_main);
    
23.                 // findviewbyid
    
24.                 lvList = (ListView) findViewById(R.id.lv_list);
    
25.                 list = new ArrayList<DateText>();
    
26.                 // 添加测试数据
    
27.                 addData();
    
28.                 // 将数据按照时间排序
    
29.                 DateComparator comparator = new DateComparator();
    
30.                 Collections.sort(list, comparator);
    
31.                 // listview绑定适配器
    
32.                 adapter = new DateAdapter(this, list);
    
33.                 lvList.setAdapter(adapter);
    
34.         }
    
35. 
    
36.         private void addData() {
    
37.                 DateText date1 = new DateText("20140710", "撒大声地");
    
38.                 DateText date2 = new DateText("20140709", "撒萨达");
    
39.                 DateText date3 = new DateText("20140726", "撒大ADS");
    
40.                 DateText date4 = new DateText("20140710", "撒达到对萨达撒地");
    
41.                 DateText date5 = new DateText("20140711", "撒大阿瑟的萨达地");
    
42.                 DateText date6 = new DateText("20140713", "撒撒大大地");
    
43.                 DateText date7 = new DateText("20140712", "撒大鼎折覆餗地");
    
44.                 DateText date8 = new DateText("20140714", "撒大请问阿尔阿斯顿");
    
45.                 DateText date9 = new DateText("20140709", "撒大亲爱额问问乔恩地");
    
46.                 DateText date10 = new DateText("20140705", "撒 请问请问地");
    
47.                 DateText date11 = new DateText("20140729", "撒请问额外确认声地");
    
48.                 DateText date12 = new DateText("20140725", "撒大按时打算");
    
49.                 DateText date13 = new DateText("20140716", "撒大爱上大声地");
    
50.                 DateText date14 = new DateText("20140711", "撒其味无穷地");
    
51.                 DateText date15 = new DateText("20140710", "撒大请问我期待地");
    
52.                 DateText date16 = new DateText("20140711", "撒大声萨达");
    
53.                 DateText date17 = new DateText("20140712", "阿斯达");
    
54.                 DateText date18 = new DateText("20140711", "撒大声大声道");
    
55.                 DateText date19 = new DateText("20140715", "阿斯顿撒打算23 ");
    
56.                 DateText date20 = new DateText("20140723", "范德萨发生");
    
57.                 DateText date21 = new DateText("20140718", "阿萨德飞洒");
    
58.                 DateText date22 = new DateText("20140706", "撒打算打算");
    
59.                 DateText date23 = new DateText("20140714", "撒打算");
    
60.                 DateText date24 = new DateText("20140726", "轻微的城市的方式");
    
61.                 DateText date25 = new DateText("20140725", "阿斯达阿斯达现在");
    
62.                 DateText date26 = new DateText("20140723", "代购费多少自行车");
    
63.                 DateText date27 = new DateText("20140721", "多撒阿萨德时打算");
    
64.                 DateText date28 = new DateText("20140716", "爱上大声地啊地");
    
65.                 DateText date29 = new DateText("20140712", "阿斯蒂芬当我师傅");
    
66.                 DateText date30 = new DateText("20140710", "撒大声大声道");
    
67.                 list.add(date1);
    
68.                 list.add(date2);
    
69.                 list.add(date3);
    
70.                 list.add(date4);
    
71.                 list.add(date5);
    
72.                 list.add(date6);
    
73.                 list.add(date7);
    
74.                 list.add(date8);
    
75.                 list.add(date9);
    
76.                 list.add(date10);
    
77.                 list.add(date11);
    
78.                 list.add(date12);
    
79.                 list.add(date13);
    
80.                 list.add(date14);
    
81.                 list.add(date15);
    
82.                 list.add(date16);
    
83.                 list.add(date17);
    
84.                 list.add(date18);
    
85.                 list.add(date19);
    
86.                 list.add(date20);
    
87.                 list.add(date21);
    
88.                 list.add(date22);
    
89.                 list.add(date23);
    
90.                 list.add(date24);
    
91.                 list.add(date25);
    
92.                 list.add(date26);
    
93.                 list.add(date27);
    
94.                 list.add(date28);
    
95.                 list.add(date29);
    
96.                 list.add(date30);
    
97.         }
    
98. }
    
99. 
    

复制代码

附上代码： 

游客，如果您要查看本帖隐藏内容请回复

另，我在github也发现了一个不错的时间轴项目：
https://github.com/razerdp/UnderLineLinearLayout