通用组件TabHost

介绍

        选项卡用于实现一个多标签页的用户界面，通过它可以将一个复杂的对话框分割成若干个标签页，实现对信息的分类显示和管理。使用该组件不仅可以使界面简洁大方，还可以有效地减少窗体的个数。

        在 Android 中，使用选项卡，不能通过某一个具体的组件在 XML 布局文件中添加。通常需要按照以下步骤来实现：

1. 在布局文件中添加实现选项卡所需的 TabHost、TabWidget 和 FrameLayout 组件。
2. 编写各标签页中要显示内容所对应的 XML 布局文件。
3. 在 Activity 中，获取并初始化 TabHost 组件。
4. 为 TabHost 对象添加标签页。

例子

模拟应用商店的选项卡

编写布局文件

<?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">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <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">
        </FrameLayout>
    </LinearLayout>
</TabHost>

编写TabHostActivity

• 这里的标签页引用了切换类组件中的layout1和layout2
• 在应用XML布局文件添加选项卡时，必须使用系统的id来为各组件指定id属性，否则将出现异常
• 这里共添加了两个标签页，一个用于精选表情，另一个用于投稿表情

public class TabHostActivity extends AppCompatActivity {

    private TabHost tabHost; //声明TabHost组件的对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_host);
        tabHost=(TabHost)findViewById(android.R.id.tabhost); //获取TabHost对象
        tabHost.setup(); //初始化TabHost组件
        //声明并实例化一个LayoutInflater对象
        LayoutInflater inflater = LayoutInflater.from(this);
        inflater.inflate(R.layout.layout1, tabHost.getTabContentView());
        inflater.inflate(R.layout.layout2,tabHost.getTabContentView());
        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator("精选表情")
                .setContent(R.id.layout1)); //添加第一个标签页
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator("投稿表情")
                .setContent(R.id.layout2)); //添加第二个标签页
    }
}

效果