Android開發學習筆記——TabHost實例

轉載自 http://blog.csdn.net/smoooothly/article/details/8705745

現在幾乎所有信息的App都會用到tabHost這個佈局。tabHost是FrameLayout的一個子類。它實現的功能就是用一個tab標籤來控制全局，使用戶可以在不同的tab之間跳轉。

筆者的一個體會就是每次要新寫這個東西總是忘東忘西，所以這次一定要把tabHost實現過程中需要注意的事項總結出來。

一、tabHost佈局

首先說說tabhost在xml文件中的佈局。tabHost的xml佈局文件有三個需要注意的點，可以總結爲"3個ID"。這3個ID分別是"@android:id/tabhost", "@android:id/tabcontent", "@android:id/tabs". 可見這三個ID實際是調用了android系統裏的ID，而不是我們平常自定義的ID（對於自定義的ID我們通常這樣寫，@+id/consumedID）。這三個ID分別代表了三個東西，tabhost即tabhost佈局，tabcontent即標籤頁的內容，tabs即標籤。下面我們以3個ID爲線索，寫一個tabHost的xml文件

第一步，"tabhost"。即建立tabhost佈局。如下，標紅部分體現出了第一個ID。

<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"
   android:fitsSystemWindows="true" >

</TabHost>

第二步，主界面

在tabHost佈局中，我們要把主界面的佈局加進去。這個佈局主要決定了，標籤在屏幕上方還是下方，標籤和內容的位置關係等。比如，我們可以用一個簡單的LinearLayout來表示主界面由內容、標籤兩部分組成，且內容在標籤上方。

第三步，"tabcontent"。即在主界面中定義標籤頁內容的位置。標紅部分體現出了第二個ID。

<FrameLayout
android:id="@android:id/tabcontent"
           android:layout_width="match_parent"
android:layout_height="0dip"
           android:layout_weight="1"
android:foregroundGravity="bottom|fill_horizontal" >
       </FrameLayout>

這一部分有幾個屬性值得大家注意。我們發現大多數的tabHost都是在屏幕的上方或者是下方。這個屬性就是由android:forgroundGravity控制的（藍字部分）。在tabHost中，標籤屬於內容的前景，所以我們在內容裏把它的前景設置爲bottom，那麼標籤就會出現在屏幕下方，而不是默認的屏幕上方。同時，還有一個屬性需要注意（綠字部分），由於我們並不會把標籤頁的內容真正的寫在這裏，所以這裏只是標記了一個位置，所以我們需要將tabcontent的weight屬性置爲1，而layout_height屬性置爲0dip。否則就會出現標籤沒有顯示在屏幕上的情況。

第四步，"tabs"。即定義標籤的屬性。標紅部分體現出了第三個ID。

<TabWidget
 android:id="@android:id/tabs"
           android:layout_width="match_parent"
           android:layout_height="48dp">
       </TabWidget>

有一個專門的標籤爲tabs服務，那就是TabWidget。

所以，理解並記住了這三個ID，以及比較重要的幾個屬性，我們就可以順利的將tabhost的xml佈局文件寫出。

activity_main.xml完整代碼：

<!-- tabhost -->
<TabHostxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<!-- 主界面 -->

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- tabcontent -->

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:foregroundGravity="bottom|fill_horizontal">
</FrameLayout>

<!-- tabs -->

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp">
</TabWidget>

</LinearLayout>

</TabHost>

二、標籤佈局及一些準備工作

在我們開始在Activity使用這個佈局文件之前，我們還需要做幾個準備工作：1.幾個需要在tabHost中切換的界面（Activity+xml）。2.每個標籤的圖標（如需要）以及文字（如需要），以及背景（最好寫成selector）。3.標籤樣式的佈局文件。

由於安卓系統自帶的標籤樣式是非常樸素的，所以我們大多數情況下都需要自己定義標籤樣式。這個樣式很隨意，可以定義成上面圖片下面文字，可以只有圖片或者只有文字。（design.android上有一句話值得大家參考，“圖片總是比文字有力量”大概這個意思）。我舉一個只有文字的例子，因爲比較簡單：

main_tab_indicator.xml

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">

