在布局编辑器中,您可以通过将界面元素拖动到可视化设计编辑器中(而不是手动编写布局 XML),快速构建布局。设计编辑器支持在不同的 Android 设备和版本上预览布局,并且您可以动态调整布局大小,以确保它能够很好地适应不同的屏幕尺寸。
使用 ConstraintLayout
构建布局时,布局编辑器的功能尤其强大。前者是一个布局管理器,与 Android 2.3(API 级别 9)及更高版本兼容。
本文简要介绍了布局编辑器。如需详细了解布局基础知识,请参阅布局。
布局编辑器简介
当您打开 XML 布局文件时,就会显示布局编辑器。
![布局编辑器](https://i-blog.csdnimg.cn/blog_migrate/655443665f36ed7caf9eab4cfc9441d6.png)
- Palette:包含您可以拖到布局中的各种视图和视图组。
- Component Tree:显示布局中的组件层次结构。
- 工具栏:点击这些按钮可在编辑器中配置布局外观及更改布局属性。
- 设计编辑器:在 Design 视图和/或 Blueprint 视图中修改布局。
- Attributes:用于对所选视图的属性进行控制的控件。
- 视图模式:采用 Code
、Design
或 Split
模式查看布局。Split 模式会同时显示 Code 和 Design 窗口。
- 缩放和平移控件:控制编辑器内的预览大小和位置。
当您打开 XML 布局文件时,默认会打开设计编辑器,如图 1 所示。如需在文本编辑器中修改布局 XML,请点击窗口右上角的 Code 按钮。请注意,在 Code 视图中修改布局时,Palette、Component Tree 和 Attributes 窗口不可用。
提示:您只需按
Alt + Shift + Right/Left arrow
(在 Mac 上按Control + Shift + Right/Left arrow
),即可在设计编辑器和文本编辑器之间切换。
更改预览外观
您可以使用设计编辑器顶行中的按钮在编辑器中配置布局的外观。
![](https://i-blog.csdnimg.cn/blog_migrate/e8037060e59aae120f68ef9dba92de6c.png)
可用的按钮(对应于图 2 中的各个数字)如下:
- Design 和 Blueprint:选择您希望如何在编辑器中查看布局。选择 Design 可查看布局的渲染后预览效果。选择 Blueprint 可仅查看每个视图的轮廓。选择 Design + Blueprint 可并排查看这两个视图。您还可以按
B
循环浏览这些视图类型。 - 屏幕方向和布局变体:选择屏幕方向(横向和纵向),或选择应用提供备用布局的其他屏幕模式(例如夜间模式)。该菜单还包含用于创建新布局变体的命令。 您还可以按
O
更改屏幕方向。 - 设备类型和尺寸:选择设备类型(手机/平板电脑、Android TV 或 Wear OS)和屏幕配置(尺寸和密度)。您可以从多种预配置的设备类型和您自己的 AVD 定义中选择,也可以从列表中选择 Add Device Definition 创建新的 AVD。您可以通过拖动布局的右下角来调整设备尺寸,还可以按
D
循环浏览设备列表。 - API 版本:选择预览布局时使用的 Android 版本。
- AppTheme:选择要应用于预览的界面主题背景。请注意,这仅适用于支持的布局样式,因此该列表中的许多主题背景都会导致出错。
- Language:选择要以何种语言显示界面字符串。此列表仅会显示您的字符串资源支持的语言。如果您想要修改翻译,请点击下拉菜单中的 Edit Translations。如需详细了解如何使用翻译,请参阅使用 Translations Editor 本地化界面。
注意:除非您选择从 Layout Variants 添加新的布局文件,否则这些配置对应用的代码或清单没有任何影响。它们只会影响布局预览。
创建新布局
为应用添加新布局时,请先在项目的默认 layout/
目录中创建一个默认布局文件,以便其适用于所有设备配置。默认布局创建完毕后,您可以为特定的设备配置(例如为大屏幕)创建布局变体。
您可以通过以下方式之一创建新布局:
使用 Android Studio 的主菜单
- 在 Project 窗口中,点击要在其中添加布局的模块。
- 在主菜单中,依次选择 File > New > XML > Layout XML File。
- 在显示的对话框中,提供文件名、根布局标记以及布局所属的源代码集。
- 点击 Finish 以创建布局。
使用 Project 视图
- 从 Project 窗口中选择 Project 视图。
- 右键点击想要在其中添加布局的布局目录。
- 在显示的上下文菜单中,依次点击 New > Layout Resource File。
使用 Android 视图
- 从 Project 窗口中选择 Android 视图。
- 右键点击
layout
文件夹。 - 在显示的上下文菜单中,依次选择 New > Layout Resource File。
使用 Resource Manager
- 在 Resource Manager 中,选择 Layout 标签页。
- 点击
+
按钮,然后点击 Layout Resource File。
使用布局变体针对不同屏幕进行优化
布局变体是现有布局的备用版本,针对特定屏幕尺寸或屏幕方向进行了优化。
使用建议的布局变体
Android Studio 包含您可以在项目中使用的常见布局变体。 如需使用建议的布局变体,请执行以下操作:
- 打开原始布局文件,点击窗口右上角的 Design
图标。
- 点击工具栏中的 Orientation for Preview 图标 (
)。
- 在下拉列表中,选择建议的变体,例如 Create Landscape Variant。
创建自己的布局变体
如果您想要创建自己的布局变体,请执行以下操作:
- 打开原始布局文件,点击窗口右上角的 Design (
) 图标。
- 点击工具栏中的 Orientation for Preview 图标
。
- 在下拉列表中,选择 Create Other...。
- 在显示的对话框中,定义变体的资源限定符。 从 Available qualifiers 列表中选择限定符,然后点击 Add
按钮。 根据需要重复此步骤以添加其他限定符。
- 添加完所有限定符后,点击 OK。
如果同一布局有多个变体,如需在这些变体间切换,请点击 Layout Variants 图标 并从显示的列表中选择。
如需详细了解如何为不同屏幕创建布局,请参阅支持不同的屏幕尺寸。
转换视图或布局
您可以将一种视图转换为另一种视图,也可以将一种布局转换为另一种布局。
- 点击编辑器窗口右上角的 Design 按钮。
- 在 Component Tree 中,右键点击相应视图或布局,然后点击 Convert view...。
- 在显示的对话框中,选择新类型的视图或布局,然后点击 Apply。
将布局转换为 ConstraintLayout
为了改善布局性能,您应该将旧版布局转换为 ConstraintLayout
。ConstraintLayout
采用基于约束条件的布局系统,让您无需使用任何嵌套视图组即可构建大多数布局。
如需将现有布局转换为 ConstraintLayout
,请执行以下操作:
- 在 Android Studio 中打开现有布局,然后点击编辑器窗口右上角的 Design 按钮。
- 在 Component Tree 中,右键点击该布局,然后点击 Convert
your-layout-type
to ConstraintLayout。
如需详细了解 ConstraintLayout
,请参阅使用 ConstraintLayout 构建自适应界面。
在 Palette 中查找内容
如需在 Palette 中按名称搜索视图或视图组,请点击 Palette 顶部的 Search 按钮。或者,您也可以在 Palette 窗口每次获得焦点后输入内容名称。
您可以在 Palette 的 Common 类别中找到经常使用的内容。如需向此类别中添加内容,请右键点击 Palette 中的相应视图或视图组,然后在上下文菜单中点击 Favorite。
从 Palette 中打开文档
如需打开视图或视图组的 Android 开发者参考文档,请在 Palette 中选择界面元素,然后按 Shift + F1
。
如需查看视图或视图组的 Material Guidelines 文档,请右键点击 Palette 中的界面元素,然后从上下文菜单中选择 Material Guidelines。对于相应内容,如果不存在任何特定条目,则此命令会打开 Material Guidelines 文档的首页。
将视图添加到布局中
要开始构建布局,只需将视图和视图组从 Palette 拖动到设计编辑器中即可。将视图放置到布局中后,编辑器会显示有关该视图与布局其余部分的关系的信息。
如果您使用的是 ConstraintLayout
,则可以使用 Infer Constraints 和 Autoconnect 功能自动创建约束条件。
修改视图属性
![](https://i-blog.csdnimg.cn/blog_migrate/ca3d0b7659ebc37b26dc3bb9f4e63c0a.png)
您可以在布局编辑器右侧的 Attributes 窗口中修改视图属性。只有在设计编辑器处于打开状态时,此窗口才会显示,因此请确保您正在使用 Design 或 Split 模式查看布局。
当您选择视图时(无论是通过在 Component Tree 中点击该视图,还是在设计编辑器中点击该视图),Attributes 窗口会显示以下内容,如图 3 所示:
- Declared Attributes 部分会列出布局文件中指定的属性。如需添加属性,请点击该部分右上角的 Add
按钮。
- Layout 部分包含视图的宽度和高度控件。如果视图位于
ConstraintLayout
中,该部分还会显示约束偏差,并列出相应视图使用的约束条件。如需详细了解如何使用ConstraintLayout
,请参阅使用 ConstraintLayout 构建自适应界面。 - Common Attributes 部分列出了所选视图的常见属性。如需查看所有可用的属性,请展开窗口底部的 All Attributes 部分。
- 点击 Search 按钮可搜索特定的视图属性。
- 每个属性值右侧的图标指示属性值是否为资源引用。当属性值是资源引用时,指示器是非中空的
,当属性值是硬编码时,指示器是空的
。这些指示器可帮助您一目了然地识别硬编码值。点击指示器(无论其处于哪种状态)会打开 Resources 对话框窗口,您可以在其中选择相应属性的资源引用。
-
属性值周围的红色突出显示表示值存在错误。 错误可能表示布局定义属性的条目无效,如图 3 中的红色突出显示所示。
橙色突出显示表示值存在警告。例如,如果在应该使用资源引用时使用了硬编码值,就可能会出现警告。
向视图中添加示例数据
由于很多 Android 布局都依赖于运行时数据,因此在设计应用时很难直观呈现布局的外观和风格。在 Android Studio 3.2 及更高版本中,您可以从布局编辑器中向 TextView
、ImageView
或 RecyclerView
添加示例预览数据。
注意:当您向
View
添加示例数据时,Android Studio 会更改您的项目,就像您在使用自己的数据一样。您随后可以根据需要修改这些更改内容。
您可以右键点击其中某种视图类型,然后选择 Set Sample Data 以显示 Design-time View Attributes 窗口,如图 4 所示。
![design time view attributes 窗口](https://i-blog.csdnimg.cn/blog_migrate/8544df32f278111f25990994fe9d7863.png)
在 TextView
中,您可以在不同的示例文本类别之间选择。在使用示例文本时,Android Studio 会使用您选择的示例数据填充 TextView
的 text
属性。请注意,仅当 text
属性为空时,您才能通过 Design-time View Attributes 窗口选择示例文本。
![包含示例数据的 text view](https://i-blog.csdnimg.cn/blog_migrate/0859138a848e9ddce74afebe1db5d568.png)
在 ImageView
中,您可以在不同的示例图片之间进行选择。当您选择示例图片后,Android Studio 会填充 ImageView
的 tools:src
属性(如果使用支持库,则会填充 tools:srcCompat
)。
![包含示例数据的 image view](https://i-blog.csdnimg.cn/blog_migrate/cf9c4925a7205f0184c2dc423a653314.png)
在 RecyclerView
中,您可以在一组包含示例图片和文本的模板之间进行选择。使用这些模板时,Android Studio 会将 recycler_view_item.xml
文件添加到 res/layout
目录,该文件中包含示例数据的布局。Android Studio 还会将元数据添加到 RecyclerView
,以正确显示示例数据。
![包含示例数据的 recycler view](https://i-blog.csdnimg.cn/blog_migrate/0dfed4fda7645cad0cce55e62d75e3c9.png)
显示布局警告和错误
布局编辑器会在 Component Tree 中相应视图的旁边使用红色圆圈感叹号图标 (表示错误)或橙色三角形感叹号图标
(表示警告)通知您存在的任何布局问题。点击该图标即可查看更多详细信息。
如需在编辑器下方的窗口中查看所有已知问题,请点击工具栏中的 Show Warnings and Errors( 或
)。
下载字体并将其应用于文本
使用 Android 8.0(API 级别 26)或 Android 支持库 26.0.0 或更高版本时,您可以按照以下步骤从数百种字体中进行选择:
- 在布局编辑器中,点击 Design
按钮以在设计编辑器中查看布局。
- 点击一个文本视图。
- 在 Attributes 窗口中,展开 textAppearance,然后展开 fontFamily 方框。
- 滚动到列表底部,然后点击 More Fonts,以打开 Resources 对话框。
- 在 Resources 对话框中,通过浏览列表或在顶部的搜索栏中输入字体来选择字体。如果您选择 Downloadable 下的某种字体,则可以点击 Create downloadable font 以在运行时加载该字体作为可下载字体,或点击 Add font to project 以将 TTF 字体文件打包到 APK 中。请注意,Android 系统提供了 Android 下列出的字体,因此这些字体不需要下载,也不需要打包到 APK 中。
- 点击 OK 完成。