
5.1 文本类组件(初级)
Android中提供了一些与文本显示、输入相关的组件,通过这些组件可以显示或输入文字。其中,用于显示文本的组件为文本框组件,用TextView类表示;用于编辑文本的组件为编辑框组件,用EditText类表示。这两个组件最大的区别是TextView类不允许用户编辑文本内容,而EditText类则允许用户编辑文本内容,它们的继承关系如图5.1所示。
从图5.1中可以看出,TextView组件继承自View,而EditText组件又继承自TextView组件。下面将对这两个组件分别进行介绍。

图5.1 文本类组件继承关系图
5.1.1 文本框
在Android中,可以使用两种方法向屏幕中添加文本框:一种是通过在XML布局文件中使用<TextView>标记添加;另一种是在Java文件中,通过new关键字创建。推荐采用第一种方法,也就是通过<TextView>标记在XML布局文件中添加文本框,其基本的语法格式如下。

说明
在Android中,无论是创建哪一种UI组件都有两种方法:一种是在XML布局文件中定义;另一种是使用Java代码来创建。Android官网中推荐使用的是在XML布局文件中定义。所以在本书中只介绍如何在XML布局文件中创建这一种方法。
TextView支持的常用XML属性如表5.1所示。
表5.1 TextView支持的XML属性

说明
在表5.1中,只给出了TextView组件常用的部分属性,关于该组件的其他属性,可以参阅Android官方提供的API文档。在下载SDK时,如果已经下载Android API文档,那么可以在已经下载好的SDK文件夹下找到(docs文件夹中的内容即为API文档),否则需要自行下载。下载完成后,打开Android API文档主页(index.html),在Develop/Reference左侧的Android APIs列表中,单击android.widget节点,在下方找到TextView类并单击,在右侧就可以看到该类的相关介绍,其中XML Attributes表格中列出的就是该类的全部属性。
例如,在屏幕中添加一个文本框,显示文字为“奋斗就是每一天都很难,可一年比一年容易。不奋斗就是每一天都很容易,可一年比一年难。”,代码如下。

在模拟器中运行上面这段代码,将显示如图5.2所示的运行结果。
对于文本框组件,默认为多行文本框,也可以设置为单行文本框,只需要将android:singleLine属性设置为true就可以显示为单行文本框,例如,上面的多行文本框设置“android:singleLine="true"”属性后,将显示如图5.3所示的单行文本框。

图5.2 添加一个文本框

图5.3 添加单行文本框
下面通过一个实例来演示文本框的具体应用。
【例5.01】 模拟福卡排行榜列表(实例位置:资源包\源码\05\5.01)
在Android Studio中创建Module,名称为Ranking,实现本实例的具体步骤如下。
(1)修改新建Module的res\layout目录下的布局文件activity_main.xml,将默认添加的布局管理器修改为垂直线性布局管理器,添加两个TextView控件用于显示排行榜中第一名与第二名的人物名称,关键代码如下。

说明
根据第二名显示人物名称的控件与第一名控件的上下距离,添加其他4个控件即可。
(2)打开MainActivity类,该类继承Activity类,然后创建显示人物控件的id数组与显示人物名称的文字数组,代码如下。

(3)创建initView()方法,用于实现控件的初始化工作并设置排行榜人物名称,代码如下。

(4)运行本实例,将显示如图5.4所示的运行结果。

图5.4 福卡排行榜列表
5.1.2 编辑框
在Android手机应用中,编辑框组件的应用非常普遍。例如,聚划算App的账号登录页面中的编辑框,以及微信的发送朋友圈信息页面等,都应用了编辑框组件。
通过<EditText>标记在XML布局文件中添加编辑框的基本语法格式如下。

由于EditText类是TextView的子类,所以表5.1中列出的TextView支持的XML属性,同样适用于EditText组件。需要特别注意的是,在EditText组件中,android:inputType属性可以控制输入框的显示类型。例如,要添加一个密码框,可以将android:inputType属性设置为textPassword。
技巧
在Android Studio中,打开布局文件,通过Design视图,可以在可视化界面中通过拖曳的方式添加编辑框组件,编辑框组件位于Palette面板的Text Fields栏目中,并且在该栏目中还列出了不同类型的输入框(如Password密码框、Password(Numeric)数字密码框和Phone输入电话号码的编辑框等),只需要将其拖曳到布局文件中即可。
在屏幕中添加编辑框后,还需要获取编辑框中输入的内容,这可以通过编辑框组件提供的getText()方法实现。使用该方法时,先要获取编辑框组件,然后再调用getText()方法。例如,要获取布局文件中添加的id属性为login的编辑框的内容,可以通过以下代码实现。

下面给出一个关于编辑框的实例。
【例5.02】 手机QQ空间写说说界面(实例位置:资源包\源码\05\5.02)
在Android Studio中创建Module,名称为QQ Zone。实现本实例的具体步骤如下。
(1)修改新建Module的res\ayout目录下的布局文件activity_main.xml。将默认添加的布局管理器修改为垂直线性布局管理器,并删除默认添加的文本框组件,然后再将所需要的图片复制到mipmap-mdpi文件夹中,修改后的代码如下。

(2)在线性布局管理器中,添加一个编辑框组件用于输入说说内容。设置其android:inputType属性值为textMultiLine,表示该编辑框为多行编辑框,显示提示文本为“说点什么吧...”,并设置其为顶对齐、白色背景、内边框为5dp、底外边距为10dp,具体代码如下。

(3)添加一个用于设置添加照片栏目的文本框组件。设置该文本框的显示文本为“添加照片”,在起始位置绘制一个图标,图标与文字的间距为8dp,垂直居中对齐,白色背景,文字颜色为灰色,具体代码如下。

(4)添加一个用于设置底部分享的文本框组件,该文本框只绘制一个图像即可,代码如下。

说明
实际上,在屏幕中添加图片还可以使用图像组件(ImageView)来实现,在后面的章节中将进行介绍。
(5)运行本实例,将显示如图5.5所示的运行结果。

图5.5 布局手机QQ空间写说说页面