
5.2 界面构建
在Android应用中,一个界面可以使用XML布局文件构建,也可以通过代码构建,也可以两种方式混合使用。XML布局文件构建便于采用WYSIWYG(“所见即所得”)可视化界面设计工具进行设计,它能够加快界面设计过程;而代码构建方式不是WYSIWYG,调试起来非常繁琐,但代码构建具有动态特性,便于屏幕适配。本书重点介绍使用XML布局文件构建界面。
5.2.1 使用Android Studio界面设计工具
Android Studio提供了非常优秀的WYSIWYG可视化界面设计工具。在Android Studio中,打开工程中的布局文件activity_main.xml,界面如图5-2所示,该界面主要分成6个区域:①号区域是文件导航面板;②号区域控件面板;③号区域界面设计工具栏,提供了界面设计常用的功能按钮;④和⑤号区域都是界面设计窗口,其中⑤号区域是蓝图效果设计窗口,⑥号区域控件的属性窗口。

图5-2 Android Studio界面设计工具
5.2.2 实例:标签和按钮
下面通过一个LabelButton实例介绍Android Studio界面设计工具的使用。
LabelButton实例界面如图5-3所示,其中包含一个Label标签(TextView)和一个OK按钮(Button)。单击OK按钮的Label标签内容并修改为HelloWorld。本节将实现该实例的界面部分。

图5-3 LabelButton实例界面
实现LabelButton实例界面的具体步骤如下:
(1)删除原来的Hello World!标签控件。由于采用默认模板,选择控件(控件周围6个方块,如图5-2所示),通过单击键盘的删除键,则可以删除控件了。
(2)添加Label标签控件。
在Android Studio界面控件面板中单击TextView,然后拖曳到设计窗口,并摆放于屏幕中间偏上的位置,如图5-3所示。摆放好标签控件后,需要修改标签控件的text属性,如图5-4所示,选中控件,然后在属性窗口中找到text属性,并修改为Label。由于TextView默认文字字体比较小,可以通过textSize属性设置字体大小。

图5-4 添加Label标签控件
(3)添加OK按钮控件。
在Android Studio界面控件面板中单击Button,然后拖曳到设计窗口,并摆放在屏幕中间偏上的位置,具体位置参考图5-6所示。摆放好控件后,需要修改按钮控件的text属性,如图5-7所示,选中按钮控件,然后在属性窗口中找到text属性,并修改为OK。

图5-6 添加OK按钮控件

图5-7 修改OK按钮属性

图5-5 修改Label标签属性
至此,LabelButton实例界面设计完成。