Android TabHost的使用

　　android 實現tab視圖有2種方法，一種是在布局頁面中定義<tabhost>標籤,另一種就是繼承tabactivity.但是我比較喜歡第二種方式，應為如果頁面比較複雜的話你的XML檔案會寫得比較龐大，用第二種方式XML頁面相對要簡潔得多。

Tab標籤頁的使用 　　首先要設計所有的分頁的介面布局 　　在分頁設計完成後，使用代碼建立 Tab 標籤頁，並給每個分頁添加 標識和標題 　　最後確定每個分頁所顯示的介面布局 建立一個“TabDemo”程式，包含三個XML檔案，分別為tab1.xml、tab2.xml和tab3.xml，這3個檔案分別使用線性布局、相對布局和絕對布局樣本中的main.xml的代碼，並將布局的ID分別定義為layout01、layout02和layout03tab1.xml檔案代碼   

                       <?xml version="1.0" encoding="utf-8"?>                       <LinearLayout android:id = "@+id/layout01"                        ……                        ……                      </LinearLayout> tab2.xml檔案代碼　　　　　　　　<?xml version="1.0" encoding="utf-8"?>　　　　　　　　<AbsoluteLayout android:id="@+id/layout02"　　　　　　　　  ……　　　　　　　　  ……　　　　　　 　</AbsoluteLayout> tab3.xml檔案代碼                       　　　　　　　　<?xml version="1.0" encoding="utf-8"?>　　　　　　　　<RelativeLayout android:id="@+id/layout03" 　　　　　　　　…… 　　　　　　　　 ……　　　　　　　　</RelativeLayout> 

