Android項目學習—Tabhost用法詳解



控件TabHost的功能和web技術中的“選項卡”控件顯示的效果一樣，都是用最小的空間顯示更多的數據。

一.Tabhost的相關介紹

1. TabHost常用組件

TabWidget : 該組件就是TabHost標籤頁中上部 或者 下部的按鈕, 可以點擊按鈕切換選項卡;

TabSpec: 代表了選項卡界面, 添加一個TabSpec即可添加到TabHost中;

創建選項卡 : newTabSpec(String tag), 創建一個選項卡;

添加選項卡 : addTab(tabSpec);

2.Tabhost的使用步驟

a. 定義佈局 : 在XML文件中使用Tabhost組件, 並在其中定義一個FrameLayout選項卡內容;

b. 繼承TabActivity: 顯示選項卡組件的Activity繼承TabActivity;

3.創建添加選項卡的方法：

 newTabSpec():創建選項卡

 addTab():添加選項卡

二.activity方法

1.獲取Tabhost

調用getHost()方法獲取TabHost組件的方法的前提是在佈局文件中, 但是不許設置了android自帶的id android:id="@android:id/tabhost" 纔可以。

2.創建選項卡

調用TabHost組件的newTabHost(tag), 其中的tag是字符串。

XML佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            />
    </LinearLayout>
    <TabHost
        android:layout_width="match_parent" android:layout_height="match_parent"
        android:id="@android:id/tabhost"
        android:layout_weight="1"
        ><!--引用android系統已有的id-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></TabWidget>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <!--定義第一個標籤頁的內容-->
                <LinearLayout
                    android:id="@+id/tab01"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="消息頁面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab02"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="班級頁面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
                <LinearLayout
                    android:id="@+id/tab03"
                    android:orientation="vertical"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                    <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:text="我的頁面"
                        android:textSize="30sp"
                        />
                </LinearLayout>
            </FrameLayout>

        </LinearLayout>

    </TabHost>

Activity主界面代碼 : 

package xiaocool.net.my;

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

/**
 * Created by MRYU on 2015/3/7.
 */
public class XiaoXi extends TabActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.xiaoxi);
        //獲取tabhost組件
        TabHost tabHost=getTabHost();
        //創建第一個Tab頁
        TabHost.TabSpec tab1=tabHost.newTabSpec("tab1")
                .setIndicator("班級")//設置標題
                .setContent(R.id.tab01);
        //添加第一個tab頁
        tabHost.addTab(tab1);
        TabHost.TabSpec tab2=tabHost.newTabSpec("tab2")
                .setIndicator("消息")//設置標題
                .setContent(R.id.tab02);
        //添加第一個tab頁
        tabHost.addTab(tab2);

        TabHost.TabSpec tab3=tabHost.newTabSpec("tab3")
                .setIndicator("我")//設置標題
                .setContent(R.id.tab03);
        //添加第一個tab頁
        tabHost.addTab(tab3);
    }
}

效果圖：