Android應用開發基礎篇（11）—–ViewFlipper

一、概述

      ViewFlipper這個組件是用來實現多頁顯示的，多頁之間的顯示一般通過手勢的滑動來實現，比如處於Home介面時，可以通過滑動來顯示另一頁，有點像Activity之間的切換。下面的實現沒有涉及到手勢識別這個功能。

二、要求

     掌握ViewFlipper的使用。

三、實現

     建立工程MyFlipper，修改/res/layout/main.xml檔案，在裡面添加一個ViewFlipper，完整的main.xml檔案如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6 
 7     <ViewFlipper 
 8         android:id="@+id/viewflipper"
 9         android:layout_width="fill_parent"
10         android:layout_height="fill_parent"
11         >      
12               
13     </ViewFlipper>
14 
15 </LinearLayout>

在/res/layout下建立2個檔案firstview.xml和secondview.xml。這兩個檔案的內容幾乎一樣，只是顯示的內容不一樣，firstview.xml如下：

 

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="fill_parent"
 3     android:layout_height="fill_parent"
 4     android:orientation="vertical" >
 5     
 6     <TextView 
 7         android:layout_width="fill_parent"
 8         android:layout_height="wrap_content"
 9         android:text="這是第一個View"
10         android:textColor="#FFFF0000"
11         android:gravity="center_horizontal"
12         android:textSize="20dip"
13         />
14     
15     
16     <Button 
17         android:id="@+id/firstbutton"
18         android:layout_width="fill_parent"
19         android:layout_height="wrap_content"
20         android:text="顯示第二個View"
21         />
22     
23 
24 </LinearLayout>

secondview.xml如下：

 

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6     
 7     <TextView 
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="這是第二個View"
11         android:textColor="#FF0000FF"
12         android:gravity="center_horizontal"
13         android:textSize="20dip"
14         />
15     
16     <Button 
17         android:id="@+id/secondbutton"
18         android:layout_width="fill_parent"
19         android:layout_height="wrap_content"
20         android:text="顯示第一個View"
21         />
22     
23 
24 </LinearLayout>

接著，修改MyFlipperActivity.java檔案，主要是定義一個ViewFlipper對象，向它添加兩個View，設定兩個按鈕的監聽，在監聽裡顯示前、後一個View。

 

 1 package com.nan.flipper;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.widget.Button;
 8 import android.widget.ViewFlipper;
 9 
10 public class MyFlipperActivity extends Activity 
11 {
12     private ViewFlipper mViewFlipper = null;
13     private LayoutInflater mLayoutInflater = null; 
14     
15     private Button firstButton = null;
16     private Button secondButton = null;
17     
18     /** Called when the activity is first created. */
19     @Override
20     public void onCreate(Bundle savedInstanceState) 
21     {
22         super.onCreate(savedInstanceState);
23         setContentView(R.layout.main);
24         
25         mViewFlipper = (ViewFlipper)this.findViewById(R.id.viewflipper);
26         
27         mLayoutInflater = LayoutInflater.from(MyFlipperActivity.this);
28         //將布局檔案firstview.xml變為View對象
29         View firstView = mLayoutInflater.inflate(R.layout.firstview, null);
30         //將布局檔案secondview.xml變為View對象
31         View secondView = mLayoutInflater.inflate(R.layout.secondview, null);
32         //添加View 
33         mViewFlipper.addView(firstView);
34         //添加View            
35         mViewFlipper.addView(secondView);
36                  
37         firstButton = (Button)firstView.findViewById(R.id.firstbutton);
38         //設定按鈕監聽
39         firstButton.setOnClickListener(new View.OnClickListener() 
40         {
41             
42             @Override
43             public void onClick(View v) 
44             {
45                 // TODO Auto-generated method stub
46                 //顯示後一個View
47                 mViewFlipper.showNext();
48             }
49         });
50         
51         secondButton = (Button)secondView.findViewById(R.id.secondbutton);
52         //設定按鈕監聽
53         secondButton.setOnClickListener(new View.OnClickListener() 
54         {
55             
56             @Override
57             public void onClick(View v) 
58             {
59                 // TODO Auto-generated method stub    
60                 //顯示前一個View
61                 mViewFlipper.showPrevious();
62             }
63         });
64           
65     }
66      
67 }

好了，運行該程式：

 

點擊一下“顯示第二個View”按鈕，效果如下：

 

好了，完成。
      如果加上手勢識別的話就可以通過滑動來切換頁面了。