实现Android中的时间轴效果

在最近的一个项目中，我需要实现一个时间轴的效果。经过一番研究和尝试，最终找到了一种较为简洁且有效的方法。下面将具体实现步骤和代码分享给大家。

### 效果预览


图中的数据是随机填充的，看起来有些杂乱，但不影响整体效果的展示。

### 实现思路

实现时间轴效果的核心在于使用`ListView`，并通过自定义每个Item的布局和逻辑来控制时间标签的显示与隐藏。具体来说，每个Item包含三个部分：
1. **时间标签**：包含一个小圆点和一个显示时间的`TextView`。
2. **内容展示区**：用于显示具体内容。
3. **时间轴线条**：贯穿整个时间轴的竖线。

### 布局文件

#### 主布局文件 `activity_main.xml`

```xml

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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


```

#### Item布局文件 `item_time_line.xml`

```xml

android:layout_width="match_parent"
android:layout_height="wrap_content">

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

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

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" />


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" />

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


```

### 适配器实现

#### `DateAdapter.java`

```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 list;

public DateAdapter(Context context, List list) {
this.cOntext= context;
this.list = list;
}

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

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

@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();
}

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.java`

```java
package com.xiaowu.timeline;

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

public DateText() {}

public DateText(String date, String text) {
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;
}
}
```

### 时间格式化工具类

#### `TimeFormat.java`

```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`

```java
package com.xiaowu.timeline;

import java.util.Comparator;

public class DateComparator implements Comparator {
@Override
public int compare(DateText lhs, DateText rhs) {
return rhs.getDate().compareTo(lhs.getDate());
}
}
```

### 场景类

#### `MainActivity.java`

```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;
private List list;
private DateAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

lvList = (ListView) findViewById(R.id.lv_list);
list = new ArrayList<>();
addData();
DateComparator comparator = new DateComparator();
Collections.sort(list, comparator);
adapter = new DateAdapter(this, list);
lvList.setAdapter(adapter);
}

private void addData() {
list.add(new DateText("20140710", "撒大声地"));
list.add(new DateText("20140709", "撒萨达"));
list.add(new DateText("20140726", "撒大ADS"));
// ... 其他数据 ...
}
}
```

### 结语

以上就是实现Android时间轴效果的完整过程。希望这篇文章能对大家有所帮助。如果有任何问题或建议，欢迎留言交流。

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