Android自定義時間軸的實現
阿新 • • 發佈：2019-01-23
時間軸
時間軸，顧名思義就是將發生的事件按照時間順序羅列起來，給使用者帶來一種更加直觀的體驗。京東和淘寶的物流順序就是一個時間軸（如圖），想必大家都不陌生。
時間軸的初探
初次見到這種UI，感覺整個佈局似曾相識，但面對那條時間軸卻又不知如何下手。其實，整個時間軸還是可以當做一個ListView處理，只是在Adapter中的佈局要花點心思。好了，廢話不說，看程式碼。
整個效果就是一個ListView,ListView的每個條目的佈局如下
<?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 Holder holder; if (convertView == null) { holder= new Holder(); convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view, null); holder.time = (TextView) convertView.findViewById(R.id.show_time); holder.title= (TextView) convertView.findViewById(R.id.show_title); holder.line = convertView.findViewById(R.id.line_normal); } else { holder= (Holder) convertView.getTag(); } holder.time.setText(datas.get(position).getTime()); holder.title.setText(datas.get(position).getTitle()); //最後一項時，豎線不再顯示 if (position == datas.size() - 1) { item.line.setVisibility(View.GONE); } return convertView; } private class Holder{ TextView time, title; View line; }
時間軸之--橫向時間軸
上述的時間軸實現起來是比較容易的，就不再多說。這裡想說一下的是橫向的時間軸，京東和淘寶訂單未結束時的物流狀態就是一個橫向的時間軸（類似於下圖）
橫向ListView的條目佈局: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); }
<?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>Adapter的程式碼實現:
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Holder holder;
if (convertView == null) {
holder= new Holder();
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_view2, null);
holder.time = (TextView) convertView.findViewById(R.id.show_time);
holder.title = (TextView) convertView.findViewById(R.id.show_title);
holder.lineNorma = convertView.findViewById(R.id.line_normal);
holder.lineHiLight = convertView.findViewById(R.id.line_highlight);
holder.image = (ImageView) convertView.findViewById(R.id.image);
} else {
holder= (Holder) convertView.getTag();
}
//根據資料狀態對檢視做不同的操作
if (datas.get(position).getStatu() == 1) {
holder.lineHiLight.setVisibility(View.VISIBLE);
holder.image.setImageResource(R.drawable.point1);
holder.time.setVisibility(View.VISIBLE);
}
holder.time.setText(datas.get(position).getTime());
holder.title.setText(datas.get(position).getTitle());
//這裡在起始位置，就不顯示“軸”了
if (position == 0) {
holder.lineNorma.setVisibility(View.INVISIBLE);
holder.lineHiLight.setVisibility(View.INVISIBLE);
}
return convertView;
}
private class Holder{
TextView time, title;
View lineNorma, lineHiLight;
ImageView image;
}當然實際開發中的處理會更復雜一點,這裡只是提供了一個這樣的思路,其實思路也是我從網上看的,嘿嘿,不過我感覺這個思路也可用到一些頁面的Indicator上面,效果是一樣的,
當然也可以結合google推出的RecycleView來使用,那樣的話就不用管是水平還是豎直了,做技術最重要的就是思想了,希望這篇文章能給大家一個好的思路