使用 Views 开发 UI

布局编辑器使您能够通过将 UI 元素拖放到可视化设计编辑器中来快速构建基于 View 的布局，而不是编写布局 XML。设计编辑器可以在不同的 Android 设备和版本上预览您的布局，并且您可以动态调整布局大小以确保它在不同的屏幕尺寸上都能正常工作。

当 使用 ConstraintLayout 构建布局 时，布局编辑器尤其强大。

此页面提供了布局编辑器的概述。要详细了解布局基础知识，请参阅 布局。

布局编辑器简介

当您打开 XML 布局文件时，布局编辑器会显示。

1. 调色板 (Palette)：包含您可以拖放到布局中的各种视图和视图组。
2. 组件树 (Component Tree)：显示布局中组件的层次结构。
3. 工具栏 (Toolbar)：包含用于配置您在编辑器中布局外观以及更改布局属性的按钮。
4. 设计编辑器 (Design editor)：允许您在设计视图、蓝图视图或两者中编辑布局。
5. 属性 (Attributes)：包含所选视图属性的控件。
6. 视图模式 (View mode)：允许您以代码 、拆分 或设计 模式查看布局。拆分模式同时显示代码和设计窗口。
7. 缩放和平移控件 (Zoom and pan controls)：控制编辑器中预览的大小和位置。

当您打开 XML 布局文件时，默认情况下会打开设计编辑器，如图 1 所示。要以文本编辑器编辑布局 XML，请点击窗口右上角的代码 按钮。请注意，在代码视图中编辑布局时，调色板、组件树和属性面板不可用。

提示：要切换设计和文本编辑器，请按 Alt（macOS 上为 Control）加 Shift 以及向右或向左箭头键。

更改预览外观

设计编辑器顶行中的按钮允许您配置布局在编辑器中的外观。

1. 设计和蓝图 (Design and Blueprint)：选择您希望在编辑器中如何查看布局。您还可以按 B 循环浏览这些视图类型。
   • 选择设计以查看布局的渲染预览。
   • 选择蓝图仅查看每个视图的轮廓。
   • 选择设计 + 蓝图以并排查看这两个视图。
2. 屏幕方向和布局变体 (Screen orientation and layout variants)：在横向或纵向屏幕方向之间进行选择，或选择您的应用提供备用布局的其他屏幕模式，例如夜间模式。此菜单还包含用于创建新的布局变体的命令，如本页面的某个部分所述。您也可以按键盘上的字母 O 来更改方向。

3. 系统 UI 模式 (System UI Mode)：如果您已在应用中启用动态颜色，请切换壁纸并查看您的布局如何对用户选择的不同壁纸做出反应。请注意，您必须首先将主题更改为 Material 动态颜色主题，然后更改壁纸。

4. 设备类型和尺寸 (Device type and size)：选择设备类型（手机/平板电脑、Android TV 或 Wear OS）和屏幕配置（尺寸和密度）。您可以从几个预配置的设备类型和您自己的 AVD 定义中进行选择，并且可以通过从列表中选择添加设备定义来创建新的 AVD，如图 3 所示。

   • 要调整设备大小，请拖动布局的右下角。
   • 按 D 循环浏览设备列表。

   针对此菜单中的参考设备测试您的布局有助于您的应用很好地扩展到真实设备上的布局状态。

   

5. API 版本 (API version)：选择 Android 版本以预览您的布局。可用 Android 版本的列表取决于您使用 SDK 管理器安装了哪些 SDK 平台版本。

6. 应用主题 (App theme)：选择要应用于预览的 UI 主题。这仅适用于支持的布局样式，因此此列表中的许多主题会导致错误。

7. 语言 (Language)：选择要显示 UI 字符串的语言。此列表仅显示字符串资源中可用的语言。如果您想编辑翻译，请从菜单中点击编辑翻译。有关使用翻译的更多信息，请参阅使用翻译编辑器本地化 UI。

创建新的布局

在为您的应用添加新的布局时，首先在项目的默认 layout/ 目录中创建一个默认布局文件，以便它适用于所有设备配置。拥有默认布局后，您可以创建布局变体，如本页面的某个部分所述，用于特定的设备配置，例如大屏幕。

您可以通过以下几种方式创建新的布局

使用 Android Studio 的主菜单

1. 在项目窗口中，点击您要向其中添加布局的模块。
2. 在主菜单中，选择文件 > 新建 > XML > 布局 XML 文件。
3. 在出现的对话框中，提供文件名、根布局标签以及布局所属的源集。
4. 点击完成以创建布局。

使用项目视图

