標籤頁(TabHost+TabWidget)的使用

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

首先是 TabHost 和 TabWidget 的關係, TabHost 包含著 TabWidget , 可以有多個 TabWidget 的存在,如上圖就包含 4 個 TabWidget (消費清單,本日消費,本周消費,本月消費),每個 TabWidget 可以視為不同的 Activity ,當手指觸碰到不同的 TabWidget ,就會執行不同的 TabWidget, TabHost 的 xml 結構如下

   1:  <?xml version="1.0" encoding="utf-8"?>

   2:  <TabHost xmlns:android="http://schemas.android.com/apk/res/android"

   3:      android:id="@android:id/tabhost"

   4:      android:layout_width="fill_parent"

   5:      android:layout_height="fill_parent" >

   6:   

   7:      <LinearLayout

   8:          android:id="@+id/LinearLayout01"

   9:          android:layout_width="fill_parent"

  10:          android:layout_height="fill_parent"

  11:          android:orientation="vertical" >

  12:   

  13:          <TabWidget

  14:              android:id="@android:id/tabs"

  15:              android:layout_width="match_parent"

  16:              android:layout_height="wrap_content" />

  17:   

  18:          <FrameLayout

  19:              android:id="@android:id/tabcontent"

  20:              android:layout_width="fill_parent"

  21:              android:layout_height="fill_parent" />

  22:      </LinearLayout>

  23:   

  24:  </TabHost>

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

   1:  package com.example.helloworld;

   2:   

   3:  import android.app.TabActivity;

   4:  import android.content.Intent;

   5:  import android.os.Bundle;

   6:  import android.widget.TabHost;

   7:  import android.widget.TabHost.TabSpec;

   8:   

   9:  @SuppressWarnings("deprecation")

  10:  public class Table_Flow extends TabActivity{

  11:   

  12:      public void onCreate(Bundle savedInstanceState){

  13:          super.onCreate(savedInstanceState);

  14:          

  15:          setContentView(R.layout.table_host);

  16:          

  17:          initView();

  18:      }

  19:      

  20:      

  21:      void initView(){

  22:          

  23:          TabHost thost = getTabHost();// build tabhost

  24:          

  25:          Intent inte = new Intent();

  26:          inte.setClass(Table_Flow.this, Table_widget4.class);

  27:          TabSpec ts = thost.newTabSpec("tab4");

  28:          ts.setContent(inte);

  29:          ts.setIndicator("消費清單");

  30:          thost.addTab(ts);

  31:          

  32:          inte = new Intent();

  33:          inte.setClass(Table_Flow.this, Table_widget1.class);

  34:          TabSpec ts1 = thost.newTabSpec("tab1");

  35:          ts1.setContent(inte);

  36:          ts1.setIndicator("本日消費");        

  37:          thost.addTab(ts1);

  38:          

  39:          inte = new Intent();

  40:          inte.setClass(Table_Flow.this, Table_widget2.class);

  41:          TabSpec ts2 = thost.newTabSpec("tab2");

  42:          ts2.setContent(inte);

  43:          ts2.setIndicator("本周消費");

  44:          thost.addTab(ts2);

  45:          

  46:          inte = new Intent();

  47:          inte.setClass(Table_Flow.this, Table_widget2.class);

  48:          TabSpec ts3 = thost.newTabSpec("tab3");

  49:          ts3.setContent(inte);

  50:          ts3.setIndicator("本月消費");

  51:          thost.addTab(ts3);

  52:          

  53:          thost.setCurrentTab(0);

  54:      }

  55:  }

  56:   

  57:   

  58:   

注意第 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),其內容為

   1:  package com.example.helloworld;

   2:   

   3:  import android.app.Activity;

   4:  import android.os.Bundle;

   5:   

   6:  public class Table_widget2 extends Activity{

   7:   

   8:      public void onCreate(Bundle savedInstanceState){

   9:          super.onCreate(savedInstanceState);

  10:          

  11:          

  12:      }

  13:  }

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

Posted in: Android App