Android 时间轴

效果图：

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

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

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/lv_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="@null"
        android:divider="@null" >
    </ListView>

</LinearLayout>

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

res/layout/item_time_line.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="wrap_content" >

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="8dp"
            android:background="@drawable/img_line_point" />

        <TextView
            android:id="@+id/txt_date_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:textColor="#FC6802" />
    </RelativeLayout>

    <TextView
        android:id="@+id/txt_date_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/rl_title"
        android:layout_marginLeft="15dp"
        android:paddingBottom="10dp"
        android:textColor="#5296C5" />

    <View
        android:id="@+id/v_line"
        android:layout_width="2dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="#FC6802" />

</RelativeLayout>

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

DateAdapter.java:

package com.xiaowu.timeline;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TextView;

public class DateAdapter extends BaseAdapter {
        private Context context;
        private List<DateText> list;

        public DateAdapter(Context context, List<DateText> list) {
                this.context = context;
                this.list = list;
        }

        @Override
        public int getCount() {
                if (list == null) {
                        return 0;
                }
                return list.size();
        }

        @Override
        public Object getItem(int position) {
                if (list == null) {
                        return null;
                }
                return list.get(position);
        }

        @Override
        public long getItemId(int position) {
                return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
                ViewHolder holder = null;
                if (convertView == null) {
                        holder = new ViewHolder();
                        convertView = LayoutInflater.from(context).inflate(
                                        R.layout.item_time_line, parent, false);
                        holder.date = (TextView) convertView
                                        .findViewById(R.id.txt_date_time);
                        holder.content = (TextView) convertView
                                        .findViewById(R.id.txt_date_content);
                        holder.line = (View) convertView.findViewById(R.id.v_line);
                        holder.title = (RelativeLayout) convertView
                                        .findViewById(R.id.rl_title);
                        convertView.setTag(holder);
                } else {
                        holder = (ViewHolder) convertView.getTag();
                }
                //时间轴竖线的layout
                LayoutParams params = (LayoutParams) holder.line.getLayoutParams();
                //第一条数据，肯定显示时间标题
                if (position == 0) {
                        holder.title.setVisibility(View.VISIBLE);
                        holder.date.setText(TimeFormat.format("yyyy.MM.dd",
                                        list.get(position).getDate()));
                        params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
                        params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.txt_date_content);
                } else { // 不是第一条数据
                        // 本条数据和上一条数据的时间戳相同，时间标题不显示
                        if (list.get(position).getDate()
                                        .equals(list.get(position - 1).getDate())) {
                                holder.title.setVisibility(View.GONE);
                                params.addRule(RelativeLayout.ALIGN_TOP, R.id.txt_date_content);
                                params.addRule(RelativeLayout.ALIGN_BOTTOM,
                                                R.id.txt_date_content);
                        } else {
                                //本条数据和上一条的数据的时间戳不同的时候，显示数据
                                holder.title.setVisibility(View.VISIBLE);
                                holder.date.setText(TimeFormat.format("yyyy.MM.dd",
                                                list.get(position).getDate()));
                                params.addRule(RelativeLayout.ALIGN_TOP, R.id.rl_title);
                                params.addRule(RelativeLayout.ALIGN_BOTTOM,
                                                R.id.txt_date_content);
                        }
                }
                holder.line.setLayoutParams(params);
                holder.content.setText(list.get(position).getText());
                return convertView;
        }

        public static class ViewHolder {
                RelativeLayout title;
                View line;
                TextView date;
                TextView content;
        }
}

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

DateText.java:

package com.xiaowu.timeline;

public class DateText {
        private String date;
        private String text;

        public DateText() {

        }

        public DateText(String date, String text) {
                super();
                this.date = date;
                this.text = text;
        }

        public String getDate() {
                return date;
        }

        public void setDate(String date) {
                this.date = date;
        }

        public String getText() {
                return text;
        }

        public void setText(String text) {
                this.text = text;
        }

}

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

TimeFormat.java:

package com.xiaowu.timeline;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

