閱讀116 返回首頁    go 小米 go 小米手環

ViewFlipper的使用

 

屏幕切換指的是在同一個Activity內屏幕見的切換，最長見的情況就是在一個FrameLayout內有多個頁麵，比如一個係統設置頁麵；一個個性化設置頁麵。


通過查看OPhone API文檔可以發現，有個android.widget.ViewAnimator類繼承至FrameLayout，ViewAnimator類的作用是為FrameLayout裏麵的View切換提供動畫效果。該類有如下幾個和動畫相關的函數：
l setInAnimation：設置View進入屏幕時候使用的動畫，該函數有兩個版本，一個接受單個參數，類型為android.view.animation.Animation；一個接受兩個參數，類型為Context和int，分別為Context對象和定義Animation的resourceID。
 
  • setOutAnimation: 設置View退出屏幕時候使用的動畫，參數setInAnimation函數一樣。
  • showNext： 調用該函數來顯示FrameLayout裏麵的下一個View。
  • showPrevious： 調用該函數來顯示FrameLayout裏麵的上一個View。
 
一般不直接使用ViewAnimator而是使用它的兩個子類ViewFlipper和ViewSwitcher。ViewFlipper可以用來指定FrameLayout內多個View之間的切換效果，可以一次指定也可以每次切換的時候都指定單獨的效果。該類額外提供了如下幾個函數：
 
  • isFlipping： 用來判斷View切換是否正在進行
  • setFilpInterval：設置View之間切換的時間間隔
  • startFlipping：使用上麵設置的時間間隔來開始切換所有的View，切換會循環進行
  • stopFlipping: 停止View切換
ViewSwitcher 顧名思義Switcher特指在兩個View之間切換。可以通過該類指定一個ViewSwitcher.ViewFactory 工程類來創建這兩個View。該類也具有兩個子類ImageSwitcher、TextSwitcher分別用於圖片和文本切換。
在教程中通過示例介紹ViewFlipper 的使用，其他的使用方式是類似的。詳細信息可以參考文檔：
https://androidappdocs-staging.appspot.com/reference/android/widget/ViewAnimator.html
 
ViewFlipper示例
記住，ViewFlipper是繼承至FrameLayout的，所以它是一個Layout裏麵可以放置多個View。在示例中定義一個ViewFlipper，裏麵包含三個ViewGroup作為示例的三個屏幕，每個ViewGroup中包含一個按鈕和一張圖片，點擊按鈕則顯示下一個屏幕。代碼如下（res\layout\main.xml）：
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout   
  3.     xmlns:android="https://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"    
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="fill_parent">   
  7.     <ViewFlipper android:id="@+id/details"  
  8.        android:layout_width="fill_parent"    
  9.        android:layout_height="fill_parent"  
  10.        android:persistentDrawingCache="animation"  
  11.        android:flipInterval="1000"  
  12.        android:inAnimation="@anim/push_left_in"  
  13. android:outAnimation="@anim/push_left_out"  
  14. >    
  15.        <LinearLayout   
  16.            android:orientation="vertical"  
  17.            android:layout_width="fill_parent"    
  18.            android:layout_height="fill_parent">   
  19.            <Button   
  20.               android:text="Next"    
  21.               android:id="@+id/Button_next1"  
  22.               android:layout_width="fill_parent"    
  23.               android:layout_height="wrap_content">   
  24.            </Button>   
  25.            <ImageView   
  26.               android:id="@+id/image1"    
  27.               android:src="@drawable/dell1"  
  28.               android:layout_width="fill_parent"  
  29.               android:layout_height="wrap_content">   
  30.            </ImageView>   
  31.        </LinearLayout>   
  32.     
  33.        <LinearLayout   
  34.            android:orientation="vertical"  
  35.            android:layout_width="fill_parent"    
  36.            android:layout_height="fill_parent">   
  37.            <Button   
  38.               android:text="Next"    
  39.               android:id="@+id/Button_next2"  
  40.               android:layout_width="fill_parent"    
  41.               android:layout_height="wrap_content">   
  42.            </Button>   
  43.            <ImageView   
  44.               android:id="@+id/image2"    
  45.               android:src="@drawable/lg"  
  46.               android:layout_width="fill_parent"  
  47.               android:layout_height="wrap_content">   
  48.            </ImageView>   
  49.        </LinearLayout>   
  50.           
  51.        <LinearLayout   
  52.            android:orientation="vertical"  
  53.            android:layout_width="fill_parent"    
  54.            android:layout_height="fill_parent">   
  55.            <Button   
  56.               android:text="Next"    
  57.               android:id="@+id/Button_next3"  
  58.               android:layout_width="fill_parent"    
  59.               android:layout_height="wrap_content">   
  60.            </Button>   
  61.            <ImageView   
  62.               android:id="@+id/image3"    
  63.               android:src="@drawable/lenovo"  
  64.               android:layout_width="fill_parent"  
  65.               android:layout_height="wrap_content">   
  66.            </ImageView>   
  67.        </LinearLayout>   
  68.     
  69.     </ViewFlipper>   
  70.     
  71. </LinearLayout>  
 