1. 从项目窗口中选择项目视图。
2. 右键点击您要向其中添加布局的布局目录。
3. 在出现的上下文菜单中，点击新建 > 布局资源文件。

使用 Android 视图

1. 从项目窗口中选择Android视图。
2. 右键点击 layout 文件夹。
3. 在出现的上下文菜单中，选择新建 > 布局资源文件。

使用资源管理器

1. 在资源管理器中，选择布局选项卡。
2. 点击 + 按钮，然后点击布局资源文件。

使用布局变体优化不同屏幕

布局变体是现有布局的替代版本，针对特定屏幕尺寸或方向进行了优化。

使用建议的布局变体

Android Studio 包含您可以用于项目的常用布局变体。要使用建议的布局变体，请执行以下操作

1. 打开您的默认布局文件。
2. 点击窗口右上角的设计 图标。
3. 布局文件的名称显示在用于切换和为布局文件创建限定符的操作下拉菜单中。选择下拉菜单。
4. 在下拉列表中，选择一个变体，例如创建横向限定符或创建平板电脑限定符。

   

将创建一个新的布局目录。

创建您自己的布局变体

如果您想创建您自己的布局变体，请执行以下操作

1. 打开您的默认布局文件。
2. 点击窗口右上角的设计 图标。
3. 布局文件的名称显示在用于切换和为布局文件创建限定符的操作下拉菜单中。选择下拉菜单。

4. 在下拉列表中，选择添加资源限定符。（请参阅上图图 4。）

   将出现选择资源目录对话框。

5. 在选择资源目录对话框中，定义变体的资源限定符

   1. 从可用限定符列表中选择一个限定符。
   2. 点击添加 按钮。
   3. 输入任何必需的值。
   4. 重复这些步骤以添加其他限定符。

6. 添加完所有限定符后，点击确定。

当您具有同一布局的多个变体时，可以通过从用于切换和为布局文件创建限定符的操作下拉菜单中选择一个变体来在它们之间切换。

有关如何为不同屏幕创建布局的更多信息，请参阅支持不同的屏幕尺寸。

转换视图或布局

您可以将一个视图转换为另一种类型的视图，也可以将一个布局转换为另一种类型的布局

1. 点击编辑器窗口右上角的设计按钮。
2. 在组件树中，右键点击视图或布局，然后点击转换视图。
3. 在出现的对话框中，选择新的视图或布局类型，然后点击应用。

将布局转换为 ConstraintLayout

为了提高布局性能，请将旧的布局转换为ConstraintLayout。ConstraintLayout 使用基于约束的布局系统，允许您构建大多数布局而无需任何嵌套视图组。

要将现有布局转换为 ConstraintLayout，请执行以下操作

1. 在 Android Studio 中打开现有布局。
2. 点击编辑器窗口右上角的设计 图标。
3. 在组件树中，右键点击布局，然后点击将 your-layout-type 转换为 ConstraintLayout。

要了解有关 ConstraintLayout 的更多信息，请参阅使用 ConstraintLayout 构建响应式 UI。

在调色板中查找项目

要在调色板中按名称搜索视图或视图组，请点击调色板顶部的搜索 按钮。或者，您可以在调色板窗口获得焦点时键入项目的名称。

在调色板中，您可以在常用类别中找到常用项目。要将项目添加到此类别，请右键点击调色板中的视图或视图组，然后在上下文菜单中点击收藏。

从调色板打开文档

要打开视图或视图组的 Android 开发者参考文档，请在调色板中选择 UI 元素，然后按 Shift+F1。

要查看视图或视图组的 Material 指南文档，请右键点击调色板中的 UI 元素，然后从上下文菜单中选择Material 指南。如果没有该项目的特定条目，则该命令会打开Material 指南文档的主页。

将视图添加到布局

要开始构建布局，请将视图和视图组从调色板拖放到设计编辑器中。当您将视图放置到布局中时，编辑器会显示有关视图与布局其余部分关系的信息。

如果您使用的是 ConstraintLayout，则可以使用推断约束和自动连接功能自动创建约束。

编辑视图属性

您可以从布局编辑器中的属性面板编辑视图属性。此窗口仅在设计编辑器打开时可用，因此请以设计或拆分模式查看布局以使用它。

当您选择一个视图时，无论是通过点击组件树中的视图还是设计编辑器中的视图，属性面板都会显示以下内容，如图 5 所示

