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

时间：2023-03-08 23:23:40
选项卡（TabHost）的功能与用法

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

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

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

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

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

使用TabHost的一般步骤如下。

  1. 在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容。
  2. Activity应该继承TabActivity。
  3. 调用TabActivity的getTabHost()方法获取TabHost对象。
  4. 通过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）的功能与用法

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

相关文章