
3.2 Android基本界面组件
实际上,无论是看起来多么美观的操作界面,都是由一个又一个的界面组件堆砌而成的,这些组件就放在一个容器(ViewGroup)里面。而单独掌握这些基本界面组件也是学习Android编程的一个必不可少的环节。接下来将重点介绍Android的基本界面组件。
3.2.1 文本框和编辑框
文本框(android.widget.TextView)是android.view.View的直接子类,同时也是Button、CheckedTextView、Chronometer、DigitalClock、EditText的直接父类,它的间接子类是AutoCompleteTextView、CheckBox、CompoundButton、ExtractEditText、MultiAuto-CompleteTextView、RadioButton、ToggleButton。
TextView的作用就是在界面上显示文本,但是它没有文本编辑功能,如果开发者需要一个可以编辑内容的文本框,那么可以使用TextView的子类EditText(编辑框),EditText允许用户在文本框中编辑内容。
TextView提供大量的XML属性,这些属性大部分不仅适用于TextView,还适用于EditText。表3.5显示了TextView支持的属性及其描述。
表3.5 TextView支持的属性及其描述

续表

续表

续表

实例:使用TextView设置不同大小、颜色、作用的文本。

将上面这个XML文件作为Activity的界面文件,并将应用部署在Android模拟器上,运行效果如图3.12所示。

图3.12 TextView实例
实例:使用EditText定义一个友好的输入界面。


运行效果如图3.13所示。

图3.13 EditText实例
3.2.2 按钮与图片按钮
上面提到过,Button(按钮)为TextView的直接子类,而ImageButton继承了Button。两者都是为了在UI界面上生成一个按钮,供用户单击或双击。当用户单击或双击按钮时,按钮就会触发一个单击或双击事件,完成某些动作。
Button按钮与ImageButton按钮之间的区别在于:Button按钮上显示文字,而ImageButton上显示图片。
注意:为ImageButton按钮指定android:text属性是没有用的,即使指定了该属性,图片按钮上也不会显示任何文字。
实例:按钮与图片按钮的一般用法。

运行效果如图3.14所示。

图3.14 Button与ImageButton的一般用法
3.2.3 单选按钮与复选框
单选按钮(RadioButton)和复选框(CheckBox)都继承自Button,因此它们可以直接使用Button支持的各种属性。
RadioButton与CheckBox都可以指定android: checked属性,该属性用来设置RadioButton与CheckBox的选中状态。
RadioButton和CheckBox的区别如下:
单个RadioButton在选中后,通过单击无法变为未选中;单个CheckBox在选中后,通过单击可以变为未选中。
一组RadioButton,只能同时选中一个;一组CheckBox,能同时选中多个。
RadioButton在大部分UI框架中默认都以圆形表示;CheckBox在大部分UI框架中默认都以矩形表示。
实例:使用RadioButton和CheckBox显示个人信息。




图3.15 使用 RadioButton和CheckBox显示个人信息
运行效果如图3.15所示。
3.2.4 开关按钮
android.widget.ToggleButton译为开关按钮,ToggleButton通过一个带有亮度指示同时默认文本为ON或OFF的按钮显示选中或未选中状态,ToggleButton也只有这两种状态,在这两种状态间切换的同时可以修改开关按钮上的默认文本。
ToggleButton支持如表3.6所示的XML属性。
表3.6 ToggleButton支持的XML属性

实例:用开关按钮来控制白天与黑夜之间的切换。

上面的XML代码文件定义了一个界面,界面的背景为一张资源id为day的图片,该图片景色为“白天”,接着在界面上放置了一个状态开关按钮,下面的程序代码用来切换开关状态同时更改界面背景图片。

将程序部署在Android模拟器上,运行效果如图3.16所示。
当用户单击开关按钮,运行效果如图3.17所示。

图3.16 开关打开,白天背景

图3.17 开关关闭,黑夜背景
3.2.5 时钟
在Android中有两个组件可以用来显示时间:一个是AnalogClock,该组件模拟了现实中的时钟界面;另一个是DigitalClock,该组件只是简单地显示当前时间,本身可看作是一个现实内容为当前时间的TextView。这两个组件的使用都比较简单,只需要在布局文件中写入这两个组件并设置其位置即可。
实例:在界面中使用AnalogClock和DigitalClock来显示当前时间。

运行效果如图3.18所示。

图3.18 显示当前时间
3.2.6 图像视图
android.widget.ImageView译为图像视图,直接继承自android.view.View,显示任意图像,例如图标。ImageView类可以加载各种来源的图片(如资源或图片库),需要计算图像的尺寸,比便它可以在其他布局中使用,并提供例如缩放和着色(渲染)各种显示选项。
ImageView支持表3.7所示的XML属性。
表3.7 ImageView支持的XML属性

实例:使用ImageView制作一个图片查看器。

上面的XML界面文件在界面底部左右排放了两个按钮:一个用于查看上一张图片,一个用于查看下一张图片,接着在这两个按钮的上方定义了一个ImageView用于盛放图片,ImageView的宽高填充了除了两个按钮所占的其他界面的宽高。下面的程序代码实现单击界面中的两个按钮以便按顺序查看上一张或者下一张图片的功能。


将应用部署到模拟器上,运行程序,若当前图片为第一张图片时,“上一张”按钮不可用,若当前图片为最后一张图片时,“下一张”按钮不可用。运行效果如图3.19所示。

图3.19 ImageView照片查看器