public class TimeFormat {
        public static String format(String format, String time) {
                String result = "";
                SimpleDateFormat df = new SimpleDateFormat("yyyyMMdd");
                try {
                        Date date = df.parse(time);
                        SimpleDateFormat df1 = new SimpleDateFormat(format);
                        result = df1.format(date);
                } catch (ParseException e) {
                        e.printStackTrace();
                }
                return result;
        }
}

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

DateComparator.java:

package com.xiaowu.timeline;

import java.util.Comparator;

public class DateComparator implements Comparator<DateText> {

        @Override
        public int compare(DateText lhs, DateText rhs) {
                return rhs.getDate().compareTo(lhs.getDate());
        }

}

下面看下场景类：

MainActivity.java:

package com.xiaowu.timeline;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity {
        // 时间轴列表
        private ListView lvList;
        // 数据list
        private List<DateText> list;
        // 列表适配器
        private DateAdapter adapter;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                // findviewbyid
                lvList = (ListView) findViewById(R.id.lv_list);
                list = new ArrayList<DateText>();
                // 添加测试数据
                addData();
                // 将数据按照时间排序
                DateComparator comparator = new DateComparator();
                Collections.sort(list, comparator);
                // listview绑定适配器
                adapter = new DateAdapter(this, list);
                lvList.setAdapter(adapter);
        }

        private void addData() {
                DateText date1 = new DateText("20140710", "撒大声地");
                DateText date2 = new DateText("20140709", "撒萨达");
                DateText date3 = new DateText("20140726", "撒大ADS");
                DateText date4 = new DateText("20140710", "撒达到对萨达撒地");
                DateText date5 = new DateText("20140711", "撒大阿瑟的萨达地");
                DateText date6 = new DateText("20140713", "撒撒大大地");
                DateText date7 = new DateText("20140712", "撒大鼎折覆餗地");
                DateText date8 = new DateText("20140714", "撒大请问阿尔阿斯顿");
                DateText date9 = new DateText("20140709", "撒大亲爱额问问乔恩地");
                DateText date10 = new DateText("20140705", "撒 请问请问地");
                DateText date11 = new DateText("20140729", "撒请问额外确认声地");
                DateText date12 = new DateText("20140725", "撒大按时打算");
                DateText date13 = new DateText("20140716", "撒大爱上大声地");
                DateText date14 = new DateText("20140711", "撒其味无穷地");
                DateText date15 = new DateText("20140710", "撒大请问我期待地");
                DateText date16 = new DateText("20140711", "撒大声萨达");
                DateText date17 = new DateText("20140712", "阿斯达");
                DateText date18 = new DateText("20140711", "撒大声大声道");
                DateText date19 = new DateText("20140715", "阿斯顿撒打算23 ");
                DateText date20 = new DateText("20140723", "范德萨发生");
                DateText date21 = new DateText("20140718", "阿萨德飞洒");
                DateText date22 = new DateText("20140706", "撒打算打算");
                DateText date23 = new DateText("20140714", "撒打算");
                DateText date24 = new DateText("20140726", "轻微的城市的方式");
                DateText date25 = new DateText("20140725", "阿斯达阿斯达现在");
                DateText date26 = new DateText("20140723", "代购费多少自行车");
                DateText date27 = new DateText("20140721", "多撒阿萨德时打算");
                DateText date28 = new DateText("20140716", "爱上大声地啊地");
                DateText date29 = new DateText("20140712", "阿斯蒂芬当我师傅");
                DateText date30 = new DateText("20140710", "撒大声大声道");
                list.add(date1);
                list.add(date2);
                list.add(date3);
                list.add(date4);
                list.add(date5);
                list.add(date6);
                list.add(date7);
                list.add(date8);
                list.add(date9);
                list.add(date10);
                list.add(date11);
                list.add(date12);
                list.add(date13);
                list.add(date14);
                list.add(date15);
                list.add(date16);
                list.add(date17);
                list.add(date18);
                list.add(date19);
                list.add(date20);
                list.add(date21);
                list.add(date22);
                list.add(date23);
                list.add(date24);
                list.add(date25);
                list.add(date26);
                list.add(date27);
                list.add(date28);
                list.add(date29);
                list.add(date30);
        }
}