Android语言基础教程（66）Android高级用户界面设计高级组件之选项卡：Android选项卡进化史：从“老三样”到Fragment的优雅切换

开发Android应用时，把一个复杂对话框拆成几个标签页，界面顿时清爽多了。

在Android应用开发中，选项卡是一种常见且重要的界面设计模式，它允许用户通过简单的点击操作在不同内容区域之间切换。无论是社交App底部的导航栏，还是设置中的分类界面，选项卡都大大提升了用户体验和应用内容的组织性。

还记得早期Android版本中那些略显笨拙的选项卡实现吗？那时我们需要和TabHost、TabWidget这对“难兄难弟”打交道。随着Android系统演进，选项卡实现方式也发生了巨大变化，如今我们有更优雅的Fragment和ViewPager来创建流畅的选项卡界面。

选项卡的基本概念：为什么它如此重要

选项卡在Android应用中如此流行，原因很简单：它可以在有限屏幕空间内组织大量内容。想象一下，如果没有选项卡，我们可能需要一堆跳转页面来展示不同类别的内容，用户操作路径会变得冗长而繁琐。

一个典型的选项卡界面由两部分组成：

• 标签区：用于显示可用的选项，通常是文本或图标
• 内容区：根据选择的标签显示相应内容

在Android设计中，选项卡主要有两种布局方式：顶部导航栏和底部导航栏。虽然google官方曾推崇顶部导航，但随着大屏手机普及，底部导航因为更符合人体工学而变得越来越流行——用户单手操作时，拇指更容易点击屏幕底部区域。

传统方式：使用TabHost实现选项卡

在Android早期版本中，TabHost是实现选项卡的唯一官方组件。使用它需要三个核心组件协同工作：TabHost（容器）、TabWidget（标签组）和FrameLayout（内容区）。

基本布局结构

下面是传统TabHost布局文件的典型结构：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <!-- 这里定义所有选项卡内容，初始时可以为空 -->
        </FrameLayout>
    </LinearLayout>
</TabHost>

注意一点：TabWidget和FrameLayout必须使用Android系统的标准ID，分别是@android:id/tabs和@android:id/tabcontent，这是TabHost正常工作的前提。

实现TabActivity

有了布局文件，接下来需要创建一个继承自TabActivity的Activity来管理这些选项卡：

public class MainActivity extends TabActivity {
    private TabHost tabHost;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // 获取TabHost对象
        tabHost = getTabHost();
        
        // 初始化TabHost，这一步很关键！
        tabHost.setup();