Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> ViewFlipper的使用

ViewFlipper的使用

編輯：Android開發實例

屏幕切換指的是在同一個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 的使用，其他的使用方式是類似的。詳細信息可以參考文檔： http://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="http://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進出使用的動畫效果。動畫效果定義如下：  

 

  1. res\anim\push_left_in.xml     
  2. <?xml version="1.0" encoding="utf-8"?>      
  3. <set xmlns:android="http://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="http://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. }  
  調用了另外一個構造函數：       注意到listener instanceof OnDoubleTapListener沒有？現在明白了吧。 
  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);     

 

 

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android學習之 Menu 在Android手機上程序的切換-任務管理器 android讀取Assets圖片資源保存到SD卡實例 Android開發者指南(2) —— aapt Android應用開發入門（六）通過Application傳遞數據 android編程實現添加文本內容到sqlite表中的方法
使用ViewPager實現左右循環滑動及滑動跳轉

前面一篇文章實現了使用ViewPager實現高仿launcher
Android示例程序剖析之記事本（二：Android菜單）

    &nb
Android登錄實例

登錄應用程序的屏幕，詢問憑據登錄到一些特定的應用。可能需要登錄到Face
Android開發學習筆記 Gallery和GridView淺析

一.Gallery的簡介 Gallery（畫廊）是一個鎖定中心條
閱讀排行版
Copyright © Android教程網 All Rights Reserved