很簡單，在Layout定義中指定動畫的相關屬性就可以了，通過persistentDrawingCache指定緩存策略；flipInterval指定每個View動畫之間的時間間隔；inAnimation和outAnimation分別指定View進出使用的動畫效果。動畫效果定義如下：
view plaincopy to clipboardprint?
  1. res\anim\push_left_in.xml   
  2. <?xml version="1.0" encoding="utf-8"?>   
  3. <set xmlns:android="https://schemas.android.com/apk/res/android">   
  4.     <translate   
  5.     android:fromXDelta="100%p"    
  6.     android:toXDelta="0"    
  7.     android:duration="500"/>   
  8.     <alpha   
  9.     android:fromAlpha="0.0"    
  10.     android:toAlpha="1.0"  
  11.     android:duration="500" />   
  12. </set>   
  13. res\anim\push_left_out.xml   
  14. <?xml version="1.0" encoding="utf-8"?>   
  15. <set xmlns:android="https://schemas.android.com/apk/res/android">   
  16.     <translate   
  17.     android:fromXDelta="0"    
  18.     android:toXDelta="-100%p"    
  19.     android:duration="500"/>   
  20.     <alpha   
  21.     android:fromAlpha="1.0"    
  22.     android:toAlpha="0.0"    
  23.     android:duration="500" />   
  24. </set>  

Activity代碼如下（src\cc\c\TestActivity.java）：
  1. public class TestActivity extends Activity {   
  2.     private ViewFlipper mViewFlipper;   
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState) {   
  5.         super.onCreate(savedInstanceState);   
  6.         setContentView(R.layout.main);   
  7.            
  8.         Button buttonNext1 = (Button) findViewById(R.id.Button_next1);   
  9.         mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);   
  10.         buttonNext1.setOnClickListener(new View.OnClickListener() {   
  11.             public void onClick(View view) {   
  12.                 //在layout中定義的屬性，也可以在代碼中指定   
  13. //             mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
  14. //             mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
  15. //             mViewFlipper.setPersistentDrawingCache(ViewGroup.PERSISTENT_ALL_CACHES);   
  16. //             mViewFlipper.setFlipInterval(1000);   
  17.                 mViewFlipper.showNext();   
  18.                 //調用下麵的函數將會循環顯示mViewFlipper內的所有View。   
  19. //             mViewFlipper.startFlipping();   
  20.         }   
  21.         });   
  22.     
  23.         Button buttonNext2 = (Button) findViewById(R.id.Button_next2);   
  24.         buttonNext2.setOnClickListener(new View.OnClickListener() {   
  25.             public void onClick(View view) {   
  26.                 mViewFlipper.showNext();   
  27.         }   
  28.     
  29.         });      
  30.         Button buttonNext3 = (Button) findViewById(R.id.Button_next3);   
  31.         buttonNext3.setOnClickListener(new View.OnClickListener() {   
  32.             public void onClick(View view) {   
  33.                 mViewFlipper.showNext();   
  34.         }   
  35.     
  36.         });   
  37.     
  38.     }   
  39.     }  
通過手勢移動屏幕
上麵是通過屏幕上的按鈕來在屏幕間切換的，這看起來多少有點不符合OPhone的風格，如果要是能通過手勢的左右滑動來實現屏幕的切換就比較優雅了。
通過android.view.GestureDetector類可以檢測各種手勢事件，該類有兩個回調接口分別用來通知具體的事件：
 
GestureDetector.OnDoubleTapListener：用來通知DoubleTap事件，類似於鼠標的雙擊事件，該接口有如下三個回調函數：
 
