android项目解刨之时间轴

最近开发的app中要用到时间轴这东西，需要实现的效果如下：



想想这个东西应该可以用listview实现吧。然后最近就模拟着去写了：

首先写 listview的item的布局:

listview_item.xml

[java] view
plaincopyprint?





<?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="match_parent"

android:background="#ffffff"

android:orientation="vertical"

android:paddingRight="20dp" >





<View

android:id="@+id/view_0"

android:layout_width="1dp"

android:layout_height="25dp"

android:layout_below="@+id/layout_1"

android:layout_marginLeft="71dp"

android:background="#A6A6A6" />



<View

android:id="@+id/view_1"

android:layout_width="1dp"

android:layout_height="25dp"

android:layout_below="@+id/layout_2"

android:layout_marginLeft="71dp"

android:background="#A6A6A6" />



<TextView

android:id="@+id/show_time"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/view_1"

android:layout_marginLeft="30dp"

android:text="测试数据"

android:textSize="12dp" />



<ImageView

android:id="@+id/image"

android:layout_width="15dp"

android:layout_height="15dp"

android:layout_below="@+id/view_1"

android:layout_marginLeft="65dp"

android:src="@drawable/timeline_green" />



<View

android:id="@+id/view_2"

android:layout_width="1dp"

android:layout_height="100dp"

android:layout_below="@+id/image"

android:layout_marginLeft="71dp"

android:background="#A6A6A6" />



<RelativeLayout

android:id="@+id/relative"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/image"

android:layout_marginTop="-20dp"

android:layout_toRightOf="@+id/image"

android:background="@drawable/timeline_content"

android:padding="10dp" >



<ImageView

android:id="@+id/image_1"

android:layout_width="60dp"

android:layout_height="60dp"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

android:layout_marginLeft="5dp"

android:src="@drawable/bg_green_circle_smic" />



<TextView

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:ellipsize="end"

android:maxEms="7"

android:paddingLeft="5dp"

android:singleLine="true"

android:text="测试数据"

android:textSize="12sp" />



</RelativeLayout>



</RelativeLayout>

接下来就是写listview的adapter了：

TimelineAdapter.java

[java] view
plaincopyprint?





package com.example.timelinetext.test;



import java.util.List;

import java.util.Map;



import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.TextView;



public class TimelineAdapter extends BaseAdapter {



private Context context;

private List<Map<String, Object>> list;

private LayoutInflater inflater;



public TimelineAdapter(Context context, List<Map<String, Object>> list) {

super();

this.context = context;

this.list = list;

}



@Override

public int getCount() {



return list.size();

}



@Override

public Object getItem(int position) {

return position;

}



@Override

public long getItemId(int position) {

return position;

}



@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder viewHolder = null;

if (convertView == null) {

inflater = LayoutInflater.from(parent.getContext());

convertView = inflater.inflate(R.layout.listview_item, null);

viewHolder = new ViewHolder();



viewHolder.title = (TextView) convertView.findViewById(R.id.title);

convertView.setTag(viewHolder);

} else {

viewHolder = (ViewHolder) convertView.getTag();

}



String titleStr = list.get(position).get("title").toString();





viewHolder.title.setText(titleStr);



return convertView;

}



static class ViewHolder {

public TextView year;

public TextView month;

public TextView title;

}

}

最后使用：

MainActivity.java

[java] view
plaincopyprint?





package com.example.timelinetext.test;



import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;



import android.app.Activity;

import android.os.Bundle;

import android.widget.ListView;



public class MainActivity extends Activity {



private ListView listView;

List<String> data ;

private TimelineAdapter timelineAdapter;



@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_listview);



listView = (ListView) this.findViewById(R.id.listview);

listView.setDividerHeight(0);

timelineAdapter = new TimelineAdapter(this, getData());

listView.setAdapter(timelineAdapter);



}



private List<Map<String, Object>> getData() {

List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();



Map<String, Object> map = new HashMap<String, Object>();

map.put("title", "这是第1行测试数据");

list.add(map);



map = new HashMap<String, Object>();

map.put("title", "这是第2行测试数据");

list.add(map);



map = new HashMap<String, Object>();

map.put("title", "这是第3行测试数据");

list.add(map);



map = new HashMap<String, Object>();

map.put("title", "这是第4行测试数据");

list.add(map);

return list;

}



}

运行效果如图：



所以模拟着去写一个时间轴，并不是什么复杂的事情，不要被UI设计的图片吓到，其实他就是一个普通的listview而已。

源码下载