4.4 常用Widget组件

在前面的章节讲解了用户界面UI设计中布局方面的知识，其中涉及少数几个常用的组件，例如按钮、文本框等。在这一节中着重讲解Android用户UI设计中常用的各种组件的用法。

Android SDK提供了名为android.widget的包，其中提供了在应用程序界面设计中大部分常用的UI可视组件。之前章节中涉及的各种布局以及文本框、按钮等组件都包含在这个包中。Android提供了强大的用户UI功能，要设计自己独特的应用程序界面，需要对各个组件有一个详细的了解。

4.4.1 创建Widget组件实例

在Android Studio中创建一个新的工程，名字为WidgetDemo，用于对各种常见UI组件进行学习。下面是工程实现的步骤，在后续的章节中不会再赘述该过程。

步骤01　新建项目。单击File | New | New Project，打开New Android Project对话框，如图4.12所示。

图4.12 新建项目

步骤02　输入工程名称WidgetDemo，在Location后的文本框中输入工程的保存路径，单击Next按钮后，选择API24:Android 7.0，再次单击Next按钮。

步骤03　选择EmptyActivity，确定Activity名字和Layout文件的名字，单击Finish按钮，则AS会生成工程目录和相关文件。若需要向以前版本兼容，则勾选“Backwards Compatibility(AppCompat)”复选框即可。本书中默认不勾选。

WidgetDemoActivity.java文件是当前应用程序的入口类WidgetDemoActivity的定义文件。双击WidgetDemoActivity.java，发现已经为其生成代码如下：

其中，onCreate()方法中的setContentView（R.layout.main）表明WidgetDemoActivity使用的用户界面UI文件为main.xml。

双击main.xml文件，发现提供了“Graphical Layout”和“main.xml”两种浏览方式。其中“Graphical Layout”方式为以图形方式浏览main.xml文件，其效果等同于main.xml在手机设备上运行的效果；“main.xml”方式为以代码方式浏览main.xml文件。这两种方式是等效的，都可以对main.xml文件进行编辑和查看。单击“main.xml”标签，发现已经为其生成代码如下：

该文件表明，当前main.xml文件所使用的布局为LinearLayout布局，该布局自动填满整个手机屏幕。在该布局中，放置了一个TextView组件，该TextView显示的内容为"@string/hello"，表示string.xml文件中定义的hello变量的内容。双击values目录下的string.xml文件，会发现hello变量对应的值为“Hello World, WidgetDemoActivity!”。

单击main.xml的“Graphical Layout”浏览方式，可查看当前文件的图形化效果，如图4.13所示。

图4.13 文件的图形化效果

程序开发人员可以在该图形方式下将左侧的各种组件直接拖曳到屏幕上，形成自己想要的布局，也可以直接修改main.xml文件的代码。

在后续章节中，在对布局文件进行修改时，若非特殊情况，将不再单独描述。

4.4.2 按钮

按钮（Button）应该是用户交互中使用最多的组件，在很多应用程序中都很常见。当用户单击按钮的时候，会有相对应的响应动作。下面在WidgetDemo工程的主界面main.xml中放置一个名为Button的按钮。文件代码如下：

其中：

表明在用户界面上放置了一个ID为“button1”的按钮，按钮的高度（layout_height）和宽度（layout_width）都会根据实际内容调整（wrap_content），按钮上显示文字为Button，其运行效果如图4.14所示。

图4.14 Button的应用界面

按钮最重要的用户交互事件是“单击”事件。下面为Button1添加事件监听器和相应的单击事件。该过程在WidgetDemoActivity.java文件中完成，代码如下：

在WidgetDemoActivity的onCreate()方法中，通过findViewById（R.id.button1）方法获得Button1的对象，通过setOnClickListener()方法为Button1设置监听器。此处新建了一个实现OnClickListener接口的匿名类作为监听器，并实现了onClick()方法。当Button1被点击时，当前应用程序的标题被设置成“button1被用户点击了”，对应在LogCat中也会打印相应的字符串，运行结果如图4.15所示。

图4.15 点击按钮运行效果

4.4.3 文本框

文本框（TextView）是用于在界面上显示文字的组件，其显示的文本不可被用户直接编辑。程序开发人员可以设置TextView的字体大小、颜色、样式等属性。在工程WidgetDemo的main.xml中添加一个TextView，代码如下：

