TabHost选项卡的实现（一）：使用TabActivity实现

2023-08-22 12:21:46

一、 TabHost的基本开发流程

TabHost是一种非常实用的组件，可以很方便的在窗口上防止多个标签页，每个标签页相当于获得了一个外部容器相同大小的组件摆放区域。

我们熟悉的手机电话系统“未接电话”、“已接电话”、“呼出电话”就可以使用TabHost实现。

1.1 与TabHost结合使用的组件

· TabWidget：代表选项卡的标签条。

· TabSpec：代表选项卡的一个Tab页面。

1.2 TabHost提供的创建选项卡方法

TabHost中常用方法;

· void addTab(TabHost.TabSpec tabSpec)
添加一个标签页

· int getCurrentTab()
获取当前的标签页id

· String getCurrentTabTag()
获取当前的标签页的Tag

· TabHost.TabSpec
newTabSpec(String tag) 创建一个TabSpec

· void setCurrentTab(int index)
设置一个标签页的id

· void setCurrentTabByTag(String tag)
设置一个标签页的Tag

TabSpec中常用的方法：

· String getTag()

· TabHost.TabSpec
setContent(int viewId) 通过指定布局文件，设置标签页的内容

· TabHost.TabSpec
setContent(Intent intent)
通过指定Intent所指定的Activity，设置标签页的内容

· TabHost.TabSpec
setIndicator(CharSequence label) 设置该标签页的标题

· TabHost.TabSpec
setIndicator(CharSequence label, Drawable icon)
设置该标签页的标题和图标

1.3 开发流程

· 在界面布局中定义TabHost组件，并为该组件定义该选项卡的内容

· Activity应该继承TabActivity。

· 调用TabActivity的getTabHost（）方法获取TabHost对象。

· 通过TabHost对象的方法来创建、添加选项卡。

二、实现TabHost布局的通话记录界面

1）首先，我们定义TabHost需要显示的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"

    android:layout_weight="1" >

    <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:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical" >

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="杀生丸 - 2014-9-26"

                    android:textSize="11pt" />

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="犬夜叉 - 2014-9-26"

                    android:textSize="11pt" />

            </LinearLayout>

            <!-- 定义第二个标签页的内容 -->

            <LinearLayout

                android:id="@+id/tab02"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical" >

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="桔梗  - 2014年9月26日"

                    android:textSize="11pt" />

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="弥勒 - 2014年9月26日"

                    android:textSize="11pt" />

            </LinearLayout>

            <!-- 定义第三个标签页的内容 -->

            <LinearLayout

                android:id="@+id/tab03"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:orientation="vertical"

                android:textSize="11pt" >

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="银月 - 2014年9月26日"

                    android:textSize="11pt" />

                <TextView

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="寒食  - 2014-9-26"

                    android:textSize="11pt" />

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>

</TabHost>

对于上述布局文件，我们有三个地方的ID需要注意：

1. TabHost的ID应该为@android:id/tabhost

2. TabWidget的ID应该为@android:id/tabs

3. FrameLayout的ID应该为@android:id/tabcontent

这三个ID并不是程序员自定义的，而是Android系统提供的，必须按照如此方法设置。

2) Java代码，将三个tab添加到容器中

public class MainActivity extends TabActivity

{

    @Override

    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        TabHost tabHost = getTabHost();

        TabSpec ts1 = tabHost.newTabSpec("tab1").setIndicator("已接来电").setContent(R.id.tab01);

        TabSpec ts2 = tabHost.newTabSpec("tab2").setIndicator("未接来电").setContent(R.id.tab02);

        TabSpec ts3 = tabHost.newTabSpec("tab3").setIndicator("呼出电话").setContent(R.id.tab03);

        tabHost.addTab(ts1);

        tabHost.addTab(ts2);

        tabHost.addTab(ts3);

    }

}

效果图：

说明; 如今，我们已经不再推荐使用TabActivity来创建标签页了，更加推荐使用Fragment代替TabActivity，请看下章讲解如何去实现Fragment的TabHost。

码农公寓

相关文章