2011年8月4日 星期四 | By: 雞米

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

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

TabHostAndroid負責產生Tab Layout的類別,它包含了兩個children,分別是TabWidgetFrameLayoutTabWidget負責處理與使用者進行互動的頁籤(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 IdTab View(by ID)
(2) Activity實作TabHost.TabContentFactory(by Factory)

View ID建立TabView - 程式碼說明:


此方法是將Tab ViewsXML描述,並透過程式指定產生內容。

1. 建立TabHost Layout描述XML
TabHostXML描述必須照特定格式撰寫,最外層的TabHostID欄位給定的值為:"@android:id/tabhost"TabWidgetID: "@android:id/tabs",最後是FrameLayoutID"@android:id/tabcontent"




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




3. 載入TabHost並指定其Tab內容
LayoutInflater負責將XML描述內容轉換為View,再指定給TabHostContentView,最後再將不同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()被呼叫時,會傳入目前所選擇TabTag內容,在實作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;

}

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

0 意見:

張貼留言