[Android] 建立Tab View的三種方式(上)

How to create Tab View in Android(by ID, by ContentFactory and by Activity)

TabHost是Android負責產生Tab Layout的類別，它包含了兩個children，分別是TabWidget跟FrameLayout。TabWidget負責處理與使用者進行互動的頁籤(tab)，FrameLayout則是根據所選擇的tab來顯示相對應的內容。

建立Tab View的方法

建立Tab View的方式大致上可分為兩種類型：

(1) 將每個tab的內容寫在同個Activity。

(2) 不同tab的內容分別寫在不同的Activity。

要採用上述哪種方法主要是看程式需求，假設每個tab的功能是彼此獨立的，那建議採用以不同Activity來區分不同tab的內容，主要的好處是tab彼此的相依性低，日後要進行更新維護時也較容易，本文將會介紹寫在相同Activity的方法，寫在不同Activity的方式將會於下篇介紹。

不同Tab內容寫在相同Activity(Different tab content in the same activity)

此類型有兩種實作方式可以選擇：

(1) 以XML描述tab content，再指定其Resource Id給Tab View(by ID)

(2) Activity實作TabHost.TabContentFactory(by Factory)

以View ID建立TabView - 程式碼說明：

此方法是將Tab Views以XML描述，並透過程式指定產生內容。

1. 建立TabHost Layout描述XML檔

TabHost的XML描述必須照特定格式撰寫，最外層的TabHost其ID欄位給定的值為:"@android:id/tabhost"，TabWidget其ID為: "@android:id/tabs"，最後是FrameLayout，ID為"@android:id/tabcontent"。

2. 建立Tab Views描述XML檔
將不同tab對應的content寫入FrameLayout

3. 載入TabHost並指定其Tab內容
LayoutInflater負責將XML描述內容轉換為View，再指定給TabHost的ContentView，最後再將不同tab對應至不同內容。

public class CreateTab extends TabActivity{
  @Override
  public void onCreate(Bundle savedState){
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);

   //取得Tabhost參考
   TabHost tabHost = getTabHost();

   //將xml轉換為View且指定給TabContentView
   LayoutInflater.from(this).inflate(
      R.layout.tabs, 
      tabHost.getTabContentView(), 
      true);
   
   //設定各tab頁面by指定View id
   tabHost.addTab(tabHost
      .newTabSpec("tab1")
      .setIndicator("TAB1")
      .setContent(R.id.tab1)
         );
        
   tabHost.addTab(tabHost
      .newTabSpec("tab2")
      .setIndicator("TAB2")
      .setContent(R.id.tab2)
         );
  }
}

實作TabHost.TabContentFactory - 程式碼說明

Tab Views還可以透過TabHost.TabContentFactory來產生，其機制主要是當tab被選擇時，會呼叫ContentFactory方法，實作TabContentFactory的類別必須實作createTabContent()，此函式會回傳View物件作為該tab的內容，因此，它適合用於需要常動態更新tab內容的狀況。

1. 建立Tab並指定其Tag
Tag對於ContentFactory是個重要資訊，當createTabContent()被呼叫時，會傳入目前所選擇Tab的Tag內容，在實作createTabContent()時，便可根據Tag的不同而產生不同的內容。

public class CreateTab extends TabActivity implements TabHost.TabContentFactory{
  @Override
  public void onCreate(Bundle savedState){
   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);

   //取得Tabhost參考
   TabHost tabHost = getTabHost();
   
   //設定各tab頁面by ContentFactory instance
   tabHost.addTab(tabHost
      .newTabSpec("tab1")
      .setIndicator("TAB1")
      .setContent(this)
         );
        
   tabHost.addTab(tabHost
      .newTabSpec("tab2")
      .setIndicator("TAB2")
      .setContent(this)
         );
  }
}

2. 實作createTabContent

@Override
  public View createTabContent(String tag){
  
  TextView textView = new TextView(this);
  textView.setText("I'm "+tag);
  return textView;

}

上述兩種作法都會產生一致的結果，如下圖所示：