時間軸
時間軸骂租，顧名思義就是將發(fā)生的事件按照時間順序羅列起來蚊夫，給用戶帶來一種更加直觀的體驗券时。京東和淘寶的物流順序就是一個時間軸（如圖）邮旷，想必大家都不陌生黄选。
京東物流過程
時間軸的初探
初次見到這種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;
}
時間軸之--橫向時間軸
上述的時間軸實現起來是比較容易的，就不再多說亥鬓。這里想說一下的是橫向的時間軸完沪，京東和淘寶訂單未結束時的物流狀態(tài)就是一個橫向的時間軸（類似于下圖）
狀態(tài)1
狀態(tài)2
理解了上邊所說的時間軸，這個也不難嵌戈，只要將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();
}
//根據數據狀態(tài)對視圖做不同的操作
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;
}
當然，實際開發(fā)中對時間軸的處理要比這里復雜的多九府。需按照規(guī)定的數據結構做相應的處理椎瘟，同時也會因內容的差異導致整個視圖發(fā)生不可預料的變化，這里只是一種思路侄旬。如果肺蔚，哪位有更好想法，也可提出儡羔。
2016年10月31日修正
關于適配##
關于這個時間軸的適配宣羊，其實是一個比較麻煩的問題，不同應用因業(yè)務需求需要做不同展示汰蜘。內容會多行或長度不同仇冯，導致整個視圖會變形。這里對上面提到的縱向時間軸的多行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 值固定苛坚。這樣在整個布局中不會出現視圖錯亂的情況。如下圖：
timeLine
橫向時間軸的適配色难，也可以考慮相同的思路炕婶。
總的來說，事件軸上顯示的信息是一個時間流內容的概括莱预，按理來說內容不應該出現很多文字描述，但是實際的項目需求也得考慮项滑。因此適配起來沒有固定的套路依沮，重要的是結合Android各個控件的屬性做文章涯贞。
