android开发(8) 使用ViewFlipper来用手势切换画面

加好友 · 發表於 2011-7-10 15:26

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

您需要登錄才可以下載或查看，沒有帳號？註冊

x

本帖最後由暗桌之光於 2011-7-10 15:31 編輯

使用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是延遲時間。

加好友 · 發表於 2015-10-29 16:20

have a good try=]

加好友 · 發表於 2012-12-13 04:39

好好好好好好好好好好好好好好好好

加好友 · 發表於 2012-12-8 14:03

謝謝了，收藏下看看啊啊

加好友 · 發表於 2012-12-4 10:44

我這種新手，最需要這種好物了！感謝大大的分享

加好友 · 發表於 2012-8-20 11:51

正好需要感謝分享

加好友 · 發表於 2012-7-4 13:18

0000000000000000000000000000

加好友 · 發表於 2012-7-4 12:47

感覺不錯下來試試！

加好友 · 發表於 2012-6-13 10:49

好厲害我也要來學

加好友 · 發表於 2012-6-8 08:16

很詳細的解說, 對於 Flipper 的用法總算有了解了.

[教程] android开发(8) 使用ViewFlipper来用手势切换画面

馬上加入Android 台灣中文網，立即免費下載應用遊戲。

評分

相關帖子

瀏覽過的版塊

警告：您的Adblck已啟用