这是我参与「第四届青训营 」笔记创作活动的第12天

布局编辑器

简介

Android Studio 提供了一个高级的布局编辑器，允许使用拖拽控件的方式来构建界面，不需要手动写布局 XML 文件。

首先打开activity_main.xml后打开preview
1、在preview中点击palette
2、选择所需控件拖动到界面上（进行一系列属性的配置）
3、activity_main.xml会显示添加的内容

界面介绍

1、Palette（面板）： 包含可以拖到布局中的各种视图和视图组。
2、Component Tree（组件树）：显示布局的层次结构。
3、工具栏：用于在编辑器中配置布局外观和更改某些布局属性的按钮。
4、Design 编辑器：Design 视图布局和 Blueprint 视图布局之一或两者。
5、Attribute（属性）：针对选定视图属性的控件。
6、视图模式：采用 Code、Design 或 Split 模式查看布局。 Split 模式会同时显示 Code 和 Design 窗口。
7、缩放和平移控件：控制编辑器内的预览大小和位置。

当打开 XML 布局文件时，系统会默认打开设计编辑器，如上图所示。如需在文本编辑器中修改布局 XML，请点击窗口右上角的 Code 按钮。
注意： 在 Code 视图中修改布局时， Palette 、 Component Tree 和 Attributes 窗口不可用。

更改预览外观

设计编辑器顶行的按钮可以在编辑器中配置布局的外观，也可以在文本编辑器的预览窗口中打开此工具栏。

与上图中数字相对应的按钮如下：

1、Design 和 Blueprint（设计和蓝图） 选择在编辑器中查看布局的方式；选择 Design 可查看布局的渲染预的览效果。选择 Blueprint 可仅查看每个视图的轮廓。选择 Design + Blueprint 可并排查看这两个视图。

2、屏幕方向和布局变体 选择屏幕方向（横向和纵向），或选择应用提供备用布局的其他屏幕模式（例如夜间模式）。该菜单还包含用于创建新布局变体的命令。

3、设备类型和尺寸 选择设备类型（手机/平板电脑、Android TV 或 Wear OS）和屏幕配置（尺寸和密度）。可以从多种预配置的设备类型和自己的 AVD 定义中选择，也可以从列表中选择 Add Device Definition 创建新的 AVD。

提示：针对这些参考设备测试布局将有助于确保应用能够很好地适应实际设备上的布局状态。

4、API版本 选择要在预览布局时使用的 Android 版本。

5、AppTheme：选择要应用于预览的界面主题背景。请注意，这仅适用于支持的布局样式，因此该列表中的许多主题背景都会导致出错。

6、Language：选择要以何种语言显示界面字符串。此列表仅会显示字符串资源主持的语言。如果想要修改翻译，请点击下拉菜单中的 Edit Translations

显示布局警告和错误

布局编辑器会在 Component Tree 中相应视图的旁边使用红色圆圈感叹号图标（表示错误）或橙色三角形感叹号图标（表示警告）通知您存在的任何布局问题。点击该图标即可查看更多详细信息。
如下图： 如需在编辑器下方的窗口中查看所有已知问题，请点击工具栏中的 Show Warnings and Errors

结语

以上内容仅供参考，更多详细信息请见使用布局编辑器构建界面  |  Android 开发者  |  Android Developers (google.cn)