【Android 應用開發】Android - TabHost 頁籤功能用法詳解

TabHost效果圖:

.

作者 :萬境絕塵 

​​​​

.

一. TabHost介紹

TabHost元件可以在界面中存放多個頁籤, 很多軟體都使用了改元件進行設計;

1. TabHost常用元件

TabWidget : 該元件就是TabHost标簽頁中上部 或者 下部的按鈕, 可以點選按鈕切換頁籤;

TabSpec : 代表了頁籤界面, 添加一個TabSpec即可添加到TabHost中;

-- 建立頁籤 : newTabSpec(String tag), 建立一個頁籤;

-- 添加頁籤 : addTab(tabSpec);

2. TabHost使用步驟

a. 定義布局 : 在XML檔案中使用TabHost元件, 并在其中定義一個FrameLayout頁籤内容;

b. 繼承TabActivity : 顯示頁籤元件的Activity繼承TabActivity;

c. 擷取元件 : 通過調用getTabHost()方法, 擷取TabHost對象;

d. 建立添加頁籤 : 通過TabHost建立添加頁籤;

3. 将按鈕放到下面

布局檔案中TabWidget代表的就是頁籤按鈕, Fragement元件代表内容;

設定失敗情況 : 如果Fragement元件沒有設定 android:layout_weight屬性, 那麼将TabWidget放到下面, 可能不會顯示按鈕;

設定權重 : 設定了Fragment元件的權重之後, 就可以成功顯示該頁籤按鈕;

二. TabHost布局檔案

1. 根标簽及id

設定Android自帶id : XML布局檔案中, 可以使用<TabHost> 标簽設定, 其中的id 需要引用 android的自帶id : android:id="@android:id/tabhost" ;

getHost()擷取前提 : 設定了該id之後, 在Activity界面可以使用 getHost(), 擷取這個TabHost 視圖對象;

示例 : 

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >      

2. TabWidget元件

頁籤切換 : 該元件是頁籤切換按鈕, 通過點選該元件可以切換頁籤;

設定android自帶id : 這個元件的id要設定成android的自帶id : android:id="@android:id/tabs" ;

TabHost必備元件 : 該元件與FrameLayout元件是TabHost元件中必備的兩個元件;

切換按鈕下方顯示 : 如果想要将按鈕放到下面, 可以将該元件定義在下面, 但是注意,FrameLayout要設定android:layout_widget = "1"; 

設定TabWidget大小 : 如果想要設定該按鈕元件的大小, 可以設定該元件與FrameLayout元件的權重; 

示例 : 

<TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>      

3. FrameLayout元件

元件作用 : 該元件中定義的子元件是TabHost中每個頁面顯示的頁籤, 可以将TabHost頁籤顯示的視圖定義在其中;

設定android自帶id : 這個元件的id要設定成android的自帶的id : android:id="@android:id/tabcontent" ;

示例 : 

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

二. Activity方法

1. 擷取TabHost

擷取方法 : getHost();

前提 : 調用getHost()方法擷取TabHost元件的方法的前提是在布局檔案中, 設定了android自帶的id android:id="@android:id/tabhost" 才可以;

2. 建立頁籤

建立頁籤 : 調用TabHost元件的newTabHost(tag), 其中的tag是字元串, 即在頁籤的唯一辨別;

設定頁籤 : 

-- 設定按鈕名稱 : setIndicator("叫獸");

-- 設定頁籤内容 : setContent(), 可以設定視圖元件, 可以設定Activity, 也可以設定Fragement;

添加頁籤 : tabHost.add(spec), 傳入的參數是建立頁籤的TabSpec對象;

三 代碼

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="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>
        
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            
            <LinearLayout 
                android:id="@+id/alwayswet"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <ImageView 
                    android:scaleType="fitXY"
                    android:layout_height="fill_parent"
                    android:layout_width="fill_parent"
                    android:src="@drawable/alwayswet"/>
            </LinearLayout>
            
            <LinearLayout 
                android:id="@+id/isanimal"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <ImageView 
                    android:scaleType="fitXY"
                    android:layout_height="fill_parent"
                    android:layout_width="fill_parent"
                    android:src="@drawable/isanimal"/>
            </LinearLayout>
            
            <LinearLayout 
                android:id="@+id/nezha"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical">
                <ImageView 
                    android:scaleType="fitXY"
                    android:layout_height="fill_parent"
                    android:layout_width="fill_parent"
                    android:src="@drawable/nazha"/>
            </LinearLayout>
                        
        </FrameLayout>
        
    </LinearLayout>
    
</TabHost>      

Activity主界面代碼 : 

package shuliang.han.tabhost_test;

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

public class MainActivity extends TabActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tabhost);
    
    TabHost tabHost = getTabHost();
    
    TabSpec page1 = tabHost.newTabSpec("tab1")
        .setIndicator("叫獸")
        .setContent(R.id.isanimal);
    tabHost.addTab(page1);
    
    TabSpec page2 = tabHost.newTabSpec("tab2")
        .setIndicator("老濕")
        .setContent(R.id.alwayswet);
    tabHost.addTab(page2);
    
    TabSpec page3 = tabHost.newTabSpec("tab3")
        .setIndicator("哪吒")
        .setContent(R.id.nezha);
    tabHost.addTab(page3);
  }

}      

.

作者 :萬境絕塵 

​​f​​

.