选项卡（TabHost）的功能与用法

TabHost是一种非常实用的组件，TabHost可以很方便地在窗口上放置多个便签页，每个标签页相当于获得了一个与外部容器相同大小的组件摆法区域。通过这种方式，就可以在一个容器里放置更多组件，例如手机系统都会在同一个窗口定义多个便签来显示通话记录，包括“未接电话”、“已接电话”、“呼出电话”等。

与TabHost结合使用的还有如下组件。

TabWidget：代表选项卡的标签条。
TabSpec：代表选项卡的一个Tab页面。

TabHost仅仅是一个简单的容器，它提供了如下两个方法来创建、添加选项卡。

newTabSpec(String tag)：创建选项卡。
addTab(TabHost.TabSpec tabSpec)：添加选项卡。

使用TabHost的一般步骤如下。

在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容。
Activity应该继承TabActivity。
调用TabActivity的getTabHost()方法获取TabHost对象。
通过TabHost对象的方法来创建、添加选项卡。

除此之外，TabHost还提供了一些方法获取当前选项卡，获取当前View的方法，具体可参考API文档。如果程序需要监控TabHost里当前标签页的改变，可以为它设置TabHost.OnTabChangeListener监听器。

下面通过一个简单的实例来示范选项卡的用法。

实例：通话记录页面

下面的示例程序使用TabHost定义一个标签容器，并使用了三个LinearLayout来定义标签页（实际上可以使用任何View组件来定义标签页）。该程序的界面布局文件如下。

<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"
    android:layout_weight="2"
    >
<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"/>
    <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:id="@+id/tx01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="女儿国国王 - 2013/08/31"/>
            <TextView android:id="@+id/tx02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 android:text="东海龙女 - 2013/08/31"/>
        </LinearLayout>
        <!-- 定义第二个标签页的内容 -->
        <LinearLayout android:id="@+id/tab02"
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
             <TextView android:id="@+id/tx03"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="火龙王 - 13969004275"
                />
            <TextView android:id="@+id/tx04"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 android:text="牛魔王- 13791030073"
               />
        </LinearLayout>
        <!-- 定义第三个标签的内容 -->
        <LinearLayout android:id="@+id/tab03"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:textSize="11pt">
             <TextView android:id="@+id/tx05"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 android:text="齐天大圣 - 13969004275"/>
            <TextView android:id="@+id/tx06"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                 android:text="孙悟空- 13791030073"/>
            
        </LinearLayout>
    </FrameLayout>
    
    
</LinearLayout>
   
</TabHost>

请注意上面的布局文件中粗体字代码部分，从上面布局文件中可以发现，TabHost容器内部需要组合两个组件：TabWidget和FrameLayout，其中TabWidget定义选项卡的标题条；FrameLayout则用于“层叠”组合多个选项卡页面。不仅如此，上面的布局文件中这三个组件的ID也有改变。

TabHost的ID应该为@android:id/tabhos。
TabWidget的ID应该为@android:id/tabs。
FrameLayout的ID应该为@android:id/tabcontent。

上面这三个ID并不是开发者自己定义的，而是引用了Android系统已有的ID。

接下来主程序即可加载该布局资源，并将布局文件中的三个Tab页面添加到该TabHost容器中。该Activity代码如下。

package org.crazyit.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.app.TabActivity;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabHostTest extends TabActivity {

    @SuppressWarnings("deprecation")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_host_test);
        //获取该Activity里面的TabHost组价
        @SuppressWarnings("deprecation")
        TabHost tabHost=getTabHost();
        //创建第一个Tab页
        TabSpec tab1=tabHost.newTabSpec("tab1")
                .setIndicator("已接电话")//设置标题
                .setContent(R.id.tab01);//设置内容
        //添加第一个标签页
        tabHost.addTab(tab1);
        
        TabSpec tab2=tabHost.newTabSpec("tab2")
                //在标签标题上放置图标
                .setIndicator("呼出电话",getResources().getDrawable(R.drawable.ic_action_search))
                .setContent(R.id.tab02);
        //添加第二个标签
        tabHost.addTab(tab2);
        TabSpec tab3=tabHost.newTabSpec("tab3")
                .setIndicator("未接电话").setContent(R.id.tab03);
        //添加第三个标签页
        tabHost.addTab(tab3);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.tab_host_test, menu);
        return true;
    }

}

上面的程序中粗体字代码就是为TabHost创建、并添加Tab页面的代码。上面的程序中一共添加三个标签页，因此类似粗体字的代码一共写了三次。其中第二个标签的标题上还添加了一个图片。

运行上面的程序将看到如下效果：

上面的程序调用了TabHost.TabSpec对象的setContent(int viewID)方法来设置标签页内容；除此之外还可调用setContent(Intent intent)方法来设置标签页内容，Intent还可用于启动其他Activity——这意味着TabHost.TabSpec可直接装载另一个Activity。

posted @ 2013-10-28 14:29 TealerProg Views(1227) Comments(0) Edit 收藏举报

刷新页面返回顶部

TealerProg

选项卡（TabHost）的功能与用法

公告