Android學習筆記29：切換卡TabHost控件的使用

　　在Android中，通常可以使用切換卡（選項卡）實現切換顯示不同頁面內容的功能。這一功能可以通過TabHost控件來實現。

　　下面我們就通過一個簡單的實例演示如何使用TabHost控件完成切換卡功能，完成后的運行效果如圖1所示。

圖1 主頁顯示效果

　　可以看出，在該實例中，總共設置了四個TabHost標簽，分別為主頁、時間、聯系人和搜索。在點擊這些標簽時，便可以完成相應頁面內容的顯示。

 

1.界面布局

　　TabHost是整個Tab的容器，是由TabWidget和FrameLayout 兩部分組成的。其中，TabWidget是每個tab的標簽，而FrameLayout則是tab所要顯示的內容。

　　根據以上的描述，我們就可以對整個顯示界面進行合理的布局了。我們以LinearLayout的垂直布局方式將整個TabHost分成上下兩部分，上面使用TabWidget控件顯示標簽，下面使用FrameLayout布局顯示每個標簽下的對應內容。

　　具體的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:orientation="vertical"
　　        android:layout_width="match_parent"
　　        android:layout_height="match_parent">
　　        
　　        <!-- TabHost的標簽 -->
　　        <TabWidget 
　　            android:id="@android:id/tabs"
　　            android:layout_width="match_parent"
　　            android:layout_height="wrap_content"    >
　　        </TabWidget>
　　        
　　        <!-- TabHost的內容 -->
　　        <FrameLayout
　　            android:id="@android:id/tabcontent" 
　　            android:layout_width="match_parent"
　　            android:layout_height="match_parent"    >
　　            
　　            <!-- 第一個標簽要顯示的內容 -->
　　            <ImageView
　　                android:id="@+id/homeimage"
　　                android:layout_width="wrap_content"
　　                android:layout_height="wrap_content"
　　                android:src="@+drawable/homeimage"
　　                android:background="#FFFFFF"    ></ImageView>
　　            
　　            <!-- 第二個標簽要顯示的內容 -->
　　            <LinearLayout 
　　                android:id="@+id/time"
　　                android:layout_width="match_parent"
　　                android:layout_height="match_parent"
　　                android:orientation="vertical"
　　                android:background="#000000">
　　                <AnalogClock
　　                    android:layout_marginTop="30dp"
　　                    android:layout_width="match_parent"
　　                    android:layout_height="wrap_content"    ></AnalogClock>
　　                <DigitalClock
　　                    android:textColor="#FFFFFF"
　　                    android:gravity="center_horizontal"
　　                    android:layout_marginTop="10dp"
　　                    android:layout_width="match_parent"
　　                    android:layout_height="wrap_content"    ></DigitalClock>
　　            </LinearLayout> 
　　            
　　            <!-- 第三個標簽要顯示的內容 -->
　　            <TextView 
　　                android:id="@+id/personlist"
　　                android:layout_width="match_parent"
　　                android:layout_height="match_parent"
　　                android:text="聯系人列表">
　　            </TextView>
　　            
　　            <!-- 第四個標簽要顯示的內容 -->
　　            <LinearLayout 
　　                android:id="@+id/searcher"
　　                android:orientation="horizontal"
　　                android:layout_width="match_parent"
　　                android:layout_height="match_parent"    >
　　                <EditText
　　                    android:layout_weight="5"
　　                    android:layout_width="0dp"
　　                    android:layout_height="wrap_content"
　　                    android:hint="請輸入搜索關鍵字"    ></EditText>
　　                <Button
　　                    android:layout_weight="1"
　　                    android:layout_width="0dp"
　　                    android:layout_height="wrap_content"
　　                    android:text="搜索">    </Button>  
　　            </LinearLayout>
　　            
　　        </FrameLayout>
　　    </LinearLayout>
　　</TabHost>

　　通過以上代碼可以看出，在FrameLayout布局中分別實現了四個標簽下所要顯示的內容的布局設置。比如，在第二個標簽“時間”中，我們以LinearLayout的垂直布局方式顯示了一個指針式時鍾AnalogClock和數字式時鍾DigitalClock，其顯示效果如圖2所示。

　　此外，在使用TabHost控件時有一點需要特別注意，TabHost、TabWidget以及FrameLayout的id是固定的，必須按如下形式進行設置。