运行效果如图4.16所示。

图4.16 TextView的应用界面

修改Button1的单击事件为：

当Button1被单击时，通过setText()方法更改textView的显示内容为“设置TextView的字体”，通过setTextColor()方法修改textView显示字体的颜色为红色，通过setTextSize()方法修改textView显示字体的大小为20sp，通过setTypeface()方法修改textView显示字体的风格为加粗，如图4.17所示。

图4.17 单击按钮运行效果

当然，该过程也可以通过修改main.xml文件来实现。将TextView标签按照如下代码修改也可以得到同样的效果，但是失去了应用程序中与用户交互的过程：

4.4.4 编辑框

编辑框（EditText）是TextView的子类，在TextView的基础上增加了文本编辑功能，用于处理用户输入，例如登录框等，是非常常用的组件。

在工程WidgetDemo的main.xml文件中添加一个EditText，并实现这个功能：用户在EditText中输入信息的同时，用一个TextView显示用户输入的信息。

工程WidgetDemo中的布局文件main.xml中增加的代码如下：

在WidgetDemoActivity的onCreate()方法中添加下列代码：

运行结果如图4.18所示。

图4.18 EditText的应用界面

4.4.5 多项选择按钮

多项选择按钮（CheckBox）属于输入型组件，该组件允许用户一次选择多个选项。当用户不方便在手机屏幕上直接进行输入操作时，该组件的使用显得尤为方便。

下面通过实例讲解CheckBox的使用方法。该实例的运行效果如图4.19所示。

图4.19 CheckBox的应用界面

在工程WidgetDemo的布局文件main.xml文件中添加一个Button，代码如下：

当该Button被用户单击时，启动一个名为CheckBoxActivity的Activity，在该Activity中演示CheckBox的使用方法。启动CheckBoxActivity的相关代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="CheckBoxActivity"></activity>

CheckBoxActivity所使用的布局文件为checkbox.xml，使用LinearLayout布局，其中放置了一个TextView和三个CheckBox。Checkbox.xml的文件内容如下：

这4个组件在对应的strings.xml文件中定义的变量为：

当用户对多项选择按钮进行选择时，为了确定用户选择的是哪几项，需要对每个多项选择按钮进行监听。CompoundButton.OnCheckedChangedListener接口可用于对CheckBox的状态进行监听。当CheckBox的状态在未被选中和被选中之间变化时，该接口的onCheckedChanged()方法会被系统调用。CheckBox通过setOnCheckedChangeListener()方法将该接口对象设置为自己的监听器。

CheckBoxActivity.java的代码如下：

CheckBoxActivity为Checkbox.xml文件中的三个CheckBox分别添加了监听器。当CheckBox的状态发生改变时，通过Checkbox.isChecked()方法可以获取当前CheckBox按钮的选中状态，进而进行处理。

4.4.6 单项选择按钮组

RadioGroup为单项选择按钮组，其中可以包含多个RadioButton，即单选按钮，它们共同为用户提供一种多选一的选择方式。在多个RadioButton被同一个RadioGroup包含的情况下，多个RadioButton之间自动形成互斥关系，仅有一个可以被选择。单选按钮的使用方法和CheckBox的使用方法高度相似，其事件监听接口使用的是RadioGroup.OnCheckedChangeListener()，使用setOnCheckedChangeListener()方法将监听器设置到单选按钮上。按照CheckBox的讲解思路，启动一个名为RadioGroupActivity的Activity来对RadioGroup进行讲解。

RadioGroupActivity的运行效果如图4.20所示。

图4.20 RadioGroup的应用界面

在工程WidgetDemo的布局文件main.xml中添加一个Button，并启动RadioGroupActivity的相关代码。在main.xml中添加代码如下：

启动处理RadioGroup的Activity RadioGroupActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name=" RadioGroupActivity "></activity>

RadioGroupActivity使用的是radiogroup.xml，其代码如下：

该布局文件使用了LinearLayout布局，并且在其中放置了一个TextView和一个RadioGroup。RadioGroup中含有三个RadioButton。这些组件对应的strings.xml文件中定义的变量为：

RadioGroupActivity.java的代码如下：

在RadioGroupActivity的onCreate()方法中为RadioGroup添加监视器RadioGroup。OnCheckedChangeListener在其回调方法onCheckedChanged()中对三个RadioButton分别进行处理。需要说明的是，如果把RadioGroup去掉，只使用RadioButton的话，则需要为每个RadioButton单独设置监听器，其使用方法和CheckBox没有任何区别。