<TextView
android:id="@+id/main_tab_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"/>

</LinearLayout>

這段代碼沒有什麼難度，只需要設計出你想要的樣子就可以了。

然後我們給標籤的背景顏色做一個selector，因爲大多數情況下，標籤在被聚焦或者沒被聚焦的時候，需要有一個明確的樣式上的不同。

main_tab_selector.xml

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">

<itemandroid:drawable="@color/tab_pressed"android:state_pressed="true"/>
<itemandroid:drawable="@color/tab_pressed"android:state_checked="true"/>
<itemandroid:drawable="@color/tab_pressed"android:state_selected="true"/>
<itemandroid:drawable="@color/tab_pressed"android:state_focused="true"/>
<itemandroid:drawable="@color/tab"/>

</selector>

注意，這與按鈕的selector不同，因爲按鈕的seletor通常只需要處理被按和沒有被按兩種情況，但我們的標籤還有一些其他的情況需要考慮，如被選中或者被聚焦。

這些都做好之後，文件結構應該是這樣的：

三、在activity中加載tabhost

這些準備工作都結束之後，我們可以開始在Activity文件中使用所有的這些。注意使用tabHost的Activity需要繼承TabActivity。

在Activity中主要要包含以下幾個函數模塊：

1.tabHost與xml文件關聯

2.tabHost的標籤與xml文件關聯（在以下代碼中的getTabView()函數）

3.tabHost的標籤添加（initTabHost()函數）

下面可以結合代碼和註釋完整的看下：

package com.telecom.auxiliaryclass.controller;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

import com.telecom.auxiliaryclass.R;

publicclass MainActivity extends TabActivity
{
//定義TabHost類型變量
publicstatic TabHost tabHost = null;
//爲方便寫循環，將tabHost的幾個界面和標籤文字均存成數組
publicstatic String[] activityNames = {"LectureActivity", "BrandActivity",
"CategoryActivity", "SearchActivity", "PersonalActivity"};
publicstatic Class[] activities = {LectureActivity.class, BrandActivity.class,
            CategoryActivity.class, SearchActivity.class, PersonalActivity.class};
publicstaticint[] tabStrings = {R.string.main_lecture, R.string.main_brand,
            R.string.main_category, R.string.main_search, R.string.main_personal};

@Override
protectedvoid onCreate(Bundle savedInstanceState)
    {
super.onCreate(savedInstanceState);
//加載佈局文件
        setContentView(R.layout.activity_main);
        initialTabHost();
    }
/**
     * 初始化tabHost
     */
privatevoid initialTabHost()
    {
//直接關聯@android:id/tabhost
        tabHost = getTabHost();

//tabSpec用於設置標籤屬性，包括標籤的樣式和動作
        TabHost.TabSpec tabSpec;

        Intent intent;

//對5個標籤分別進行設置，並加入到tabHost中
for (int i = 0; i < 5; i++)
        {
//新建一個tabSpec，newTabSpec的參數爲標籤的名稱
            tabSpec = tabHost.newTabSpec(activityNames[i]);
//對tabSpec的樣式進行設置
            tabSpec.setIndicator(getTabView(i));
//對tabSpec的動作進行設置
            intent = new Intent(this, activities[i]);
            tabSpec.setContent(intent);
//添加這個tabSpec
            tabHost.addTab(tabSpec);
        }

    }

/**
     * 返回一個標籤的View
     * @param tag 標籤index
     * @return
     */
private View getTabView(int tag)
    {
        View v;
        LayoutInflater li = getLayoutInflater();
//加載標籤的xml佈局文件
        v = li.inflate(R.layout.main_tab_indicator, null);

//設置標籤佈局
        TextView tv = (TextView) v.findViewById(R.id.main_tab_text);
        tv.setText(tabStrings[tag]);
        v.setBackgroundResource(R.drawable.main_tab_selector);

return v;
    }

}

OK了，當這些都做完，一個tabHost的框架就搭建起來了，我們可以看一下效果圖：

好了，這就是一個最簡單的tabHost實現，當然最難也差不多這樣了，各位coder可以將它設計的更加絢麗。祝大家coding愉快！