Android - TabHost 選項卡功能用法詳解

TabHost : 

 

 

一. TabHost介紹

 

TabHost組件可以在介面中存放多個選項卡, 很多軟體都使用了改組件進行設計;

 

1. TabHost常用組件

 

TabWidget : 該組件就是TabHost標籤頁中上部 或者 下部的按鈕, 可以點擊按鈕切換選項卡;

TabSpec : 代表了選項卡介面, 添加一個TabSpec即可添加到TabHost中;

-- 建立選項卡 : newTabSpec(String tag), 建立一個選項卡;

-- 添加選項卡 : addTab(tabSpec);

 

2. TabHost使用步驟

 

a. 定義布局 : 在XML檔案中使用TabHost組件, 並在其中定義一個FrameLayout選項卡內容;

b. 繼承TabActivity : 顯示索引標籤群組件的Activity繼承TabActivity;

c. 擷取組件 : 通過調用getTabHost()方法, 擷取TabHost對象;

d. 建立添加選項卡 : 通過TabHost建立添加選項卡;

 

3. 將按鈕放到下面

 

布局檔案中TabWidget代表的就是選項卡按鈕, Fragement組件代表內容;

設定失敗情況 : 如果Fragement組件沒有設定 android:layout_weight屬性, 那麼將TabWidget放到下面, 可能不會顯示按鈕;

設定權重 : 設定了Fragment組件的權重之後, 就可以成功顯示該選項卡按鈕;

 

二. TabHost布局檔案

 

1. 根標籤及id

 

設定Android內建id : XML布局檔案中, 可以使用 標籤設定, 其中的id 需要引用 android的內建id : android:id=@android:id/tabhost ;

getHost()擷取前提 : 設定了該id之後, 在Activity介面可以使用 getHost(), 擷取這個TabHost 視圖對象;

樣本 :

 

 

2. TabWidget組件

 

選項卡切換 : 該組件是選項卡切換按鈕, 通過點擊該組件可以切換選項卡;

設定android內建id : 這個組件的id要設定成android的內建id : android:id=@android:id/tabs ;

TabHost必備組件 : 該組件與FrameLayout組件是TabHost組件中必備的兩個組件;

切換按鈕下方顯示 : 如果想要將按鈕放到下面, 可以將該組件定義在下面, 但是注意,FrameLayout要設定android:layout_widget = 1;

設定TabWidget大小 : 如果想要設定該按鈕組件的大小, 可以設定該組件與FrameLayout組件的權重;

樣本 :

 

 

3. FrameLayout組件

 

組件作用 : 該組件中定義的子組件是TabHost中每個頁面顯示的選項卡, 可以將TabHost選項卡顯示的視圖定義在其中;

設定android內建id : 這個組件的id要設定成android的內建的id : android:id=@android:id/tabcontent ;

樣本 :

 

        <framelayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent"></framelayout>

 

二. Activity方法

 

 

1. 擷取TabHost

 

擷取方法 : getHost();

前提 : 調用getHost()方法擷取TabHost組件的方法的前提是在布局檔案中, 設定了android內建的id android:id=@android:id/tabhost 才可以;

 

2. 建立選項卡

 

建立選項卡 : 調用TabHost組件的newTabHost(tag), 其中的tag是字串, 即在選項卡的唯一標識;

設定選項卡 :

-- 設定按鈕名稱 : setIndicator(叫獸);

-- 設定選項卡內容 : setContent(), 可以設定視圖組件, 可以設定Activity, 也可以設定Fragement;

添加選項卡 : tabHost.add(tag), 傳入的參數是建立選項卡的時候定義的唯一標識;

 

三 代碼

 

XML布局檔案 :

 

 

                                        <framelayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_weight="1" android:layout_width="fill_parent">                                                                                                                                                                                </framelayout>                

 

Activity主介面代碼 :

 

 

package shuliang.han.tabhost_test;import android.app.TabActivity;import android.os.Bundle;import android.widget.TabHost;import android.widget.TabHost.TabSpec;public class MainActivity extends TabActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.tabhost);TabHost tabHost = getTabHost();TabSpec page1 = tabHost.newTabSpec(tab1).setIndicator(叫獸).setContent(R.id.isanimal);tabHost.addTab(page1);TabSpec page2 = tabHost.newTabSpec(tab2).setIndicator(老濕).setContent(R.id.alwayswet);tabHost.addTab(page2);TabSpec page3 = tabHost.newTabSpec(tab3).setIndicator(哪吒).setContent(R.id.nezha);tabHost.addTab(page3);}}