時間軸的組成
第一種 -- 時間線在item裡面
第二種 -- 時間線在外面
第三種 -- 帶點選動畫的時間軸效果
源碼下載下傳
一般時間軸效果都是用listview來實作，一般由圓點、時間線和文字三個控件組成，時間線可以放在listview裡面也可以放在listview的父布局中。先來看一下下面三種效果。
1.第一種 -- 時間線在item裡面
這種是最簡單的時間軸實作方式，所有的控件都是在item裡裡面，下面是布局檔案
item_first.xml
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/image_normal"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_marginLeft="10dp"
android:src="@drawable/point2" />
android:id="@+id/line"
android:layout_width="3dp"
android:layout_height="100dp"
android:layout_below="@+id/image_normal"
android:layout_marginLeft="16dp"
android:background="@color/colorPrimaryDark" />
android:id="@+id/item_first_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/image_normal"
android:padding="3dp"
android:textSize="12dp" />
2.第二種 -- 時間線在外面
這種實作方式是線在ListView外面，這樣線就不會”斷“啦，其他的控件還是在item裡裡面，下面是布局檔案
item_second.xml
android:id="@+id/activity_first"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
android:id="@+id/line"
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:background="@color/colorPrimaryDark" />
android:layout_marginTop="50dp"
android:id="@+id/second_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@null">
3.第三種 -- 帶點選動畫的時間軸效果
第一和第二種時間線都是靜态的，有時候我們想實作ListView選中後的效果，下面再第二種的基礎上實作選中動畫和改變point的圖檔
在adapter中設定一個标記，來記錄目前選中的position的位置public int point; //用來标記點的位置
在adapter的getView( )中設定選中的item
if (position == point){ //設定 選中的條目
viewHold.image.setImageResource(R.drawable.point1);
//初始化動畫
Animation scaleAnimation = new ScaleAnimation(1.0f, 1.5f,1.0f,1.5f,0,0.5f,Animation.ZORDER_BOTTOM,0.5f);
//設定動畫時間
scaleAnimation.setDuration(500);
scaleAnimation.setFillAfter(true);
//給控件設定動畫
viewHold.thirdText.startAnimation(scaleAnimation);
}
在item 的點選事件中
public void onItemClick(AdapterView> parent, View view, int position, long id) {
//改變point 選中的point值
thirdAdapter.point = position;
//重新整理listview
thirdAdapter.notifyDataSetChanged();
thirdListView.setAdapter(thirdAdapter);
}
這中法也可以用來點選item時來動态改變目前布局的内容，可以擴充很多用法，不過性能上需要優化。