4.4.7 下拉列表

Spinner提供下拉列表式的输入方式，该方法可以有效节省手机屏幕上的显示空间。

下面用一个简单的实例讲解Spinner的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个Button，用以启动SpinnerActivity。

在main.xml中添加代码如下：

单击Button并启动SpinnerActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name=" SpinnerActivity "></activity>

SpinnerActivity的运行效果如图4.21所示。

图4.21 Spinner的应用界面

SpinnerActivity使用的布局文件为spiner.xml，其代码如下：

SpinnerActivity.java文件的代码如下：

SpinnerActivity通过5个步骤将Spinner初始化并进行事件处理，分别为：

• 定义下拉列表的列表项内容List<String>。

• 为下拉列表Spinner定义一个适配器ArrayAdapter<String>，并与列表项内容相关联。

• 使用ArrayAdapter.setDropDownViewResource()设置Spinner下拉列表在打开时的下拉菜单样式。

• 使用Spinner. setAdapter()将适配器数据与Spinner关联起来。

• 为Spinner添加事件监听器，进行事件处理。

Spinner支持多种事件处理方式，本实例中对Spinner被单击事件、焦点改变事件和Spinner的列表项被选中事件进行了处理。

在本实例中，SpinnerActivity在程序代码中动态建立了下拉列表每一项的内容。除此之外，还可以在XML文件中定义Spinner的下拉列表项，步骤如下。

在res/values文件夹下新建cities.xml文件夹：

在SpinnerActivity.java中初始化Spinner：

     Spinner spinner=（Spinner）findViewById（R.id.spinner1）;
     ArrayAdapter<CharSequence>adapter=ArrayAdapter.createF
romResource（this, R.array.city,
android.R.layout.simple_spinner_item）;
     adapter.setDropDownViewResource
（android.R.layout.simple_spinner_dropdown_item）;
     spinner.setAdapter（adapter）;

运行效果如图4.22所示。

图4.22 Spinner的事件处理

4.4.8 自动完成文本

在使用百度或者Google搜索信息时，只需要在搜索框中输入几个关键字，就会有很多相关的信息以列表形式被列举出来供用户选择，这种效果在Android SDK中可以通过AutoCompleteTextView来实现。

下面用一个简单的实例讲解AutoCompleteTextView的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个Button，用以启动AutoCompleteTextViewActivity。

在main.xml中添加代码如下：

单击Button并启动AutoCompleteTextViewActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name=" AutoCompleteTextViewActivity"></activity>

AutoCompleteTextViewActivity的运行效果如图4.23所示。

图4.23 AutoCompleteTextViewActivity的运行效果

AutoCompleteTextViewActivity使用的布局文件为autocompletetextview.xml，其具体内容如下：

AutoCompleteTextViewActivity.java的代码如下：

AutoCompleteTextViewActivity中为可自动补全的内容建立对应字符串数组autotext，将该数组关联到ArrayAdapter中，然后将ArrayAdapter与AutoCompleteTextView相关联，进而实现自动完成文本功能。

AutoCompleteTextView提供一系列属性对显示效果进行设置，分别说明如下。

• completionThreshold：它的值决定了你在AutoCompleteTextView中至少输入几个字符，才会具有自动提示的功能。另外，默认最多提示20条。

• dropDownAnchor：它的值是一个View的ID，指定后，AutoCompleteTextView会在这个View下弹出自动提示。

• dropDownSelector：应该是设置自动提示的背景色之类的，没有尝试过，有待进一步考证。

• dropDownWidth：设置自动提示列表的宽度。

4.4.9 日期选择器和时间选择器

Android SDK提供了DatePicker和TimePicker组件，分别对日期和时间进行选择，方便日期和时间设定。

下面用一个简单的实例讲解DatePicker和TimePicker组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为“Date/Time”的Button，用以启动TimeActivity。

在main.xml中添加代码如下：

单击Button并启动TimeActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name=" TimeActivity"></activity>

TimeActivity的运行效果如图4.24所示。

图4.24 TimeActivity的运行效果

TimeActivity使用的布局文件为time.xml，其内容如下：

TimeActivity.java的代码如下：

