android开发(8) 使用ViewFlipper来用手势切换画面 - Android 台灣中文網

a1.png (9.69 KB, 下載次數: 2)

2011-7-10 15:30 上傳

本文中我們初次接觸到了下面個東西：
ViewFlipper 視圖的切換容器視圖，它有很多子視圖，可以使用showPrevious，showNext來向前或者向後切換視圖，不過是沒有動畫效果的
Animation 這個才是動畫
GestureDetector 手勢偵查器，他提供了手勢的一些事件，它封裝了一些手指在屏幕的移動方向的處理，轉換成相應的事件

我們看看實現步驟：
1。寫一個窗體，放置一個ViewFlipper 在視圖裡。並為ViewFlipper 添加子視圖。

<ViewFlipper android:layout_width="fill_parent" android:id="@+id/viewFlipper2"
android:layout_height="fill_parent">
<LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:text="第一" android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:text="第二" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>
<LinearLayout android:id="@+id/linearLayout3" android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:text="第三" android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>
</ViewFlipper>

複製代碼

2註冊窗體的 onTouchEvent事件，這個事件會在窗體被觸摸時觸發。在這個事件觸發後，將事件觸發後的參數扔給一個GestureDetector對像來處理。
3。準備一個GestureDetector對象，為第一步來使用。GestureDetector對像將用戶的，時候觸摸動作轉換成相應的手勢事件。這些事件有：
onDown，onFling，onLongPress，onScroll，onShowPress，onSingleTapUp。本文我們只用到onFling手勢
4.處理onFling手勢的操作。onFling事件觸發時，由操作系統傳入的參數有MotionEvent e1, MotionEvent e2, float velocityX, float velocityY。參數e1,和e2，是手勢觸發的開始位置和結束位置。就是你的手指第一次點擊，和最後離開的屏幕坐標位置。我們用e1,和e2，來判斷用戶是從左到友移動了手指或者從友到左移動了手指。判斷的方法為：

float x1 = e1.getX();
float x2 = e2.getX();
if (x1 - x2 < -100) //從左往右拖動，100代表長度。
{
....
} else if (x1 - x2 > 100) {//從右往左拖動，100代表長度
...
}

複製代碼

5.由於判斷了手勢，那麼我們可以對ViewFlipper的子視圖進行切換了，方法如下

//讓flipper 前移
this.ViewFlipper1.showPrevious();

複製代碼

6。如何處理動畫呢？
為flipper(ViewFlipper )指定一個animation 對象就可以了。

Animation animation =
AnimationUtils.loadAnimation(getApplicationContext(), R.anim.filp_l2r);
//指定一個動畫
this.flipper.setAnimation(animation);

複製代碼

如上代碼所示AnimationUtils.loadAnimation指定一個動畫描述的資源文件。我們的動畫效果是在這裡的資源文件裡描述的。
從左往右的動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:duration="1000" />
</set>

複製代碼

從右往左的效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="1000" />
</set>

複製代碼

fromXDelta是開始的x坐標，是相對於屏幕窗體的坐標位置。toXDelta是結束位置。duration是延遲時間。

Demo.ViewFlipperDemo.rar

44.47 KB, 下載次數: 37, 下載積分: 碎鑽 -1 個

作者: katrina 時間: 2011-8-3 13:23

作者: fishyy 時間: 2012-2-7 09:47
下載試試~

感謝^^

作者: aabbyy 時間: 2012-6-8 08:16
很詳細的解說, 對於 Flipper 的用法總算有了解了.

作者: a0062972 時間: 2012-6-13 10:49

好厲害我也要來學

作者: jiaums 時間: 2012-7-4 12:47
感覺不錯下來試試！

作者: 3000308 時間: 2012-7-4 13:18
0000000000000000000000000000

作者: comeonn 時間: 2012-8-20 11:51
正好需要感謝分享

作者: rexshue 時間: 2012-12-4 10:44
我這種新手，最需要這種好物了！感謝大大的分享

作者: la1168 時間: 2012-12-8 14:03
謝謝了，收藏下看看啊啊

作者: fghdfghfh 時間: 2012-12-13 04:39
好好好好好好好好好好好好好好好好

作者: 12307a 時間: 2015-10-29 16:20
have a good try=]

歡迎光臨 Android 台灣中文網 (https://apk.tw/)