![Android从入门到精通(微视频精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/217/44510217/b_44510217.jpg)
5.1 文本类组件(初级)
Android中提供了一些与文本显示、输入相关的组件,通过这些组件可以显示或输入文字。其中,用于显示文本的组件为文本框组件,用TextView类表示;用于编辑文本的组件为编辑框组件,用EditText类表示。这两个组件最大的区别是TextView类不允许用户编辑文本内容,而EditText类则允许用户编辑文本内容,它们的继承关系如图5.1所示。
从图5.1中可以看出,TextView组件继承自View,而EditText组件又继承自TextView组件。下面将对这两个组件分别进行介绍。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P82_8759.jpg?sign=1739240834-4mCR5IpiP5IUiusvxVgrhUyKsHZGKACl-0-42084624d9ec02aef29f0b4304ca876b)
图5.1 文本类组件继承关系图
5.1.1 文本框
在Android中,可以使用两种方法向屏幕中添加文本框:一种是通过在XML布局文件中使用<TextView>标记添加;另一种是在Java文件中,通过new关键字创建。推荐采用第一种方法,也就是通过<TextView>标记在XML布局文件中添加文本框,其基本的语法格式如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P82_45703.jpg?sign=1739240834-CIYQwU9bPjEv4ghHy998fRdhe5enJFSw-0-991cc163f550348075d622860674c21a)
说明
在Android中,无论是创建哪一种UI组件都有两种方法:一种是在XML布局文件中定义;另一种是使用Java代码来创建。Android官网中推荐使用的是在XML布局文件中定义。所以在本书中只介绍如何在XML布局文件中创建这一种方法。
TextView支持的常用XML属性如表5.1所示。
表5.1 TextView支持的XML属性
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-T82_45705.jpg?sign=1739240834-S1lxlh5kA9ztrxG3RRaYcVd5ZGSKvJpJ-0-f5a8b21f1e51cf0c2a427af1469ec9ca)
说明
在表5.1中,只给出了TextView组件常用的部分属性,关于该组件的其他属性,可以参阅Android官方提供的API文档。在下载SDK时,如果已经下载Android API文档,那么可以在已经下载好的SDK文件夹下找到(docs文件夹中的内容即为API文档),否则需要自行下载。下载完成后,打开Android API文档主页(index.html),在Develop/Reference左侧的Android APIs列表中,单击android.widget节点,在下方找到TextView类并单击,在右侧就可以看到该类的相关介绍,其中XML Attributes表格中列出的就是该类的全部属性。
例如,在屏幕中添加一个文本框,显示文字为“奋斗就是每一天都很难,可一年比一年容易。不奋斗就是每一天都很容易,可一年比一年难。”,代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P83_45708.jpg?sign=1739240834-cfxBp5c5jsO2Krw6hJ3vSFEc18vcTnWv-0-51994094b7b414e621379bf29bd6653b)
在模拟器中运行上面这段代码,将显示如图5.2所示的运行结果。
对于文本框组件,默认为多行文本框,也可以设置为单行文本框,只需要将android:singleLine属性设置为true就可以显示为单行文本框,例如,上面的多行文本框设置“android:singleLine="true"”属性后,将显示如图5.3所示的单行文本框。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P84_8886.jpg?sign=1739240834-UcixxwXzj2VfnvWZr3WGYMTW53By3RXQ-0-1b648350be40057fe1a44fb9e72847dc)
图5.2 添加一个文本框
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P84_8891.jpg?sign=1739240834-YzTxXNvF67ZGBqUNi641QZKcJhZJkhZR-0-86c5dd1a7957719a5c63e7c51b4ca8bf)
图5.3 添加单行文本框
下面通过一个实例来演示文本框的具体应用。
【例5.01】 模拟福卡排行榜列表(实例位置:资源包\源码\05\5.01)
在Android Studio中创建Module,名称为Ranking,实现本实例的具体步骤如下。
(1)修改新建Module的res\layout目录下的布局文件activity_main.xml,将默认添加的布局管理器修改为垂直线性布局管理器,添加两个TextView控件用于显示排行榜中第一名与第二名的人物名称,关键代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P84_45710.jpg?sign=1739240834-5feshdaCkg1pfFpzA0oAfxMQriowDCXp-0-9ddac02c1ec95dd1902e87d80c2be2d6)
说明
根据第二名显示人物名称的控件与第一名控件的上下距离,添加其他4个控件即可。
(2)打开MainActivity类,该类继承Activity类,然后创建显示人物控件的id数组与显示人物名称的文字数组,代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P85_45711.jpg?sign=1739240834-RVF7VUDKJccjpGud1VAI1aPIQB7pDGB5-0-15ef24c3903c9f67dd1542a6602a349e)
(3)创建initView()方法,用于实现控件的初始化工作并设置排行榜人物名称,代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P85_45712.jpg?sign=1739240834-99A8tTYWyacoG2v5I16XqdIN3Y9Odo6T-0-0e3c64b7491a21c2c52618e56c84dadd)
(4)运行本实例,将显示如图5.4所示的运行结果。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P85_9152.jpg?sign=1739240834-AWWEKAacUndjRkPTVTOJq2kwrzk2mVBd-0-e6a0261f9a7b3452a4cd7695361ee914)
图5.4 福卡排行榜列表
5.1.2 编辑框
在Android手机应用中,编辑框组件的应用非常普遍。例如,聚划算App的账号登录页面中的编辑框,以及微信的发送朋友圈信息页面等,都应用了编辑框组件。
通过<EditText>标记在XML布局文件中添加编辑框的基本语法格式如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P86_45713.jpg?sign=1739240834-UJwr0RPbRBbfhokE59cCFQPtbk7ctOXg-0-5ab7dbf5c5d97c62c1ee96e116047f32)
由于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的编辑框的内容,可以通过以下代码实现。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P86_45714.jpg?sign=1739240834-taxfJfpukb0oIhkZ6MsiRxwhrwy8zwvQ-0-d85e62b89383900d089c12f009c2e87a)
下面给出一个关于编辑框的实例。
【例5.02】 手机QQ空间写说说界面(实例位置:资源包\源码\05\5.02)
在Android Studio中创建Module,名称为QQ Zone。实现本实例的具体步骤如下。
(1)修改新建Module的res\ayout目录下的布局文件activity_main.xml。将默认添加的布局管理器修改为垂直线性布局管理器,并删除默认添加的文本框组件,然后再将所需要的图片复制到mipmap-mdpi文件夹中,修改后的代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P86_45715.jpg?sign=1739240834-2llQq058Y6hDREFOn2BRkxOLyUGlhAQ8-0-98faa1e5794d23e96f7d36bbaef302ab)
(2)在线性布局管理器中,添加一个编辑框组件用于输入说说内容。设置其android:inputType属性值为textMultiLine,表示该编辑框为多行编辑框,显示提示文本为“说点什么吧...”,并设置其为顶对齐、白色背景、内边框为5dp、底外边距为10dp,具体代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P87_45716.jpg?sign=1739240834-lDNv9zrTpeCYYiMs3434Z160oftEOKVk-0-63a15df0371500be49518245875b1652)
(3)添加一个用于设置添加照片栏目的文本框组件。设置该文本框的显示文本为“添加照片”,在起始位置绘制一个图标,图标与文字的间距为8dp,垂直居中对齐,白色背景,文字颜色为灰色,具体代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P87_45717.jpg?sign=1739240834-HTUqFo4I0q7GzIMSQQDVPTRVdWwNDbMc-0-db5c19200033328d4e2864d3d1817be5)
(4)添加一个用于设置底部分享的文本框组件,该文本框只绘制一个图像即可,代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P87_45718.jpg?sign=1739240834-ENKvYvhoPqLCRAaOkoZOCfIp7IGZxpEj-0-9eb45547636ee06660e1478d15d4dd9d)
说明
实际上,在屏幕中添加图片还可以使用图像组件(ImageView)来实现,在后面的章节中将进行介绍。
(5)运行本实例,将显示如图5.5所示的运行结果。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P88_9465.jpg?sign=1739240834-T6Rtuj2JgEqwObfmToIYNGotRsnblezc-0-e9f44a749856372978b66b66a5cb2d44)
图5.5 布局手机QQ空间写说说页面