TimeActivity中使用java.util.Calendar对象获取当前系统时间。当更改DatePicker组件中的日期时，会触发DatePicker的OnDateChange()事件；当修改TimePacker的时间时，会触发TimePacker的OnDateChange()事件。

由本实例可见，DatePicker实现OnDateChangedListener监听器的方法与TimePicker实现setOnTimeChangedListener监听器的方法有所类似。DatePicker用init()方法设定年、月、日的同时设定监听器，而TimePicker使用setOnTimeChangedListener()直接设定。

4.4.10 进度条

当应用程序在后台运行时，可以使用进度条（ProgressBar）反馈给用户当前的进度信息。进度条被用以显示当前应用程序的运行状况、功能完成多少等情况。Android SDK提供两种样式的进度条，一种是圆形的进度条，另一种是水平进度条。其中圆形进度条分大、中、小三种。

进度条本质上是一个整数，显示当前的整数值在特定范围内的比重。下面用一个简单的实例讲解ProgressBar组件的使用方法。

在工程WidgetDemo的布局文件main.xml中添加一个名为ProgressBarDemo的Button，用以启动ProcessBarActivity。

在main.xml中添加代码如下：

单击Button并启动ProcessBarActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="ProcessBarActivity"></activity>

ProcessBarActivity的运行效果如图4.25所示。

图4.25 ProcessBarActivity的运行效果

ProcessBarActivity使用的布局文件为processbar.xml，其内容如下：

该布局中放置了小、中、大三种类型的圆形进度条各一个，以及一个水平放置的条形进度条。一般情况下，开发人员不会为圆形进度条指定进度，圆形进度条只是展示运行效果，而不反映实际的进度。条形进度条则不同，开发人员会为条形进度条指定最大值，以及进度条当前值的获取方法。在本实例中，条形进度条的最大值为100。

ProcessBarActivity.java的代码如下：

ProcessBarActivity对水平进度条进行了处理。先获取了水平进度条的最大值，然后启动了一个线程，由该线程来控制进度条的值，从0开始，每隔15毫秒增加1。

4.4.11 滚动视图

当Activity提供的用户界面上有很多内容，以至于当前手机屏幕不能完全显示全部内容时，就需要滚动视图来帮助浏览全部的内容。

以工程WidgetDemo为例，由于在讲述过程中不断地在main.xml文件中添加按钮和其他组件，目前已经不能显示全部内容，效果如图4.26所示。

图4.26 添加大量组件后的效果

这时候就需要使用ScrollView，即将当前的Activity的视图转化为滚动视图，以便于浏览。ScrollView的使用非常方便，只需在main.xml的<LinearLayout>标签外面加上ScrollView组件的声明即可。布局文件main.xml的内容如下：

添加ScrollView后，main.xml布局的运行效果如图4.27所示。

图4.27 ScrollView的运行效果

4.4.12 拖动条

SeekBar是水平进度条ProgressBar的间接子类，相当于一个可以拖动的水平进度条。下面仍以一个简单的实例讲解SeekBar组件的使用方法。

在工程WidgetDemo的布局文件main.xml中添加一个名为“SeekBarDemo”的Button，用以启动SeekBarActivity。

在main.xml中添加代码如下：

单击Button并启动SeekBarActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="SeekBarActivity"></activity>

SeekBarActivity的运行效果如图4.28所示。

图4.28 SeekBarActivity的运行效果

SeekBarActivity使用的布局文件为seekbar.xml，其内容如下：

该文件确定SeekBar对象的最大值为100，宽度为手机屏幕的宽度。

SeekBarActivity.java的代码如下：

SeekBar的事件处理接口为OnSeekBarChangeListener，该监听器提供对三种事件的监听，分别为当SeekBar的拖动条开始被拖动时、拖动条拖动停止时和拖动条的位置发生改变时。SeekBarActivity在拖动条开始被拖动和拖动停止时，会通过Logcat打印相关信息。当拖动条位置发生改变时，将当前的数值显示到TextView中。

4.4.13 评价条

在网上购物的时候，经常会对所购买的商品进行打分。一般对商品的评价和打分是以5个星星的方式进行的。Android SDK提供了RatingBar组件来实现该功能。

