先上效果圖：

實現時間軸的原理

listview的基本使用，相信大家都很熟悉。先在layout下新建一個xml佈局檔案，對應一個子項的listView的顯示內容。在上面的圖我們可以看到，每一項都是 有3個 textview控制元件，分別顯示日期、時間、和事件。之後新建一個介面卡，作為listview的介面卡，之後在mainactivity呼叫即可，我在這裡新建一個實體類，更容易操作。

新建一個子項.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:orientation="vertical"
    >

    <View
        android:id="@+id/view_1"
        android:layout_width="2dp"
        android:layout_height="15dp"
        android:layout_marginLeft
 
="30dp"
        android:background="#E9F01D" />

    <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="24dp"
        android:src="@drawable/timeline_green" />

    <View
        android:id="@+id/view_2"
        android:layout_width="2dp"
        android:layout_height="45dp"
        android:layout_below="@+id/image"
        android:layout_marginLeft="30dp"
        android:background="#E9F01D" />

    <RelativeLayout
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/image"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="-20dp"
        android:layout_toRightOf="@+id/image"
        android:background="@drawable/timeline_content"
        android:padding="5dp"
        android:layout_marginRight="25dp">

        <TextView
            android:id="@+id/time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:text="03:22"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_toRightOf="@id/time"
            android:text="由【江蘇蘇州中轉部】發往【江蘇蘇州公司】"
            android:textSize="14sp" />

    </RelativeLayout>
    <TextView
        android:id="@+id/day"
        android:textColor="#fff"
        android:layout_marginLeft="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/view_2"
        android:layout_marginTop="-2dp"
        android:gravity="center"
        android:text="01月13日"
        android:background="@mipmap/timeline_month_day"
        android:textSize="8sp" />

    <View
        android:id="@+id/view_5"
        android:layout_width="2dp"
        android:layout_height="10dp"
        android:layout_alignLeft="@+id/view_2"
        android:layout_below="@+id/day"
        android:background="#E9F01D" />

</RelativeLayout>

新建一個javabean，方便呼叫

程式碼如下：

```
/*
 *  專案名：  ListViewTime 
 *  包名：    com.example.xuhong.listviewtime
 *  檔名:   DataBean
 *  建立者:   XuHong
 *  建立時間:  2017/1/24 22:24
 *  描述：    javabean
 */
public class DataBean  {

    //天
    private String day;
    //時間
    private String time;
    //資訊
    private String msg;

    public DataBean(String day,String time,String msg){
        this.day=day;
        this.time = time;
        this.msg = msg;
    }
    public String getDay() {
        return day;
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
    }

編寫父佈局（就一個ListView）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/base_color"
   >

    <ListView
        android:listSelector="#00000000"
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>


</LinearLayout>

子佈局的介面卡(ListViewAdapter.java)

import android.content.Context;
import android.support.annotation.NonNull;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.List;

/*
* 專案名： ListViewTime
* 包名： com.example.xuhong.listviewtime
* 檔名: ListViewAdapter
* 建立者: XuHong
* 建立時間: 2017/1/24 22:22
* 描述： 介面卡
*/
public class ListViewAdapter extends ArrayAdapter {
private int resourceID;

public ListViewAdapter(Context context, int resource, List<DataBean> objects) {
    super(context, resource, objects);
    resourceID =resource;
}

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

    DataBean bean = getItem(position);

    ViewHolder viewHolder =null;

    View view;

    if (convertView == null) {

        view=LayoutInflater.from(getContext()).inflate(resourceID,parent,false);

        viewHolder = new ViewHolder();

        viewHolder.tv_day = (TextView) view.findViewById(R.id.day);
        viewHolder.tv_time = (TextView) view.findViewById(R.id.time);
        viewHolder.tv_msg = (TextView) view.findViewById(R.id.content);

        view.setTag(viewHolder);
    } else {
        view=convertView;
        viewHolder = (ViewHolder) view.getTag();
    }

    viewHolder.tv_day.setText(bean.getDay());
    viewHolder.tv_time.setText(bean.getTime());
    viewHolder.tv_msg.setText(bean.getMsg());

    return view;
}

class ViewHolder {
    private TextView tv_day;
    private TextView tv_time;
    private TextView tv_msg;

}
}

父佈局實現(MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

private ListView ListView;

private ListViewAdapter listviewadapter;

private List<DataBean> mList = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //去掉陰影
    getSupportActionBar().setElevation(0);
    ListView= (android.widget.ListView) findViewById(R.id.listview);
    //去控制元件的邊緣陰影
    ListView.setDivider(null);
    initData();
    initView();
}

private void initData() {
        DataBean data =new DataBean("2月12號","08:23","京東快遞打包，即將出庫");
        mList.add(data);
        DataBean data2 =new DataBean("2月12號","09:30","快遞打包，上車，目的地：陽春");
        mList.add(data2);
        DataBean data3 =new DataBean("2月13號","07:23","到站陽春，即將送出");
        mList.add(data3);
        DataBean data4 =new DataBean("2月13號","13:23","快遞到達崗美，即將派送.");
        mList.add(data4);
        DataBean data5 =new DataBean("2月13號","18:23","請留意電話，派送人：小徐\nQQ:870189248");
        mList.add(data5);

}

private void initView() {
    listviewadapter = new ListViewAdapter(MainActivity.this, R.layout.layout_time,mList);
    ListView.setAdapter(listviewadapter);

}

}

OK！