android项目解刨之时间轴

近期开发的app中要用到时间轴这东西。须要实现的效果例如以下：

想想这个东西应该能够用listview实现吧。

然后近期就模拟着去写了：

首先写  listview的item的布局:

listview_item.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="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

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

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而已。

源代码下载