標籤頁在顯示上是相當方便且用途廣泛的元件,在電話簿,訊息中常常可見,簡單的範例如下圖
首先是 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 ,當然你可以任意改寫其內容來達到需求
