Android 時間軸的實現

時間軸

時間軸，顧名思義就是將發生的事件按照時間順序羅列起來，給用戶帶來一種更加直觀的體驗。京東和淘寶的物流順序就是一個時間軸（如圖），想必大家都不陌生。

時間軸的初探

初次見到這種UI，感覺整個布局似曾相識，但面對那條時間軸卻又不知如何下手。其實，整個時間軸還是可以當做一個ListView處理，只是在Adapter中的布局要花點心思。好了，廢話不說，看代碼。

效果預覽

整個MainActivity的布局就是應ListView，這里不再贅述。主要說一下ListView的Adapter實現方法：

• item_view.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">

    <ImageView
        android:id="@+id/image"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginLeft="85dp"
        android:src="@drawable/point2" />

    <View
        android:id="@+id/line_normal"
        android:layout_width="3dp"
        android:layout_height="100dp"
        android:layout_below="@+id/image"
        android:layout_marginLeft="91dp"
        android:background="@color/colorAccent" />

    <TextView
        android:id="@+id/show_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:layout_toLeftOf="@id/image"
        android:padding="3dp"     
        android:textSize="12dp" />

    <TextView
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toRightOf="@id/image"
        android:padding="3dp"    
        android:textSize="12dp" />

</RelativeLayout>

• Adapter的getView方法（其他方法就不貼了，都是老樣子）

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Item item;
        if (convertView == null) {
            item = new Item();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view, null);
            item.time = (TextView) convertView.findViewById(R.id.show_time);
            item.title= (TextView) convertView.findViewById(R.id.show_title);
            item.line = convertView.findViewById(R.id.line_normal);
        } else {
            item = (Item) convertView.getTag();
        }

        item.time.setText(datas.get(position).getTime());
        item.title.setText(datas.get(position).getTitle());

        //最后一項時，豎線不再顯示
        if (position == datas.size() - 1) {
            item.line.setVisibility(View.GONE);
        }

        return convertView;
    }

    private class Item {
        TextView time, title;
        View line;
    }

時間軸之--橫向時間軸

理解了上邊所說的時間軸，這個也不難，只要將ListView做成橫向的就可以了。

關於橫向ListView的實現，網上有很多大神已經解決，所以很慶幸我們可以站在巨人的肩膀上前行。

• MainActivity

private Context mContext;
    //一個橫向的ListView
    private HorizontalListView listview;
    private TimeLineAdapter2 adapter;
    List<ItemBean> datas = new ArrayList<ItemBean>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        mContext = this;
        setContentView(R.layout.activity_time_line2);
        InitDatas();
        listview = (HorizontalListView) findViewById(R.id.list);
        adapter = new TimeLineAdapter2(mContext, datas);
        listview.setAdapter(adapter);
    }

    /**
     * 這里用虛擬數據實現，僅供參考
     */
    private void InitDatas() {
        // TODO Auto-generated method stub
        ItemBean item1 = new ItemBean();
        item1.setTitle("提交訂單");
        item1.setTime("03-14 08:13");
        item1.setStatu(1);
        ItemBean item2 = new ItemBean();
        item2.setTitle("已支付");
        item2.setTime("03-14 22:32");
        item2.setStatu(1);
        ItemBean item3 = new ItemBean();
        item3.setTitle("商品出庫");
        item3.setTime("03-15 00:33");
        item3.setStatu(0);
        ItemBean item4 = new ItemBean();
        item4.setTitle("已簽收");
        item4.setTime("03-15 15:55");
        item4.setStatu(0);

        datas.add(item1);
        datas.add(item2);
        datas.add(item3);
        datas.add(item4);
    }

• item_view2.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" >

    <TextView
        android:layout_alignRight="@id/image"
        android:id="@+id/show_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:textSize="12dp" />

    <TextView
        android:layout_alignRight="@id/image"
        android:visibility="invisible"
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:padding="5dp"
        android:textSize="12dp" />

    <View
        android:id="@+id/line_normal"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:layout_centerVertical="true"
        android:background="#A6A6A6" />
    <View
        android:visibility="gone"
        android:id="@+id/line_highlight"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:layout_centerVertical="true"
        android:background="@color/colorAccent" />

    <ImageView
        android:layout_toRightOf="@id/line_normal"
        android:id="@+id/image"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_below="@id/show_title"
        android:src="@drawable/point2" />

</RelativeLayout>

為了方便便於理解，這里可以看一下上面這個xml文件實現的實際效果圖

• Adapter的實現

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        Item item;
        if (convertView == null) {
            item = new Item();
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view2, null);
            item.time = (TextView) convertView.findViewById(R.id.show_time);
            item.title = (TextView) convertView.findViewById(R.id.show_title);
            item.lineNorma = convertView.findViewById(R.id.line_normal);
            item.lineHiLight = convertView.findViewById(R.id.line_highlight);
            item.image = (ImageView) convertView.findViewById(R.id.image);
        } else {
            item = (Item) convertView.getTag();
        }

        
        //根據數據狀態對視圖做不同的操作
        if (datas.get(position).getStatu() == 1) {
            item.lineHiLight.setVisibility(View.VISIBLE);
            item.image.setImageResource(R.drawable.point1);
            item.time.setVisibility(View.VISIBLE);
        }

        item.time.setText(datas.get(position).getTime());
        item.title.setText(datas.get(position).getTitle());

        
        //這里在起始位置，就不顯示“軸”了
        if (position == 0) {
            item.lineNorma.setVisibility(View.INVISIBLE);
            item.lineHiLight.setVisibility(View.INVISIBLE);
        }

        return convertView;
    }

    private class Item {
        TextView time, title;
        View lineNorma, lineHiLight;
        ImageView image;
    }

當然，實際開發中對時間軸的處理要比這里復雜的多。需按照規定的數據結構做相應的處理，同時也會因內容的差異導致整個視圖發生不可預料的變化，這里只是一種思路。如果，哪位有更好想法，也可提出。

修正

關於適配

關於這個時間軸的適配，其實是一個比較麻煩的問題，不同應用因業務需求需要做不同展示。內容會多行或長度不同，導致整個視圖會變形。這里對上面提到的縱向時間軸的多行textView提供一種簡單的思路：

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


    <TextView
        android:id="@+id/show_title"
        android:layout_width="100dp"
        android:gravity="right"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:padding="3dp"
        android:lines="3"
        android:text="測試數據"
        android:textSize="12sp" />


    <RelativeLayout
        android:id="@+id/middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/show_title">

        <ImageView
            android:id="@+id/image"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/point2" />

        <View
            android:id="@+id/line_normal"
            android:layout_width="3dp"
            android:layout_height="100dp"
            android:layout_below="@+id/image"
            android:layout_centerHorizontal="true"
            android:background="@color/colorAccent" />

    </RelativeLayout>

    <TextView
        android:id="@+id/show_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toRightOf="@id/middle"
        android:padding="3dp"
        android:text="測試數據"
        android:textSize="12dp" />

</RelativeLayout>

代碼里的做法是將 TextView的長度固定，同時也將lines 值固定。這樣在整個布局中不會出現視圖錯亂的情況。如下圖：

橫向時間軸的適配，也可以考慮相同的思路。

總的來說，事件軸上顯示的信息是一個時間流內容的概括，按理來說內容不應該出現很多文字描述，但是實際的項目需求也得考慮。因此適配起來沒有固定的套路，重要的是結合Android各個控件的屬性做文章。