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" />  

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