1. 程式人生 > >Android學習筆記 二三 多頁顯示 Flipper的使用

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>