安卓開發筆記——TabHost組件(一)（實現底部菜單導航）

什么是TabHost？

TabHost組件的主要功能是可以進行應用程序分類管理，例如：在用戶使用windows操作系統的時候，經常見到如圖所示的圖形界面。

 

 

TabHost選項卡，說到這個組件，不得不先說一件事情，翻翻谷歌提供給我們的API，我們可以發現這樣的一段話：

它告訴我們，這個組件在安卓4.0之后已經被廢棄了，建議我們新的程序應該使用Fragment組件來代替它。

其實並不出乎意料，使用過TabHost的朋友應該都知道：

1、它的設計違反了Activity單一窗口原則，它可以同時加載多個Activity，然后再它們之間進行來回切換。

2、有個很致命的問題就是當我們點擊別的選項時，按下Back后退鍵，它會使整個應用程序都退出，而不是切換到前一個選項卡，雖然我們可以在主程序里覆寫OnKeyDown這個方法，但這樣就會導致每一次按下Back后退鍵都只能回到第一個選項菜單。

 

但作為開發者，這個具有歷史里程碑的組件，我們還是需要去掌握下，下面給幾張圖來看下今天要實現的效果:

  

 

下面附上代碼（注釋很詳細）

 

實現TabHost有兩種方式：

方式一：直接讓一個Activity程序繼承TabActivity類（通過getTabHost取得實例）；

方式二：定義XML布局文件利用findViewById()方法取得TagHost組件，通過setup()方法實例化並進行若干配置；

 

 

下面講解以第二種方式為例,先看下項目結構：

 

1、TabHost主布局文件

activity_main.xml（為了使選項卡顯示在屏幕下方，這里采用了相對布局）

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mytabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <!-- 需要一個布局管理器 -->
 
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" 
        >
        
                <!--
       由於TabHost是繼承於FrameLayout，所以需要一個FrameLaytout布局(內容頁) ,id
       必須為tabcontent
        -->

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            >
        </FrameLayout>

        <!-- TabWidget必須標簽，用來存放tab標簽，且id必須為tabs -->

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/tab_widget_background"
            android:layout_alignParentBottom="true"
            >
        </TabWidget>

    </RelativeLayout>

</TabHost>

TabHost的布局的文件必須遵循下面幾點：

1、所有的用於標簽配置的文件，必須以“<TabHost>”為根節點；

2、為了保證標簽頁和標簽內容顯示正常（例如：標簽提示要放在標簽顯示內容之上）則可以采用一個布局管理器進行布局（例如：LinearLayout,RelativeLayout..）

3、定義一個“<TagWidget>”的標簽，用於表示整個標簽容器，另外在定義此組件ID為“tabs”，表示允許加入多個標簽

4、由於TabHost是FrameLayout的子類，所以要想定義標簽頁內容必須使用FrameLayout布局，並且標簽ID為“tabcontent”

 

 

 

 

 

 

 

至於為什么要遵循這些條件，我們打看下TabHost的源碼就可以發現：

 

 

 

 

 

 

 

 

 

2、每個標簽的布局文件

 

tab_layout.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
     android:background="@drawable/tab_selector"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:textColor="@android:color/white"/>

</LinearLayout>

 

3、一個選擇器，用於美觀效果

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:state_pressed="true" android:drawable="@drawable/tab_item_p"
        ></item>
    <item 
        android:state_selected="true" android:drawable="@drawable/tab_item_d"
        ></item>

</selector>

 

4、跳轉Activity的布局文件（由於基本一致，這里只給出其中一個）

tabactivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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


        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:text="我是界面1"/>
    </LinearLayout>

</RelativeLayout>

 

5、JAVA主代碼

 

package com.example.tabhosttest;

import android.app.ActivityGroup;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends ActivityGroup{
    
    private TabHost tabHost;//聲明一個TabHost對象

    //資源文件
    private Class activitys[]={TabActivity1.class,TabActivity2.class,TabActivity3.class,TabActivity4.class,TabActivity5.class};//跳轉的Activity
    private String title[]={"首頁","搜索","設置","主題","更多"};//設置菜單的標題
    private int image[]={R.drawable.tab_icon1,R.drawable.tab_icon2,R.drawable.tab_icon3,R.drawable.tab_icon4,R.drawable.tab_icon5,};//設置菜單
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initTabView();//初始化tab標簽
        
    }

    private void initTabView() {
        //實例化tabhost
        this.tabHost=(TabHost) findViewById(R.id.mytabhost);
        //由於繼承了ActivityGroup，所以需要在setup方法里加入此參數，若繼承TabActivity則可省略
        tabHost.setup(this.getLocalActivityManager());
        
        //創建標簽
        for(int i=0;i<activitys.length;i++){
            //實例化一個view作為tab標簽的布局
            View view=View.inflate(this, R.layout.tab_layout, null);
            
            //設置imageview
            ImageView imageView=(ImageView) view.findViewById(R.id.image);
            imageView.setImageDrawable(getResources().getDrawable(image[i]));
            //設置textview
            TextView textView=(TextView) view.findViewById(R.id.title);
            textView.setText(title[i]);
            //設置跳轉activity
            Intent intent=new Intent(this, activitys[i]);
            
            //載入view對象並設置跳轉的activity
            TabSpec spec=tabHost.newTabSpec(title[i]).setIndicator(view).setContent(intent);
            
            //添加到選項卡
            tabHost.addTab(spec);
        }
        
    }


}

 

這里有個重載方法setIndicator()，這里是用來設置標簽頁：

1、public TabHost.TabSpec setIndicator(CharSequence label)

設置標題，此時無圖標

2、public TabHost.TabSpec setIndicator(CharSequence label, Drawable icon)

設置標題、圖標（這里的圖標可以用getResources().getDrawable(int id)）來設置

3、public TabHost.TabSpec setIndicator(View view)

設置自定義view

 

還有個setContent(Intent intent)，這里是用來設置標簽內容的，也就是我們要跳轉的Activity

 

由於這里有5個選項卡，因此就有5個Activity，具體內容就看自己需求了，這里就不再給出

記得寫完Activity要在AndroidManifest.xml配置文件中聲明

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tabhosttest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.example.tabhosttest.TabActivity1"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name="com.example.tabhosttest.TabActivity2"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name="com.example.tabhosttest.TabActivity3"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name="com.example.tabhosttest.TabActivity4"
            android:label="@string/app_name" >
        </activity>
        <activity
            android:name="com.example.tabhosttest.TabActivity5"
            android:label="@string/app_name" >
        </activity>
    </application>

</manifest>

 

好了，到這里底部導航菜單就實現了，試試吧~

這里再來個不一樣的實現方法，更為簡潔方便《安卓開發復習筆記——TabHost組件(二)（實現底部菜單導航）》