RatingBar是SeekBar和ProgressBar的扩展，是ProgressBar的间接子类，可以使用ProgressBar相关的属性。RatingBar有三种风格，分别为默认风格（ratingBarStyle）、小风格（ratingBarStyleSmall）和大风格（ratingBarStyleIndicator）。其中，默认风格的RatingBar是我们通常使用的，可以进行交互，而其他两种不能进行交互。

以一个简单的实例讲解RatingBar组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为“RatingBarDemo”的Button，用以启动RatingBarActivity。

在main.xml中添加代码如下：

单击Button并启动RatingBarActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="RatingBarActivity"></activity>

RatingBarActivity的运行效果如图4.29所示。

图4.29 RatingBarActivity的运行效果

RatingBarActivity使用的布局文件ratingbar.xml的内容如下：

该布局文件使用LinearLayout布局，其中放置了一个TextView和一个RatingBar，并对RatingBar的相关属性进行了设置。android:numStars="5"用于设置RatingBar显示的星星数量为5个；android:stepSize="0.5"用于设置RatingBar的最小变化单位为半个星星；android:rating ="3"表示RatingBar在初始状态下被选中的星星数量为3个。

RatingBarActivity.java的代码如下：

RatingBarActivity为RatingBar对象设置了OnRatingBarChangeListener监听器，当用户单击RatingBar引起被选中星星数量的变化时，该接口会监测到该事件，并且调用onRatingChanged()方法，更新TextView显示的内容。

onRatingChanged()的三个参数所对应的含义如下。

• ratingBar：多个RatingBar可以同时指定同一个RatingBar监听器。该参数就是当前触发RatingBar监听器的那个RatingBar对象。

• rating：当前评级分数。取值范围从0到RatingBar的总星星数。

• fromUser：如果触发监听器的是用户触屏单击或轨迹球左右移动，则为true。

4.4.14 图片视图和图片按钮

ImageView是用于显示图片的组件，在很多场合都有比较普遍的使用。ImageView可以显示任意图像，加载各种来源的图片（如资源或图片库）。ImageView可以负责计算图片的尺寸，以便在任意的布局中使用，并且可以提供缩放或者着色等选项供开发者使用。

ImageButton是ImageView的子类，相当于一个表明是图片而不是文字的Button。其使用方法和Button完全相同。

下面通过一个实例来了解一下这两个组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为ImageButtonDemo的Button，用以启动ImageButtonActivity。

在main.xml中添加代码如下：

单击Button并启动RatingBarActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="ImageButtonActivity"></activity>

ImageButtonActivity的运行效果如图4.30所示。

图4.30 ImageButtonActivity的运行效果

ImageButtonActivity的布局文件imgbtn.xml内容如下：

该文件使用LinearLayout布局，其中放入了一个ImageView组件和一个ImageButton组件。两个组件都通过android:src属性指定了显示的图片。该实例用到了两个图片资源，一个为girl，另一个为ic_launcher，如图4.31所示。由于Android会根据手机设备的配置高低选择不同的资源，因此为了应用程序的通用性，在三个drawable文件夹下都放置了girl.gif图像。ic_launcher.png是系统自带的资源文件。

图4.31 工程中的图片资源

ImageButtonActivity.java的代码如下：

ImageButtonActivity为ImageButton添加了单击监听器，对用户单击imgbtn的事件进行了处理。用户每次单击图片按钮，都把ImageView组件的宽和高增大3。随着用户的不断单击，ImageView中显示的图片越来越大，显示了ImageView组件对图片的缩放功能。

4.4.15 图片切换器和图库

在使用Android手机设置壁纸的时候，会看到屏幕底部有很多可以滚动的图片，当单击某一图片时，在其上面的空间会显示当前选中的图片，此时我们用到的就是Gallery（图库）和ImageSwitcher（图片切换器）。

Gallery组件用于横向显示图像列表，并且自动将当前图像放置到中间位置。ImageSwitcher则像是图片浏览器，可以切换图片，通过它可以制作简单的幻灯片等。通常将这两个类结合在一起使用，可以制作有一定效果的相册。

下面通过一个实例来了解一下这两个组件的使用方法。

在工程WidgetDemo的布局文件main.xml中添加一个名为GalleryDemo的Button，用以启动GalleryActivity。在main.xml中添加代码如下：

单击Button并启动GalleryActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity
android:name="GalleryActivity"></activity>

GalleryActivity的运行效果如图4.32所示。

图4.32 GalleryActivity的运行效果

GalleryActivity使用的布局文件为gallery.xml，内容如下：