1. 声明的属性 (Declared Attributes)：列出布局文件中指定的属性。要添加属性，请点击该部分顶部的添加 按钮。
2. 布局：包含用于视图宽度和高度的控件。如果视图位于 ConstraintLayout 中，此部分还会显示约束偏差并列出视图使用的约束。有关使用 ConstraintLayout 控制视图大小的更多信息，请参阅 调整视图大小。
3. 常用属性：列出所选视图的常用属性。要查看所有可用属性，请展开窗口底部的所有属性部分。
4. 搜索：允许您搜索特定视图属性。

5. 每个属性值右侧的图标指示属性值是否为资源引用。当值为资源引用时，这些指示器为实心 ，当值为硬编码时，这些指示器为空 ，以帮助您一眼识别硬编码值。

   单击任一状态下的指示器以打开资源对话框，您可以在其中为相应的属性选择资源引用。

6. 属性值周围的红色突出显示表示该值存在错误。例如，错误可能表示布局定义属性的输入无效。

   橙色突出显示表示该值的警告。例如，当您使用硬编码值（而预期使用资源引用）时，可能会出现警告。

向您的视图添加示例数据

由于许多 Android 布局依赖于运行时数据，因此在设计应用程序时难以可视化布局的外观。您可以从布局编辑器中向 TextView、ImageView 或 RecyclerView 添加示例预览数据。

要显示设计时视图属性窗口，请右键单击这些视图类型之一，然后选择设置示例数据，如图 6 所示。

对于 TextView，您可以在不同的示例文本类别之间进行选择。使用示例文本时，Android Studio 会使用您选择的示例数据填充 TextView 的 text 属性。请注意，只有当 text 属性为空时，您才能通过设计时视图属性窗口选择示例文本。

对于 ImageView，您可以在不同的示例图像之间进行选择。当您选择示例图像时，Android Studio 会填充 ImageView 的 tools:src 属性（如果使用 AndroidX，则为 tools:srcCompat）。

对于 RecyclerView，您可以从包含示例图像和文本的一组模板中进行选择。使用这些模板时，Android Studio 会向您的 res/layout 目录添加一个文件 recycler_view_item.xml，其中包含示例数据的布局。Android Studio 还会向 RecyclerView 添加元数据以正确显示示例数据。

显示布局警告和错误

布局编辑器会在组件树中相应视图旁边通知您任何布局问题，使用红色圆圈感叹号图标 表示错误，使用橙色三角形感叹号图标 表示警告。单击图标以查看更多详细信息。

要查看编辑器下方窗口中所有已知问题，请单击工具栏中的显示警告和错误（ 或 ）。

下载字体并将其应用于文本

使用 Android 8.0（API 级别 26）或 Jetpack Core 库 时，您可以按照以下步骤从数百种字体中进行选择

1. 在布局编辑器中，单击设计 图标以在设计编辑器中查看您的布局。
2. 选择文本视图。
3. 在属性面板中，展开textAppearance，然后展开fontFamily框。
4. 滚动到列表底部，然后单击更多字体以打开资源对话框。
5. 在资源对话框中，要选择字体，请浏览列表或在顶部的搜索栏中键入。如果您在可下载下选择字体，则可以单击创建可下载字体以在运行时将字体加载为 可下载字体，或者单击将字体添加到项目以将 TTF 字体文件打包到您的 APK 中。在Android下列出的字体由 Android 系统提供，因此无需下载或捆绑到您的 APK 中。
6. 单击确定以完成。

布局验证

布局验证是一个可视化工具，用于同时预览不同设备和显示配置的布局，帮助您在流程早期发现布局中的问题。要访问此功能，请单击 IDE 窗口右上角的布局验证选项卡

图 10. 布局验证选项卡。

要切换可用配置集，请从布局验证窗口顶部的参考设备下拉列表中选择以下选项之一

• 参考设备
• 自定义
• 色盲
• 字体大小

图 11. 参考设备下拉列表。

参考设备

参考设备是我们建议您针对其进行测试的一组设备。它们包括手机、折叠式手机、平板电脑和桌面界面。您应该预览布局在此组参考设备上的显示方式

图 12. 布局验证工具中的参考设备预览。

自定义

要自定义要预览的显示配置，请从各种设置中进行选择，包括语言、设备或屏幕方向

图 16. 在布局验证工具中配置自定义显示。

色盲

为了帮助使您的应用程序更易于色盲用户访问，请使用常见类型色盲的模拟来验证您的布局

图 13. 布局验证工具中的色盲模拟预览。

字体大小

在各种字体大小下验证您的布局，并通过使用更大的字体测试您的布局来提高您的应用程序对视力障碍用户的可访问性

图 14. 布局验证工具中可变字体大小的预览。