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

在手機螢幕中，Tab也是比較常用的，通常和List結合，例如我們手機的通訊錄。下面是Tag的結構。

TabHost是整個Tab的容器，包括兩部分，TabWidget和FrameLayout。TabWidget就是每個tab的標籤，FrameLayout則是tab內容。

• 如果我們使用extends TabAcitivty，如同ListActivity，TabHost必須設定為@android:id/tabhost
• TabWidget必須設定android:id為@android:id/tabs
• FrameLayout需要設定android:id為@android:id/tabcontent

例子一：基本的Tag例子

1）Android XML檔案

<?xml version="1.0" encoding="utf-8"?>
<TabHost  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/c92_tabhost"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
       <TabWidget android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
       <FrameLayout android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
            <AnalogClock android:id="@+id/c92_tab1"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:layout_centerHorizontal="true" />
            <Button android:id="@+id/c92_tab2"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:text="A semi-random Button" />
       </FrameLayout>
  </LinearLayout>
</TabHost>

2）原始碼

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_9_test2);
        //步驟1：獲得TabHost的對象，並進行初始化setup()
        TabHost tabs = (TabHost)findViewById(R.id.c92_tabhost);
        tabs.setup();
        //步驟2：通過TabHost.TabSpec增加tab的一頁，通過setContent()增加內容，通過setIndicator增加頁的標籤
        /*（1）增加第1頁*/
        TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
        spec.setContent(R.id.c92_tab1);
        spec.setIndicator("Clock");
        tabs.addTab(spec);
        /*（2）增加第2頁*/
        spec = tabs.newTabSpec("Tag2");
        spec.setContent(R.id.c92_tab2);
        spec.setIndicator("Button");
        tabs.addTab(spec);
        //步驟3：可通過setCurrentTab(index)指定顯示的頁，從0開始計算。
        tabs.setCurrentTab(1);
    }

例子二：設定標籤

標籤設定除了上面給出文本外，還可以給出widget，例如：

        Button b = new Button(this);
        b.setText("標籤");
        spec.setIndicator(b);

這也是work的，當然設定button是很無聊的，通常我們希望是圖片，如下面三圖：

1）我們在標籤上加一個表徵圖，如左圖。這個圖片存在於drawable/目錄下：

Resources res  = getResources();
spec.setIndicator("Button",res.getDrawable(R.drawable.star_logo));

2）我們在標籤上家一個圖片，當使用者選擇該頁是為某一表徵圖，不選擇時為另一表徵圖。如上中圖和右圖所示。我們在drawable目錄項目有相關的兩個圖片檔案。會議在Android學習筆記（六）：xml和widget中的View，我們建立一個XML檔案，描述：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- 這是順序執行的，如果狀態是selected，則為android_focused表徵圖，如果不是下一步，採用android_normal表徵圖-->
  <item android:drawable="@drawable/android_focused"
        android:state_selected="true" />
  <item android:drawable="@drawable/android_normal"
/>
</selector> 

這個檔案我們取名為chapter_9_tutorial3_ic.xml，為了方便管理，這次我們沒有將之放置在layout目錄下，而是方式在drawable目錄下。原始碼如下：

Resources res  = getResources();
spec.setIndicator("Button",res.getDrawable(R.drawable.chapter_9_tutorial3_ic));

例子三：動態添加Tab頁

在某些情況下，我們需要動態添加Tab頁，可通過TabContentFactory來實現。下面的例子，我們點擊Tab也中的button，將新增一個tab頁。

        Button button = (Button)findViewById(R.id.c92_tabhost);
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                TabHost.TabSpec spec = tabs.newTabSpec("tag1");
                spec.setContent(new TabHost.TabContentFactory() {
                    /*createTabContent將返回View，這裡我們簡單用一個類比時鐘*/
                    public View createTabContent(String tag) {
                        return new AnalogClock(Chapter9Test3.this);
                    }
                });
                spec.setIndicator("Clock");
                tabs.addTab(spec);
            }
        });

例子四：將一個Activity加入到Tab頁

在Android SDK的Tutorial中給出了一個例子，採用setContent(Intent intent)的方式在content中傳遞一個Activity。這個例子費了我比長的時間，因為一開始運行時都報錯。因此在寫的時候，注意下面兩個問題：

1. 採用setContent(Intent intent)之前，必須對TabHost進行setup (LocalActivityManager activityGroup)，因為在調起acivity時需要activityGroup，如果我們繼承TabActivity，則由TabAcitivty自動完成，鑒於我們目前對LocalActivityManager尚不瞭解，簡單地可以直接繼承TabActivity
2. Activity不能是內部類，Activity必須在AndroidManifest中進行註冊

對於對第1點，我們的XML檔案如下：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:padding="5dp">
                <TabWidget android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" />
                <FrameLayout android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:padding="5dp">
                </FrameLayout>   
  </LinearLayout>
</TabHost> 

對於第2點要求，我們可以直接使用之前我們建立過的Activity，代碼如下

public class Chapter9Tutorial3
extends TabActivity{
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chapter_9_tutorial3);
               
        TabHost tabs = getTabHost();
        TabHost.TabSpec spec = null;
        //通過Intent，將activity匯入，對於intent，這個類不能是內部類，這個類必須在AndroidManifest中註冊的類
        Intent intent = new Intent();
        intent.setClass(this, Chapter9Tutorial2.class);
        spec = tabs.newTabSpec("Tag1");
        spec.setIndicator("Intent");
        spec.setContent(intent);
        tabs.addTab(spec);
       . .. ...
    }
}

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