import android.app.TabActivity;import android.os.Bundle;import android.widget.TabHost;import android.view.LayoutInflater; public class TabDemo extends TabActivity {@Overridepublic void onCreate(Bundle savedInstanceState) {　　super.onCreate(savedInstanceState);       　　TabHost tabHost = getTabHost();　　 LayoutInflater.from(this).inflate(R.layout.tab1, tabHost.getTabContentView(),true);   //將布局檔案與TabHost關聯在一起　　 LayoutInflater.from(this).inflate(R.layout.tab2, tabHost.getTabContentView(),true);　　 LayoutInflater.from(this).inflate(R.layout.tab3, tabHost.getTabContentView(),true);   　　tabHost.addTab(tabHost.newTabSpec("TAB1").setIndicator("線性布局").setContent(R.id.layout01));  //setContent()指定每個Tab包含的View　　 tabHost.addTab(tabHost.newTabSpec("TAB2").setIndicator("絕對布局").setContent(R.id.layout02));　　 tabHost.addTab(tabHost.newTabSpec("TAB3").setIndicator("相對布局").setContent(R.id.layout03));            } }  第 8 行代碼的聲明 TabDemo 類繼承與 TabActivity ，與以往繼承 Activity 不同， TabActivity 支援內嵌多個 Activity 或 View 第 12 行代碼通過 getTabHost() 函數獲得了 Tab 標籤頁的容器，用以 承載可以點擊的 Tab 標籤和分頁的介面布局。 第 13 行代碼通過 LayoutInflater 將 tab1.xml 檔案中的布局轉換為 Tab 標籤頁可以使用的 View 對象 第 16 行代碼使用 addTab() 函數添加了第 1 個分頁， tabHost.newTabSpec("TAB1") 表明在第 12 行代碼中建立的 tabHost 上，添加一個標識為 TAB1 的 Tab 分頁 第 17 行代碼使用 setIndicator() 函數設定分頁顯示的標題，使用 setContent() 函數設定分頁所關聯的介面布局  

 第二種方式，不繼承TabActivity，在布局檔案中定義TabHost即可，但是TabWidget的id必須是@android:id/tabs，FrameLayout的id必須是@android:id/tabcontent。

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
3.     android:id="@+id/hometabs"  
4.     android:orientation="vertical"  
5.     android:layout_width="fill_parent"    
6.     android:layout_height="fill_parent">   
7.     <TabHost android:id="@+id/tabhost"         //繼承自FrameLayout，下面只能顯示一個節點，TabWidget 和FrameLayout 放在LinearLayout  下面
8.          android:layout_width="fill_parent"  
9.          android:layout_height="wrap_content">  
10.          <LinearLayout  
11.             android:orientation="vertical"  
12.             android:layout_width="fill_parent"  
13.             android:layout_height="fill_parent">  
14.               
15.              <TabWidget android:id="@android:id/tabs"   
16.               android:orientation="horizontal"  
17.               android:layout_width="fill_parent"  
18.               android:layout_height="wrap_content">  
19.             </TabWidget>  
20.            
21.              <FrameLayout android:id="@android:id/tabcontent"  
22.                   android:layout_width="wrap_content"  
23.                   android:layout_height="wrap_content">  
24. 1. <LinearLayout android:id="@+id/ll01" android:layout_width="fill_parent"  
    2.         android:layout_height="fill_parent" android:gravity="center_horizontal"  
    3.         android:orientation="vertical">  
    4.         <EditText android:id="@+id/widget34" android:layout_width="fill_parent"  
    5.             android:layout_height="wrap_content" android:text="EditText"  
    6.             android:textSize="18sp">  
    7.         </EditText>  
    8.         <Button android:id="@+id/widget30" android:layout_width="wrap_content"  
    9.             android:layout_height="wrap_content" android:text="Button">  
    10.         </Button>  
    11.     </LinearLayout>  
    12.     <LinearLayout android:id="@+id/ll02" android:layout_width="fill_parent"  
    13.         android:layout_height="fill_parent" android:gravity="center_horizontal"  
    14.         android:orientation="vertical">  
    15.         <AnalogClock android:id="@+id/widget36"  
    16.             android:layout_width="wrap_content" android:layout_height="wrap_content">  
    17.         </AnalogClock>  
    18.     </LinearLayout>  
    19.     <LinearLayout android:id="@+id/ll03" android:layout_width="fill_parent"  
    20.         android:layout_height="fill_parent" android:gravity="center_horizontal"  
    21.         android:orientation="vertical">  
    22.         <RadioGroup android:id="@+id/widget43"  
    23.             android:layout_width="166px" android:layout_height="98px"  
    24.             android:orientation="vertical">  
    25.             <RadioButton android:id="@+id/widget44"  
    26.                 android:layout_width="wrap_content" android:layout_height="wrap_content"  
    27.                 android:text="RadioButton">  
    28.             </RadioButton>  
    29.             <RadioButton android:id="@+id/widget45"  
    30.                 android:layout_width="wrap_content" android:layout_height="wrap_content"  
    31.                 android:text="RadioButton">  
    32.             </RadioButton>  
    33.         </RadioGroup>  
    34.     </LinearLayout> 
    35.  
25.              </FrameLayout>  
26.            
27.          </LinearLayout>  
28.     </TabHost>  
29. </LinearLayout>  

 

1. TabHost tabHost = (TabHost) findViewById(R.id.tabhost);  
2.         tabHost.setup();                                     //完成初始化
3.         TabWidget tabWidget = tabHost.getTabWidget();  
4.         tabHost.addTab(tabHost.newTabSpec("tab1")  .setIndicator("tab1",  getResources().getDrawable(R.drawable.img01))  .setContent(R.id.1101));  
5.         tabHost.addTab(tabHost   .newTabSpec("tab2").setIndicator("tab2",   getResources().getDrawable(R.drawable.img02))  
6.                                   .setContent(R.id.1102));  
7.         tabHost.addTab(tabHost   .newTabSpec("tab3").setIndicator("tab3",   getResources().getDrawable(R.drawable.img03))  
8.                                    .setContent(R.id.1103));