一、TabHost概述

TabHost是一種非常實用的組件，TabHost可以很方便地在窗口上放置多個標籤頁，每個標籤頁相當於獲得了一個與外部容器相同大小的組件擺放區域。通過這種方式，就可以在一個容器裏放置更多組件。

TabHost是整個Tab的容器，包含TabWidget和FrameLayout兩個部分，TabWidget是每個Tab的標籤，FrameLayout是Tab內容。與TabHost結合使用的有如下2個組件。

TabWidget：代表選項卡的標題條。
TabSpec：代表選項卡的一個Tab頁面。

TabHost僅僅是一個簡單的容器，它提供瞭如下兩個方法來創建、添加標籤頁。

newTabSpec(String tag)：創建選項卡。
addTab(TabHost.TabSpec tabSpec)：添加選項卡。

實現TabHost有兩種方式：

直接讓一個Activity程序繼承TabActivity類。
定義XML佈局文件利用findViewById()方法取得TagHost組件，通過setup()方法實例化並進行配置。

二、繼承TabActivity實現

通過繼承TabActivity類，使用TabHost的一般步驟如下。

在界面佈局文件中定義TabHost組件，併爲該組件定義該選項卡的內容。
Activity 應該繼承 TabActivity。
調用 TabActivity 的 getTabHost()方法獲取 TabHost 對象。
通過TabHost對象的方法來創建、添加選項卡。

除此之外，TabHost還提供了一些方法來獲取當前選項卡。如果程序需要監控TabHost裏當前標籤頁的改變，則可以爲它設置 TabHost.OnTabChangeListener 監聽器。

接下來通過一個簡單的示例程序來學習TabHost的使用。

繼續使用WidgetSample工程的advancedviewsample模塊，在app/main/res/layout/目錄下創建tabhosttab_layout.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="match_parent"
         android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_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="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/widget_layout_red"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff0000"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_green"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00ff00"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_blue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0000ff"
                android:orientation="vertical"/>
        </FrameLayout>
    </LinearLayout>
</TabHost>

請注意上面的佈局文件中代碼，從上面的佈局文件可以發現，TabHost容器內部需要組合兩個組件：TabWidget和FrameLayout，其中TabWidget用於定義選項卡的標題條， FrameLayout則用於層疊組合多個選項頁面。不僅如此，上面的佈局文件中這三個組件的 ID也有要求。

TabHost 的 ID 應該爲@android:id/tabhost。
TabWidget 的 ID 應該爲@android:id/tabs。
FrameLayout 的 ID 應該爲@android:id/tabcontent。

上面這三個ID並不是開發者自己定義的，而是引用了 Android系統已有的ID。

接下來主程序即可加載該佈局資源，並將佈局文件中的三個Tab頁面添加到該TabHost 容器中。新建TabHostTabActivity.java文件，加載上面新建的佈局文件，具體代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程，歡迎關注微信公衆號ShareExpert
 */
public class TabHostTabActivity extends TabActivity {
    private TabHost mTabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhosttab_layout);

        // 從TabActivity上面獲取放置Tab的TabHost
        mTabHost = getTabHost();

        // 添加第一個標籤
        TabHost.TabSpec tab1 = mTabHost.newTabSpec("0");
        tab1.setIndicator("紅色");
        tab1.setContent(R.id.widget_layout_red);
        mTabHost.addTab(tab1);

        // 添加第二個標籤
        mTabHost.addTab(mTabHost
                // 創建新標籤
                .newTabSpec("1")
                // 設置標籤標題
                .setIndicator("綠色")
                // 設置該標籤的佈局內容
                .setContent(R.id.widget_layout_green));

        // 添加第三個標籤
        mTabHost.addTab(mTabHost.newTabSpec("2")
                .setIndicator("藍色")
                .setContent(R.id.widget_layout_blue));
    }
}

上面程序中的代碼就是爲TabHost創建並添加Tab頁面的代碼。上面的程序一共添加了三個標籤頁，用了兩種方式來實現。

修改啓動的Activity，運行程序，可以看到下圖所示界面效果。

點擊標籤，可以切換顯示的內容。

上面的程序調用了 TabHost.TabSpec對象的 setContent(int viewld)方法來設置標籤頁內容。

除此之外，還可調用setContent(Intent intent)方法來設置標籤頁內容，Intent還可用於啓動其他Activity——這意味着TabHost.TabSpec可直接裝載另一個Activity。

三、繼承Activity實現

與繼承TabActivity實現TabHost大體步驟差不多，唯一的區別就是沒有TabActivity系統封裝，必須由開發者自己獲取TabHost組件而已。

在上面的示例基礎上進行修改，創建tabhost_layout.xml文件，在其中填充如下代碼片段：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/mytabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_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="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/widget_layout_red"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff0000"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_green"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00ff00"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_blue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0000ff"
                android:orientation="vertical"/>
        </FrameLayout>
    </LinearLayout>
</TabHost>

從上述代碼可以發現，除了TabHost 的id可以自定義外，TabWidget和FrameLayout仍然必須爲系統的ID。

界面交互代碼稍微有所不同，新建TabHostActivity.java文件，加載上面新建的佈局文件，具體代碼如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TabHost;

/**
 * @創建者 鑫鱻
 * @描述 Android零基礎入門到精通系列教程，歡迎關注微信公衆號ShareExpert
 */
public class TabHostActivity extends AppCompatActivity {
    private TabHost mTabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhost_layout);

        // 獲取TabHost組件
        mTabHost = (TabHost) findViewById(R.id.mytabhost);
        //調用 TabHost.setup()
        mTabHost.setup();

        // 添加三個標籤
        mTabHost.addTab(mTabHost.newTabSpec("0").setIndicator("紅色").setContent(R.id.widget_layout_red));;
        mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("綠色").setContent(R.id.widget_layout_green));
        mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("藍色").setContent(R.id.widget_layout_blue));
    }
}

會發現除了查找我們自定義的TabHost組件外，還多了一條語句setup()來加載TabHost，否則程序會報錯。

運行修改後的程序，最終效果同繼承TabActivity一樣。

有木有發現這個界面很不美觀，所以在實際開發中經常會借用RadioButton來定製TabHost。

其實TabHost組件在安卓4.0之後已經被廢棄了，建議使用Fragment組件來代替它。由於其設計違反了Activity單一窗口原則，它可以同時加載多個Activity，然後再它們之間進行來回切換；另外有個很致命的問題就是當點擊別的選項時，按下Back後退鍵，它會使整個應用程序都退出，而不是切換到前一個選項卡，雖然可以在主程序裏覆寫OnKeyDown這個方法，但這樣就會導致每一次按下Back後退鍵都只能回到第一個選項菜單。

今天就先到這裏，如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論微信羣，共同成長！

此文章版權爲微信公衆號分享達人秀（ShareExpert）——鑫鱻所有，若需轉載請聯繫作者授權，特此聲明！

往期總結分享：

Android零基礎入門第1節：Android的前世今生

Android零基礎入門第2節：Android 系統架構和應用組件那些事

Android零基礎入門第3節：帶你一起來聊一聊Android開發環境

Android零基礎入門第4節：正確安裝和配置JDK, 高富帥養成第一招

Android零基礎入門第5節：善用ADT Bundle, 輕鬆邂逅女神

Android零基礎入門第6節：配置優化SDK Manager, 正式約會女神

Android零基礎入門第7節：搞定Android模擬器，開啓甜蜜之旅

Android零基礎入門第8節：HelloWorld，我的第一趟旅程出發點

Android零基礎入門第9節：Android應用實戰，不懂代碼也可以開發