1.   onDoubleTap(MotionEvent e)：通知DoubleTap手勢，
2.   onDoubleTapEvent(MotionEvent e)：通知DoubleTap手勢中的事件，包含down、up和move事件（這裏指的是在雙擊之間發生的事件，例如在同一個地方雙擊會產生DoubleTap手勢，而在DoubleTap手勢裏麵還會發生down和up事件，這兩個事件由該函數通知）；
3.   onSingleTapConfirmed(MotionEvent e)：用來判定該次點擊是SingleTap而不是DoubleTap，如果連續點擊兩次就是DoubleTap手勢，如果隻點擊一次，OPhone係統等待一段時間後沒有收到第二次點擊則判定該次點擊為SingleTap而不是DoubleTap，然後觸發SingleTapConfirmed事件。
GestureDetector.OnGestureListener：用來通知普通的手勢事件，該接口有如下六個回調函數：
1.   onDown(MotionEvent e)：down事件；
2.   onSingleTapUp(MotionEvent e)：一次點擊up事件；
3.   onShowPress(MotionEvent e)：down事件發生而move或則up還沒發生前觸發該事件；
4.   onLongPress(MotionEvent e)：長按事件；
5.   onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)：滑動手勢事件；
6.   onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)：在屏幕上拖動事件。
 
這些事件有些定義的不太容易理解，在示例項目中實現了所有的回調函數，在每個函數中輸出相關的日誌，對這些事件不理解的可以運行項目，通過不同的操作來觸發事件，然後觀看logcat輸出日誌可有助於對這些事件的理解。
 
在上述事件中，如果在程序中處理的該事件就返回true否則返回false，在GestureDetector中也定義了一個SimpleOnGestureListener類，這是個助手類，實現了上述的所有函數並且都返回false。如果在項目中隻需要監聽某個事件繼承這個類可以少些幾個空回調函數。
 
要走上麵的程序中添加滑動手勢來實現屏幕切換的話，首先需要定義一個GestureDetector：
private GestureDetector mGestureDetector;
 
並在onCreate函數中初始化：
mGestureDetector = new GestureDetector(this);
 
參數是OnGestureListener，然後讓TestActivity實現 OnGestureListener 和OnDoubleTapListener接口：
 
 
  1. class TestActivity extends Activity implements OnGestureListener , OnDoubleTapListener  
然後在onFling函數中實現切換屏幕的功能：
  1. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,   
  2.            float velocityY) {   
  3.        Log.d(tag, "...onFling...");   
  4.        if(e1.getX() > e2.getX()) {//move to left   
  5.            mViewFlipper.showNext();   
  6.        }else if(e1.getX() < e2.getX()) {   
  7.            mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_right_in);   
  8.            mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_right_out);   
  9.            mViewFlipper.showPrevious();   
  10.            mViewFlipper.setInAnimation(getApplicationContext(), R.anim.push_left_in);   
  11.            mViewFlipper.setOutAnimation(getApplicationContext(), R.anim.push_left_out);   
  12.        }else {   
  13.            return false;   
  14.        }   
  15.        return true;   
  16.     }  
 
這裏實現的功能是從右往左滑動則切換到上一個View，從左往右滑動則切換到下一個View，並且使用不同的in、out 動畫使切換效果看起來統一一些。
然後在onDoubleTap中實現雙擊自動切換的效果，再次雙擊則停止：
   
  1. public boolean onDoubleTap(MotionEvent e) {   
  2.        Log.d(tag, "...onDoubleTap...");   
  3.        if(mViewFlipper.isFlipping()) {   
  4.            mViewFlipper.stopFlipping();   
  5.        }else {   
  6.            mViewFlipper.startFlipping();   
  7.        }   
  8.        return true;   
  9.     }  
 
到這裏手勢代碼就完成了，現在可以通過左右滑動切換View並且雙擊可以自動切換View。細心的讀者這裏可能會發現一個問題，上麵在創建mGestureDetector 的時候使用的是如下代碼：
mGestureDetector = new GestureDetector(this);
 
這裏的參數為OnGestureListener，而且GestureDetector有個函數setOnDoubleTapListener來設置OnDoubleTapListener，在上麵的代碼中並沒有設置OnDoubleTapListener，那麼onDoubleTap事件是如何調用的呢？這裏的玄機就要去探探 GestureDetector(OnGestureListener l)這個構造函數的源代碼了：
  1.     public GestureDetector(OnGestureListener listener) {   
  2.         this(null, listener, null);   
  3. }  
 
調用了另外一個構造函數：
   
  1. public GestureDetector(Context context, OnGestureListener listener, Handler handler) {   
  2.        if (handler != null) {   
  3.            mHandler = new GestureHandler(handler);   
  4.        } else {   
  5.            mHandler = new GestureHandler();   
  6.        }   
  7.        mListener = listener;   
  8.        if (listener instanceof OnDoubleTapListener) {   
  9.            setOnDoubleTapListener((OnDoubleTapListener) listener);   
  10.        }   
  11.        init(context);   
 
注意到listener instanceof OnDoubleTapListener沒有？現在明白了吧。

最後更新：2017-04-02 06:51:46

  上一篇：go Java中long類型容易出現的bug
  下一篇：go android中的ellipsize