Android零基础入门第63节：过时但仍值得学习的选项卡TabHost

原文:Android零基础入门第63节：过时但仍值得学习的选项卡TabHost

由于前几天参加一个学习培训活动，几乎每天都要从早晨7点到晚上一两点，没有什么时间来分享，实在抱歉中间断更了几天。从今天开始恢复分享，更多精彩敬请期待。

今天来了解一个过时的组件，了解的目的不是学会用起来开发，而是了解这种界面的设计和其特点，后期可以用其他方式来替代。

一、TabHost概述

TabHost是一种非常实用的组件，TabHost可以很方便地在窗口上放置多个标签页，每个标签页相当于获得了一个与外部容器相同大小的组件摆放区域。通过这种方式，就可以在一个容器里放置更多组件。

TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的标签，FrameLayout是Tab内容。与TabHost结合使用的有如下2个组件。

• TabWidget：代表选项卡的标题条。

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

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

• newTabSpec(String tag)：创建选项卡。

• addTab(TabHost.TabSpec tabSpec)：添加选项卡。

实现TabHost有两种方式：

• 直接让一个Activity程序继承TabActivity类。

• 定义XML布局文件利用findViewById()方法取得TagHost组件，通过setup()方法实例化并进行配置。

二、继承TabActivity实现

通过继承TabActivity类，使用TabHost的一般步骤如下。

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

2. Activity 应该继承 TabActivity。

3. 调用 TabActivity 的 getTabHost()方法获取 TabHost 对象。

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

除此之外，TabHost还提供了一些方法来获取当前选项卡。如果程序需要监控TabHost里当前标签页的改变，则可以为它设置 TabHost.OnTabChangeListener 监听器。

接下来通过一个简单的示例程序来学习TabHost的使用。

继续使用WidgetSample工程的advancedviewsample模块，在app/main/res/layout/目录下创建tabhosttab_layout.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">
    <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="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/widget_layout_red"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff0000"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_green"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00ff00"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_blue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0000ff"
                android:orientation="vertical"/>
        </FrameLayout>
    </LinearLayout>
</TabHost>

请注意上面的布局文件中代码，从上面的布局文件可以发现，TabHost容器内部需要组合两个组件：TabWidget和FrameLayout，其中TabWidget用于定义选项卡的标题条， FrameLayout则用于层叠组合多个选项页面。不仅如此，上面的布局文件中这三个组件的 ID也有要求。

• TabHost 的 ID 应该为@android:id/tabhost。

• TabWidget 的 ID 应该为@android:id/tabs。

• FrameLayout 的 ID 应该为@android:id/tabcontent。

上面这三个ID并不是开发者自己定义的，而是引用了 Android系统已有的ID。

接下来主程序即可加载该布局资源，并将布局文件中的三个Tab页面添加到该TabHost 容器中。新建TabHostTabActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

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

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class TabHostTabActivity extends TabActivity {
    private TabHost mTabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhosttab_layout);

        // 从TabActivity上面获取放置Tab的TabHost
        mTabHost = getTabHost();

        // 添加第一个标签
        TabHost.TabSpec tab1 = mTabHost.newTabSpec("0");
        tab1.setIndicator("红色");
        tab1.setContent(R.id.widget_layout_red);
        mTabHost.addTab(tab1);

        // 添加第二个标签
        mTabHost.addTab(mTabHost
                // 创建新标签
                .newTabSpec("1")
                // 设置标签标题
                .setIndicator("绿色")
                // 设置该标签的布局内容
                .setContent(R.id.widget_layout_green));

        // 添加第三个标签
        mTabHost.addTab(mTabHost.newTabSpec("2")
                .setIndicator("蓝色")
                .setContent(R.id.widget_layout_blue));
    }
}

上面程序中的代码就是为TabHost创建并添加Tab页面的代码。上面的程序一共添加了三个标签页，用了两种方式来实现。

修改启动的Activity，运行程序，可以看到下图所示界面效果。

点击标签，可以切换显示的内容。

上面的程序调用了 TabHost.TabSpec对象的 setContent(int viewld)方法来设置标签页内容。

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

三、继承Activity实现

与继承TabActivity实现TabHost大体步骤差不多，唯一的区别就是没有TabActivity系统封装，必须由开发者自己获取TabHost组件而已。

在上面的示例基础上进行修改，创建tabhost_layout.xml文件，在其中填充如下代码片段：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/mytabhost"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
    <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="0dp"
            android:layout_weight="1">
            <LinearLayout
                android:id="@+id/widget_layout_red"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff0000"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_green"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#00ff00"
                android:orientation="vertical"/>
            <LinearLayout
                android:id="@+id/widget_layout_blue"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#0000ff"
                android:orientation="vertical"/>
        </FrameLayout>
    </LinearLayout>
</TabHost>

从上述代码可以发现，除了TabHost 的id可以自定义外，TabWidget和FrameLayout仍然必须为系统的ID。