该布局文件使用的是相对布局，通过android:layout_alignParentTop="true"属性将ImageSwitcher放置于视图的顶端，其顶部与其父组件的顶部对齐，同时使用android: layout_alignParentLeft="true"属性使ImageSwitcher的左边缘与其父组件的左边缘对齐。在设置Gallery组件时，将其与屏幕的左下角对其，android:layout_alignParentBottom="true"是将该组件的底部与其父组件的底部对齐，并且使用android:spacing="16dp"属性设置图片之间的间距。

GalleryActivity.java的代码如下：

Gallery要显示的图片来自资源文件。把需要显示的图片放在/res/drawable目录下后，将这些图片的ID保存在一个int数组中以备使用。相关代码如下：

Gallery通过setAdapter（imageAdapter）方法将组件和要显示的图片关联起来。本实例中为Gallery设定的适配器为ImageAdapter，主要用于描述图像信息，其为android.widget.BaseAdapter的子类。

在ImageAdapter类中有两个方法值得我们注意，其中一个是getCount()方法，它用于返回图片的总数，通常使用获取存放图片数组长度的方法获取图片总数，也可以规定具体的返回数，但不能超过实际图片数量；getView()方法是当Gallery中需要显示某一个图像时，将当前图片的索引，也就是position的值传入，从resids数组中获得相应的图片的ID。

GalleryActivity为添加Gallery监听器，处理了用户单击Gallery中图片的事件，并设置了ImageSwitcher相关属性。其代码如下：

设置了ImageSwitcher组件图片切换时的渐入和渐出效果。

4.4.16 网格视图

GridView提供了一个二维的可滚动的网格，按照行列的方式来显示内容，一般适合显示图标、图片等，适合浏览。

下面通过一个实例来了解一下GridView组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为GridViewDemo的Button，用以启动GridViewActivity。

在main.xml中添加代码如下：

单击Button并启动GridViewActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="GridViewActivity">
</activity>

GridViewActivity的运行效果如图4.33所示。

图4.33 GridViewActivity的运行效果

GridViewActivity使用的布局文件为gridview.xml，其内容如下：

该视图采用LinearLayout的布局方式，其中放置了一个GridView组件，该组件由三列组成。

GridViewActivity.java的代码如下：

在主程序GridViewActivity中，为GridView设置了一个数据适配器，并处理了GridView的单击事件。适配器继承自BaseAdapter类，与4.4.15节中用到的适配器高度相似，在此不再重复。

4.4.17 标签

在有限的手机屏幕空间内，当要浏览的内容较多，无法在一个屏幕空间内全部显示时，可以使用滚动视图来延长屏幕的空间。当浏览的内容具有很强的类别性质时，更合适的方法是将不同类别的内容集中到各自的面板中，这时就需要使用面板标签（Tab）组件了。

Tab组件利用面板标签把不同的面板内容切换到屏幕上，以显示不同类别的内容。

下面通过一个实例来了解一下Tab组件的使用方法。在工程WidgetDemo的布局文件main.xml中添加一个名为TabDemo的Button，用以启动TabActivity。

在main.xml中添加代码如下：

单击Button并启动GridViewActivity的代码如下：

同时在AndroidManifest.xml文件中声明该Activity：

     <activity android:name="TabActivity"></activity>

TabActivity的运行效果如图4.34所示。

图4.34 TabActivity的运行效果

要使用Tab必然涉及它的容器TabHost，TabHost包括TabWigget和FrameLayout两部分。TabWidget就是每个Tab的标签，FrameLayout是Tab的内容。

TabActivity使用的布局文件是tab.xml。在tab.xml中定义了每个Tab中要显示的内容，代码如下：

在FrameLayout中我们放置了三个TextView组件，分别对应三个Tab所显示的内容，当切换不同的Tab时会自动显示不同的TextView内容。

在主程序TabActivity的OnCreate()方法中，首先获得TabHost的对象，并调用setup()方法进行初始化，然后通过TabHost.TabSpec增加Tab页，通过setContent()增加当前Tab页显示的内容，通过setIndicator增加页的标签，最后设定当前要显示的Tab页。

TabActivity的代码如下：

除了使用上述方法设置Tab页面的显示内容外，还可以使用setContent（Intent）方法启动某个Activity，并将该Activity的视图作为Tab页面的内容。

例如：