Android UI组件学习——选项卡(TabHost)的功能和用法

Android 选项卡(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对象的方法来创建、添加选项卡

实例：通话记录界面
\layout\main.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="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小红-2021/4/21" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小黑-2021/4/18" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab02"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小绿-2021/4/20" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小灰-2021/4/12" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab03"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小粉-2021/4/19" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="小紫-2021/4/17" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

MainActivity.java

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

import androidx.annotation.Nullable;

public class MainActivity extends TabActivity {
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //获取该Activity里的TabHost组件
        TabHost tabHost = getTabHost();
        //创建一个Tab页面
        TabHost.TabSpec tab1 = tabHost.newTabSpec("tab1").setIndicator("已接电话").setContent(R.id.tab01);
        tabHost.addTab(tab1);
        //在呼出标签上放置图标
        TabHost.TabSpec tab2 = tabHost.newTabSpec("tab2").setIndicator("呼出电话").setContent(R.id.tab02);
        tabHost.addTab(tab2);
        TabHost.TabSpec tab3 = tabHost.newTabSpec("tab3").setIndicator("未接电话").setContent(R.id.tab03);
        tabHost.addTab(tab3);
    }
}

效果展示