android手勢翻頁效果

在android中實現手勢翻頁效果，主要用到ViewFlipper和GestureDetector.
ViewFlipper變化當前顯示內容,GestureDetector監聽手勢.
用於多頁的展示非常酷.
以下是簡略說明：

首先創建工程：TestFlip,創建主Activity：TestFlip.
在res/layout/main.xml中添加flipper信息，如下：
 

Java代碼

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
    <ViewFlipper android:id="@+id/ViewFlipper01" 
        android:layout_width="fill_parent" android:layout_height="fill_parent"> 
    </ViewFlipper> 
</LinearLayout> 

然後將TestFlip實現OnGestureListener接口,並實現所有抽象方法,然後開始改造這個類.
首先,聲明兩個私有成員.
  Java代碼

private ViewFlipper flipper;//ViewFlipper實例  
private GestureDetector detector;//觸摸監聽實例  

然後在onCreate方法中添加成員初始化.
  Java代碼

detector = new GestureDetector(this);//初始化觸摸探測  
flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper01);//獲得ViewFlipper實例  
   
flipper.addView(addTextView("step 1"));//將View添加到flipper隊列中  
flipper.addView(addTextView("step 2"));  
flipper.addView(addTextView("step 3"));  
flipper.addView(addTextView("step 4"));  
flipper.addView(addTextView("step 5"));  

addTextView方法如下：
  Java代碼

private View addTextView(String text) {  
        TextView tv = new TextView(this);  
        tv.setText(text);  
        tv.setGravity(1);  
        return tv;  
    }  

flipper將按照你的添加順序排列這些View,並通過flipper.showNext()和flipper.showPrevious()顯示.
還需要多重寫一個方法：onTouchEvent(MotionEvent event),否則detector檢測不到觸摸,這個方法非常簡單.
  Java代碼

@Override 
    public boolean onTouchEvent(MotionEvent event) {  
        return this.detector.onTouchEvent(event);  
    }  

現在開始做動作監聽，在onFling方法中加入以下內容：
  Java代碼

@Override 
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
            float velocityY) {  
        this.flipper.showNext();//顯示flipper中的下一個view  
        return true;  
    }  

現在可以運行一下看看效果了.你會發現當鼠標滑動時畫面只是很簡單的從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代碼

<?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" 
        android:duration="500" /> 
</set> 
 

 

left_out.xml:
 

Java代碼

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

right_in.xml:
  Java代碼

<?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" 
        android:duration="500" /> 
</set> 
 

right_out.xml:
  Java代碼

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

主要是做一個translation動畫,fromXDelta：動畫的開始X位置，toXDelta:動畫的結束X位置，duration：持續時間.
然後將onFling方法修改為如下：
  Java代碼

@Override 
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
        float velocityY) {  
    if (e1.getX() - e2.getX() > 120) {//如果是從右向左滑動  
                    //注冊flipper的進出效果  
        this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.left_in));  
        this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.left_out));  
        this.flipper.showNext();  
        return true;  
    } else if (e1.getX() - e2.getX() < -120) {//如果是從左向右滑動  
        this.flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.right_in));  
        this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.right_out));  
        this.flipper.showPrevious();  
        return true;  
    }  
    return false;  
}  

然後重新運行看看效果,如果圖片之類的多，還可以在animation裡加入alpha的效果，如下
  Java代碼

 

<alpha android:fromAlpha="0.1" android:toAlpha="1.0" 
        android:duration="500" />  
 

一個手勢翻頁效果就搞定了,用在多內容的展示效果上會非常棒.