Android ——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()方法。