- Android开发:从0到1 (清华开发者书库)
- 赵志荣
- 804字
- 2020-11-28 16:13:37
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=1739477403-hVuM49syB7gxrhyiSdfkod0ifQvUjdX1-0-db2062c2329a8e473d4820796fc19ad4)
图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=1739477403-Tupmf7LqazHuV3ZqohSUEvbikniIsXMj-0-9ad6f448145795e48368b6e46306c832)
图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=1739477403-cT7dYYOwPp3HeDTxPEsXn2aF3ht9M3a0-0-9a2b2259140e60939a19b3224fbf9b96)
图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=1739477403-UTtlXCEzWkgaUBV7fVgqnIM5nQEYYNNw-0-b146825e5c4d78f500f4d4294a824737)
图5-6 添加OK按钮控件
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0078-0085.jpg?sign=1739477403-Br4PdR0Wr7wiO9kqAV8v9ag3ZhodxQNf-0-2ba411a1ddec34d48f2e1b9f0fab7e7f)
图5-7 修改OK按钮属性
![](https://epubservercos.yuewen.com/73B1DF/15367246905322506/epubprivate/OEBPS/Images/Figure-0077-0083.jpg?sign=1739477403-mWGOSZFkyZhPvXXc3yaEoPa8Q7OyVlVf-0-6e2f32f7dbeffadc52a3c1846190874d)
图5-5 修改Label标签属性
至此,LabelButton实例界面设计完成。