標籤頁在顯示上是相當方便且用途廣泛的元件,在電話簿,訊息中常常可見,簡單的範例如下圖

 
 
 
 
 
 
 
 
 
 
首先是 TabHost 和 TabWidget 的關係, TabHost 包含著 TabWidget , 可以有多個 TabWidget 的存在,如上圖就包含 4 個 TabWidget (消費清單,本日消費,本周消費,本月消費),每個 TabWidget 可以視為不同的 Activity ,當手指觸碰到不同的 TabWidget ,就會執行不同的 TabWidget, TabHost 的 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:id="@+id/LinearLayout01"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:orientation="vertical" >
   
          <TabWidget
              android:id="@android:id/tabs"
              android:layout_width="match_parent"
              android:layout_height="wrap_content" />
   
          <FrameLayout
              android:id="@android:id/tabcontent"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent" />
      </LinearLayout>
   
  </TabHost>

 
這是標準的 TabHost 的 xml 格式,第 7 行指出是個線性垂直的佈局,且依序為 TabWidget(標籤頁),以及其內容(FrameLayout),接著來看 TabHost的程式碼,如下

  package com.example.helloworld;
   
  import android.app.TabActivity;
  import android.content.Intent;
  import android.os.Bundle;
  import android.widget.TabHost;
  import android.widget.TabHost.TabSpec;
   
  @SuppressWarnings("deprecation")
  public class Table_Flow extends TabActivity{
   
      public void onCreate(Bundle savedInstanceState){
          super.onCreate(savedInstanceState);
          setContentView(R.layout.table_host);
          initView();
      }
      void initView(){
          TabHost thost = getTabHost();// build tabhost
          Intent inte = new Intent();
          inte.setClass(Table_Flow.this, Table_widget4.class);
          TabSpec ts = thost.newTabSpec("tab4");
          ts.setContent(inte);
          ts.setIndicator("消費清單");
          thost.addTab(ts);
          inte = new Intent();
          inte.setClass(Table_Flow.this, Table_widget1.class);
          TabSpec ts1 = thost.newTabSpec("tab1");
          ts1.setContent(inte);
          ts1.setIndicator("本日消費");
          thost.addTab(ts1);
          inte = new Intent();
          inte.setClass(Table_Flow.this, Table_widget2.class);
          TabSpec ts2 = thost.newTabSpec("tab2");
          ts2.setContent(inte);
          ts2.setIndicator("本周消費");
          thost.addTab(ts2);
          inte = new Intent();
          inte.setClass(Table_Flow.this, Table_widget2.class);
          TabSpec ts3 = thost.newTabSpec("tab3");
          ts3.setContent(inte);
          ts3.setIndicator("本月消費");
          thost.addTab(ts3);
          thost.setCurrentTab(0);
      }
  }

 

注意第 10 行繼承 TabActivity , 第 15 行套用上述的 xml 佈局 ,接著就是對各個 TabWidget 的初始化(initView)
第 23 行取得 TabHost 物件 thost
第 25 ~ 30 行為建立第 1 個 TabWidget 的內容
第 26 行注意 Table_widget4.class 必須先建立好,這代表當點選該標籤頁就會執行的類別
第 27 行建立 TabSpec 物件, tab4 代表該標籤頁的 Tag,之後若有需要可取得 Tag 即可
第 28 行設定 Content 內容,其對應的類別為 Table_widget4.class
第 29 行顯示的內容
第 30 行加入TabSpec
接著選擇其中 1 個最簡單的 TabWidget 來看(Table_widget2.class),其內容為

  package com.example.helloworld;
   
  import android.app.Activity;
  import android.os.Bundle;
   
  public class Table_widget2 extends Activity{
   
      public void onCreate(Bundle savedInstanceState){
          super.onCreate(savedInstanceState);
      }
  }

 

是的~ 這個就是最簡單的 TabWidget ,當然你可以任意改寫其內容來達到需求