　　（1）TabHost的android:id必須設置為：android:id="@android:id/tabhost"

　　（2）TabWidget的android:id必須設置為：android:id="@android:id/tabs"

　　（3）FrameLayout的android:id必須設置為：android:id="@android:id/tabcontent" 

圖2 時間顯示效果

 

2.TabHost控件的常用方法

　　了解了如何對TabHost控件進行布局之后，我們還需要了解TabHost控件的一些常用方法。具體如下：

　　（1）public void addTab (TabHost.TabSpec tabSpec); 　  //添加Tab

　　（2）public int getCurrentTab (); 　　　　　　　　　　　　//獲取當前Tab的index

　　（3）public String getCurrentTabTag (); 　　　　　　　　 //獲取當前Tab的tag

　　（4）public View getCurrentTabView (); 　　　　　　　　 //獲取當前Tab的視圖

　　（5）public void setCurrentTab (int index); 　　　　　　  //設置當前顯示哪個Tab

　　（6）public void setCurrentTabByTag (String tag); 　　　//設置當前顯示哪個Tab

 

3.TabHost.TabSpec

　　從TabHost控件的常用方法中可以看出，要將Tab加入到TabHost中，需要使用到addTab (TabHost.TabSpec tabSpec)方法，而這個方法的參數是一個TabHost.TabSpec對象，那么TabHost的內部類TabHost.TabSpec是用來干嘛的呢？

　　我們已經知道，每個Tab都是由TabWidget和FrameLayout 兩部分組成的。而TabHost.TabSpec可以為每個Tab設置一個Tag（類型為String），以此來跟蹤每一個Tab。此外，TabHost.TabSpec還可以為Tab設置標簽、圖標以及內容。由此可以看出TabHost.TabSpec類對TabHost控件來說是及其重要的。

　　TabHost.TabSpec類的常用方法如圖3所示。

圖3 TabHost.TabSpec類的常用方法

　　由圖3可以看出，在TabHost.TabSpec類中提供了設置Tab標簽和圖標的方法setIndicator()，以及設置Tab內容的方法setContent()。利用這兩個方法，我們便可以將我們在xml布局文件中定義好的Tab內容加載到對應的TabHost控件中了。具體實現方法如下：

    /*
     * Function   :    onCreate()
     * Author     :    博客園-依舊淡然
     */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mTabHost = getTabHost();        //獲取TabHost對象
        
        //添加“主頁”Tab到TabHost控件中
        mTabHost.addTab(mTabHost.newTabSpec("home")
                .setIndicator("主頁", getResources().getDrawable(R.drawable.home))//設置Tab標簽和圖標
                .setContent(R.id.homeimage));        //設置Tab內容
        
        //添加“時間”Tab到TabHost控件中
        mTabHost.addTab(mTabHost.newTabSpec("time")
                .setIndicator("時間", getResources().getDrawable(R.drawable.time))
                .setContent(R.id.time));
        
        //添加“聯系人”Tab到TabHost控件中
        mTabHost.addTab(mTabHost.newTabSpec("persons")
                .setIndicator("聯系人", getResources().getDrawable(R.drawable.persons))
                .setContent(R.id.personlist));
        
        //添加“搜索”Tab到TabHost控件中
        mTabHost.addTab(mTabHost.newTabSpec("searcher")
                .setIndicator("搜索", getResources().getDrawable(R.drawable.search))
                .setContent(R.id.searcher));
        
        mTabHost.setBackgroundResource(R.drawable.background);  //設置TabHost控件的背景圖片
        mTabHost.setCurrentTab(0);                              //設置當前顯示第一個Tab
        mTabHost.setOnTabChangedListener(this);                 //設置TabHost控件的事件監聽

　　通過以上代碼，我們向TabHost控件中添加了四個Tab對象，並設置了各自的Tab標簽和圖標以及Tab內容。此外，我們還為TabHost控件設置了背景圖片以及默認顯示第一個Tab。

 

4.事件監聽

　　對TabHost控件進行事件監聽，需要實現OnTabChangeListener接口中的OnTabChanged()方法。

 

 

相關資料：

多頁顯示Tag的使用

http://blog.csdn.net/flowingflying/article/details/6304289

Android應用底部導航欄（選項卡）實例

http://blog.csdn.net/cjjky/article/details/7209056