![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=1739664369-OdR6Cv3Zd3XpyxtXnbyYJgqnDbcj5XvA-0-e5a49cdc4653bc050e7a90998b064edc)
图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=1739664369-tjG9WH0mN1Lno3ydgbUNts3U4tPCDG6m-0-a06c7e8f613103edc0d90eae28ab9596)
图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=1739664369-admxxmthsi6hrWJiYNu4w6ukHJcBnlvH-0-6000faea31f0c0b7bce681fa8a450bc6)
图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=1739664369-Af8vj93xdwZ4TANgdKsGQsWdGz1iYO4S-0-845eb610d2516f3fe4575a8f3bc05bef)
图5-6 添加OK按钮控件
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0078-0085.jpg?sign=1739664369-deXMcafT6R7G6dV0ngRYVRS8bV2PzTE8-0-64c867bff42573e1f3c3ccfc7f4c3434)
图5-7 修改OK按钮属性
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0077-0083.jpg?sign=1739664369-BzcsV8fRKW4GsNNd4ZxCkvfnhjFYq4Mt-0-6fc31deb540cc3ea06181bbcc1f47f7c)
图5-5 修改Label标签属性
至此,LabelButton实例界面设计完成。