![Android开发:从0到1 (清华开发者书库)](https://wfqqreader-1252317822.image.myqcloud.com/cover/572/26943572/b_26943572.jpg)
5.2 界面构建
在Android应用中,一个界面可以使用XML布局文件构建,也可以通过代码构建,也可以两种方式混合使用。XML布局文件构建便于采用WYSIWYG(“所见即所得”)可视化界面设计工具进行设计,它能够加快界面设计过程;而代码构建方式不是WYSIWYG,调试起来非常繁琐,但代码构建具有动态特性,便于屏幕适配。本书重点介绍使用XML布局文件构建界面。
5.2.1 使用Android Studio界面设计工具
Android Studio提供了非常优秀的WYSIWYG可视化界面设计工具。在Android Studio中,打开工程中的布局文件activity_main.xml,界面如图5-2所示,该界面主要分成6个区域:①号区域是文件导航面板;②号区域控件面板;③号区域界面设计工具栏,提供了界面设计常用的功能按钮;④和⑤号区域都是界面设计窗口,其中⑤号区域是蓝图效果设计窗口,⑥号区域控件的属性窗口。
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0075-0080.jpg?sign=1738867328-o9BaO3jwdST7jDUheenlMDiQp5y3oPh0-0-390bb9c7065f1b6088c39ed41b399d21)
图5-2 Android Studio界面设计工具
5.2.2 实例:标签和按钮
下面通过一个LabelButton实例介绍Android Studio界面设计工具的使用。
LabelButton实例界面如图5-3所示,其中包含一个Label标签(TextView)和一个OK按钮(Button)。单击OK按钮的Label标签内容并修改为HelloWorld。本节将实现该实例的界面部分。
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0076-0081.jpg?sign=1738867328-JokRru5gPwkJb0JCWgRQv8udmbtj7LwL-0-5cfe6b10ee55a343536db0f5e63a5cbe)
图5-3 LabelButton实例界面
实现LabelButton实例界面的具体步骤如下:
(1)删除原来的Hello World!标签控件。由于采用默认模板,选择控件(控件周围6个方块,如图5-2所示),通过单击键盘的删除键,则可以删除控件了。
(2)添加Label标签控件。
在Android Studio界面控件面板中单击TextView,然后拖曳到设计窗口,并摆放于屏幕中间偏上的位置,如图5-3所示。摆放好标签控件后,需要修改标签控件的text属性,如图5-4所示,选中控件,然后在属性窗口中找到text属性,并修改为Label。由于TextView默认文字字体比较小,可以通过textSize属性设置字体大小。
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0077-0082.jpg?sign=1738867328-WqHDfCV3lcJ63GBZ4qRjNOEnpthi9b3I-0-77015931358daba579ea7d0664e8e0f1)
图5-4 添加Label标签控件
(3)添加OK按钮控件。
在Android Studio界面控件面板中单击Button,然后拖曳到设计窗口,并摆放在屏幕中间偏上的位置,具体位置参考图5-6所示。摆放好控件后,需要修改按钮控件的text属性,如图5-7所示,选中按钮控件,然后在属性窗口中找到text属性,并修改为OK。
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0078-0084.jpg?sign=1738867328-FQEG3Eadgs4MpqwRvNPsMpVYezLY2gf7-0-a78f63b9626e350500c91e1e8113164d)
图5-6 添加OK按钮控件
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0078-0085.jpg?sign=1738867328-x71VYj9vh2JjJrC0CaBLfC8mW6v1UjNB-0-e06781762d6c5820b562656154625bce)
图5-7 修改OK按钮属性
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0077-0083.jpg?sign=1738867328-K9j4Q21merSnqE1RgSjfrnw9MudwqTRk-0-4792d09e8ac560524973960a518e1e92)
图5-5 修改Label标签属性
至此,LabelButton实例界面设计完成。