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

源碼下載