Android學習指南之四十六：用戶界面View之視圖切換組件ViewAnimator

       上一節中為大家講解了ImageSwitcher和TextSwitcher兩個視圖切換組件，本節再來介紹另一個視圖切換組件--功能更豐富的ViewFlipper，使用它能夠在任意的視圖與視圖之間切換。

       講解ViewFlipper之前先簡單了解下ViewAnimator。在制作視圖動畫時會用到這個ViewAnimator類。下面這幅圖基本說明了ViewAnimator的作用。

       接下來我們來看例子：

       1、新建一個項目 Lesson46_ViewFlipper。

       2、在main.xml寫入下面代碼：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">  
3. <viewflipper android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/viewFlipper1">  
4.     <include android:id="@+id/layout1" layout="@layout/layout1"></include>  
5.     <include android:id="@+id/layout2" layout="@layout/layout2"></include>  
6. </viewflipper>  
7. </linearlayout>  

       這裡用到了include標簽，學過java web的同學很容易理解，這和jsp頁面裡的include沒啥區別。使用include我們可以把一個大的布局文件拆成多個小的文件，使用include，我們可以復用一些常用布局組合。

       3、另外兩個layout1.xml 和 layout2.xml的代碼分別如下：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <linearlayout android:layout_height="wrap_content" android:layout_width="match_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout1">  
3.     <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/textView2" android:gravity="center" android:text="apple" android:textsize="20sp">  
4.     </textview>  
5. </linearlayout>  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <linearlayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout2">  
3.   
4.     <imageview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/imageView1" android:src="@drawable/apple"></imageview>  
5.     <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/textView2" android:gravity="center" android:text="蘋果" android:textsize="20sp">  
6.     </textview>  
7. </linearlayout>  

       4、MainActivity.java的代碼如下：

1. package basic.android.lesson46;   
2.   
3. import android.app.Activity;   
4. import android.os.Bundle;   
5. import android.view.View;   
6. import android.view.animation.AnimationUtils;   
7. import android.widget.ViewFlipper;   
8.   
9. public class MainActivity extends Activity {   
10.     @Override  
11.     public void onCreate(Bundle savedInstanceState) {   
12.         super.onCreate(savedInstanceState);   
13.         setContentView(R.layout.main);   
14.   
15.         // 定義ViewFlipper   
16.         final ViewFlipper vf = (ViewFlipper) findViewById(R.id.viewFlipper1);   
17.   
18.         // 設置點擊監聽器   
19.         vf.setOnClickListener(new View.OnClickListener() {   
20.             @Override  
21.             public void onClick(View v) {   
22.                 // 點擊讀取下一個視圖元素   
23.                 vf.showNext();   
24.             }   
25.         });   
26.   
27.         // 設置切入動畫   
28.         vf.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_in_left));   
29.         // 設置切出動畫   
30.         vf.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_out_right));   
31.   
32.     }   
33. }  

       5、編譯並運行代碼，查看結果：