Android學習筆記（二三）： 多頁顯示-Flipper的使用

除了Tab在一個Activity中顯示多頁內容，還可以使用Flipper，Flipper沒有標籤，是一頁頁的顯示方式。

例子一：基礎的Flipper

1）Android XML檔案

Flipper採用ViewFlipper進行定義，裡面依次放著各頁的內容。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout ...... >
  <Button android:id="@+id/c94_flip_me" ... ...    android:text="Flip me" />
  <ViewFlipper android:id="@+id/c94_details"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" >
    <TextView android:layout_width="fill_parent"   
<!--ViewFlipper中的第一個元素 -->
     android:layout_height="wrap_content"
     android:textStyle="bold"
     android:textColor="#FF00FF00"
     android:text="This is the first Panel" />
    <TextView ... ...    android:text="This is the Second Panel"/>       <!--ViewFlipper中的第二個元素 -->
    <TextView ... ...    android:text="This is the third Panel"/>             <!--ViewFlipper中的第三個元素 -->
  </ViewFlipper>
</LinearLayout>

2）代碼編寫

我們點擊id為c94_details的button，則依次顯示ViewFlipper中的元素，迴圈顯示，如所示：

public class Chapter9Test4 extends Activity{
    private ViewFlipper flipper = null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_9_test4);
       
        flipper = (ViewFlipper)findViewById(R.id.c94_details);
        Button button = (Button)findViewById(R.id.c94_flip_me);
        button.setOnClickListener(new View.OnClickListener() {         
            public void onClick(View arg0) {
                //每次點擊button，則ViewFlipper中的顯示更換為下一個元素，如果已是最後的元素，從頭開始
                flipper.showNext();
            }
        });
    }
}

例子二：添加Flipper元素和自動翻頁

這個例子中的XML檔案如下，在LinearLayout中只有ViewFlipper，且ViewFlipper裡面沒有設定元素。很簡單，不再展示，下面是原始碼；

public class Chapter9Test5 extends Activity{
    private ViewFlipper flipper = null;
    public static String[] items={"lorem", "ipsum", "dolor", "sit", ... ... //若干String
       
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_9_test5);
        //步驟1：獲得flipper的執行個體
        flipper = (ViewFlipper) findViewById(R.id.c95_details);
        //步驟2：設定Flipper翻頁的動態效果，在後面介紹，這裡給出進入和離開的兩個效果
        flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_in));
        flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_left_out));
        //步驟3：通過flipper.addView向flipper動態加入每頁的View
        for(String item:Chapter9Test5.items){
            Button button = new Button(this);
            button.setText(item);
            flipper.addView(button, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.FILL_PARENT));
        }
        //步驟4：設定自動翻頁的時間間隔，本例為3秒，也可以在XML檔案中通過android:interval進行設定
        flipper.setFlipInterval(3000);
        //步驟5：開始啟動自動翻頁，通過stopFlipping()可以進行停止。
        flipper.startFlipping();
    }
}

這裡比較麻煩的翻頁的動態效果，即步驟2。我們在res/下建立信得了Floder，命名為anim，裡面將存放描述動態XML檔案，我們可以位元組利用SDK自動的例子，在anim按郵件import->General->FileSystem->Next->在Browser中指向...../android-sdk-linux_x86/samples/android-9/ApiDemos/res/anim，Demo例子已經給出了一些範例，我們選擇push_left_in和push_left_out匯入即可。

我們看看push_left_in.xml檔案，描述了動態方式：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="300"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>

我們看看push_left_out.xml檔案，描述了動態方式：

<set xmlns:android="http://schemas.android.com/apk/res/android">
   <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="300"/>
   <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>

相關連結：我的Andriod開發相關文章