界面交互代码稍微有所不同，新建TabHostActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TabHost;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class TabHostActivity extends AppCompatActivity {
    private TabHost mTabHost = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhost_layout);

        // 获取TabHost组件
        mTabHost = (TabHost) findViewById(R.id.mytabhost);
        //调用 TabHost.setup()
        mTabHost.setup();

        // 添加三个标签
        mTabHost.addTab(mTabHost.newTabSpec("0").setIndicator("红色").setContent(R.id.widget_layout_red));;
        mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("绿色").setContent(R.id.widget_layout_green));
        mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("蓝色").setContent(R.id.widget_layout_blue));
    }
}

会发现除了查找我们自定义的TabHost组件外，还多了一条语句setup()来加载TabHost，否则程序会报错。

运行修改后的程序，最终效果同继承TabActivity一样。

有木有发现这个界面很不美观，所以在实际开发中经常会借用RadioButton来定制TabHost。

其实TabHost组件在安卓4.0之后已经被废弃了，建议使用Fragment组件来代替它。由于其设计违反了Activity单一窗口原则，它可以同时加载多个Activity，然后再它们之间进行来回切换；另外有个很致命的问题就是当点击别的选项时，按下Back后退键，它会使整个应用程序都退出，而不是切换到前一个选项卡，虽然可以在主程序里覆写OnKeyDown这个方法，但这样就会导致每一次按下Back后退键都只能回到第一个选项菜单。

今天就先到这里，如果有问题欢迎留言一起探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

此文章版权为微信公众号分享达人秀（ShareExpert）——鑫鱻所有，若需转载请联系作者授权，特此声明！

往期总结分享：

Android零基础入门第1节：Android的前世今生

Android零基础入门第2节：Android 系统架构和应用组件那些事

Android零基础入门第3节：带你一起来聊一聊Android开发环境

Android零基础入门第4节：正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节：善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节：配置优化SDK Manager, 正式约会女神

Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅

Android零基础入门第8节：HelloWorld，我的第一趟旅程出发点

Android零基础入门第9节：Android应用实战，不懂代码也可以开发

Android零基础入门第10节：开发IDE大升级，终于迎来了Android Studio

Android零基础入门第11节：简单几步带你飞，运行Android Studio工程

Android零基础入门第12节：熟悉Android Studio界面，开始装逼卖萌

Android零基础入门第13节：Android Studio个性化配置，打造开发利器

Android零基础入门第14节：使用高速Genymotion，跨入火箭时代

Android零基础入门第15节：掌握Android Studio项目结构，扬帆起航

Android零基础入门第16节：Android用户界面开发概述

Android零基础入门第17节：文本框TextView

Android零基础入门第18节：输入框EditText

Android零基础入门第19节：按钮Button

Android零基础入门第20节：复选框CheckBox和单选按钮RadioButton

Android零基础入门第21节：开关组件ToggleButton和Switch

Android零基础入门第22节：图像视图ImageView

Android零基础入门第23节：图像按钮ImageButton和缩放按钮ZoomButton

Android零基础入门第24节：自定义View简单使用，打造属于你的控件

Android零基础入门第25节：简单且最常用的LinearLayout线性布局

Android零基础入门第26节：两种对齐方式，layout_gravity和gravity大不同

Android零基础入门第27节：正确使用padding和margin

Android零基础入门第28节：轻松掌握RelativeLayout相对布局

Android零基础入门第29节：善用TableLayout表格布局

Android零基础入门第30节：两分钟掌握FrameLayout帧布局

Android零基础入门第31节：少用的AbsoluteLayout绝对布局

Android零基础入门第32节：新推出的GridLayout网格布局

Android零基础入门第33节：Android事件处理概述

Android零基础入门第34节：Android中基于监听的事件处理

Android零基础入门第35节：Android中基于回调的事件处理

Android零基础入门第36节：Android系统事件的处理

Android零基础入门第37节：初识ListView

Android零基础入门第38节：初识Adapter

Android零基础入门第39节：ListActivity和自定义列表项

Android零基础入门第40节：自定义ArrayAdapter

Android零基础入门第41节：使用SimpleAdapter

Android零基础入门第42节：自定义BaseAdapter

Android零基础入门第43节：ListView优化和列表首尾使用

Android零基础入门第44节：ListView数据动态更新

Android零基础入门第45节：网格视图GridView

Android零基础入门第46节：列表选项框Spinner

Android零基础入门第47节：自动完成文本框AutoCompleteTextView

Android零基础入门第48节：可折叠列表ExpandableListView

Android零基础入门第49节：AdapterViewFlipper图片轮播

Android零基础入门第50节：StackView卡片堆叠

Android零基础入门第51节：进度条ProgressBar

Android零基础入门第52节：自定义ProgressBar炫酷进度条

Android零基础入门第53节：拖动条SeekBar和星级评分条RatingBar

Android零基础入门第54节：视图切换组件ViewSwitcher

Android零基础入门第55节：ImageSwitcher和TextSwitcher

Android零基础入门第56节：翻转视图ViewFlipper

Android零基础入门第57节：DatePicker和TimePicker选择器

Android零基础入门第58节：数值选择器NumberPicker

Android零基础入门第59节：常用三大Clock时钟组件

Android零基础入门第60节：日历视图CalendarView和定时器Chronometer

Android零基础入门第61节：滚动视图ScrollView

Android零基础入门第62节：搜索框组件SearchView