標籤：android android開發
聽麥子學院android開發老師說要實現手勢翻頁效果，主要用到ViewFlipper和GestureDetector.
ViewFlipper變化當前顯示內容,GestureDetector監聽手勢.
用於多頁的展示非常酷.
現在我就給大家簡單說明下，
首先建立工程：TestFlip,建立主Activity：TestFlip.
在res/layout/main.xml中添加flipper資訊，如下：
Java代碼
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. >
7. <ViewFlipper android:id="@+id/ViewFlipper01"
8. android:layout_width="fill_parent" android:layout_height="fill_parent">
9. </ViewFlipper>
10.</LinearLayout>
然後將TestFlip實現OnGestureListener介面,並實現所有抽象方法,然後開始改造這個類.
首先,聲明兩個私人成員.
Java代碼
1. private ViewFlipper flipper;//ViewFlipper執行個體
2. private GestureDetector detector;//觸摸監聽執行個體
然後在onCreate方法中新增成員初始化.
Java代碼
1. detector = new GestureDetector(this);//初始化觸摸探測
2. flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01);//獲得ViewFlipper執行個體
3.
4. flipper.addView(addTextView("step 1"));//將View添加到flipper隊列中
5. flipper.addView(addTextView("step 2"));
6. flipper.addView(addTextView("step 3"));
7. flipper.addView(addTextView("step 4"));
8. flipper.addView(addTextView("step 5"));
addTextView方法如下：
Java代碼
1. private View addTextView(String text) {
2. TextView tv = new TextView(this);
3. tv.setText(text);
4. tv.setGravity(1);
5. return tv;
6. }
flipper將按照你的添加順序排列這些View,並通過flipper.showNext()和flipper.showPrevious()顯示.
還需要多重寫一個方法：onTouchEvent(MotionEvent event),否則detector檢測不到觸摸,這個方法非常簡單.
Java代碼
1. @Override
2. public boolean onTouchEvent(MotionEvent event) {
3. return this.detector.onTouchEvent(event);
4. }
現在開始做動作監聽，在onFling方法中加入以下內容：
Java代碼
1. @Override
2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
3. float velocityY) {
4. this.flipper.showNext();//顯示flipper中的下一個view
5. return true;
6. }
現在可以運行一下看看效果了.你會發現當滑鼠滑動時畫面只是很簡單的從Step 1變成Step 2,並沒有那種畫面滑動的效果,而且無論你從左向右滑動還是從右向左滑動都是按照同一個順序,現在我們修改一些,讓效果更炫一點.
先在res目錄下建立anim目錄,並建立4個基於Animation的xml檔案,分別命名為：left_in.xml,left_out.xml,right_in.xml,right_left.xml
內容分別為：
left_in.xml:
Java代碼
1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <translate android:fromXDelta="100%p" android:toXDelta="0"
4. android:duration="500" />
5. <t>
left_out.xml:
Java代碼
1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <translate android:fromXDelta="0" android:toXDelta="-100%p"
4. android:duration="500" />
5. <t>
right_in.xml:
Java代碼
1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <translate android:fromXDelta="-100%p" android:toXDelta="0"
4. android:duration="500" />
5. <t>
right_out.xml:
Java代碼
1. <?xml version="1.0" encoding="utf-8"?>
2. <set xmlns:android="http://schemas.android.com/apk/res/android">
3. <translate android:fromXDelta="0" android:toXDelta="100%p"
4. android:duration="500" />
5. <t>
主要是做一個translation動畫,fromXDelta：動畫的開始X位置，toXDelta:動畫的結束X位置，duration：期間.
然後將onFling方法修改為如下：
Java代碼
1. @Override
2. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
3. float velocityY) {
4. if (e1.getX() - e2.getX() > 120) {//如果是從右向左滑動
5. //註冊flipper的進出效果
6. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.left_in));
7. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.left_out));
8. this.flipper.showNext();
9. return true;
10. } else if (e1.getX() - e2.getX() < -120) {//如果是從左向右滑動
11. this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.right_in));
12. this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.right_out));
13. this.flipper.showPrevious();
14. return true;
15. }
16. return false;
17.}
然後重新運行看看效果,如果圖片之類的多，還可以在animation裡加入alpha的效果，如下
Java代碼
1. <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
2. android:duration="500" />
一個手勢翻頁效果就搞定了,用在多內容的展示效果上會非常棒.
更多android開發教程盡在：http://www.maiziedu.com/course/android/
android開發教程：android手勢翻頁效果
