使用 View 开发界面

借助布局编辑器，您可以将界面元素拖动到视觉设计编辑器中（而不是编写布局 XML），快速构建基于 View 的布局。设计编辑器可以在不同的 Android 设备和版本上预览布局，并且您可以动态调整布局大小，以确保其能够在不同的屏幕尺寸上正常运行。

在使用 ConstraintLayout 构建布局时，布局编辑器的功能尤其强大。

本文简要介绍了布局编辑器。如需详细了解布局基础知识，请参阅布局。

布局编辑器简介

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

布局编辑器
图 1. 布局编辑器。
  1. Palette：包含您可以拖动到布局中的各种视图和视图组。
  2. Component Tree：显示布局中组件的层次结构。
  3. Toolbar：包含用于在编辑器中配置布局外观及更改布局属性的按钮。
  4. Design Editor：可让您在 Design 视图和/或 Blueprint 视图中修改布局。
  5. Attributes：包含所选视图属性的控件。
  6. View 模式：可让您在 Code code 模式图标、Split split 模式图标 或 Design design 模式图标 模式下查看布局。Split 模式会同时显示 Code 和 Design 窗口。
  7. 缩放和平移控件：控制编辑器中的预览大小和位置。

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

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

更改预览外观

使用设计编辑器顶行中的按钮，您可以在编辑器中配置布局的外观。

布局编辑器工具栏中用于配置布局外观的按钮
图 2. 布局编辑器工具栏中用于配置布局外观的按钮。
  1. Design 和 Blueprint：选择您希望如何在编辑器中查看布局。您还可以按 B 循环浏览这些视图类型。
    • 选择 Design 以查看布局的渲染预览。
    • 选择 Blueprint 可仅查看每个视图的轮廓。
    • 选择 Design + Blueprint 可并排查看这两个视图。
  2. 屏幕方向和布局变体：选择屏幕方向（横向或纵向），或选择应用为其提供备用布局的其他屏幕模式，例如夜间模式。该菜单还包含用于创建新布局变体的命令，如本页中的部分所述。 您也可以按键盘上的字母 O 来更改屏幕方向。

  3. 系统界面模式：如果您已在应用中启用动态配色，请切换壁纸，看看您的布局如何响应不同用户选择的壁纸。请注意，您必须先将主题更改为 Material 动态配色主题，然后再更改壁纸。

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

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

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

    包含 Reference Devices 的设备列表菜单
    图 3. 显示 Reference Devices 的设备列表。

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

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

  7. Language：选择要以何种语言显示界面字符串。此列表仅会显示字符串资源主持的语言。如果您想要修改翻译，请点击菜单中的 Edit Translations。如需详细了解如何使用翻译，请参阅使用 Translations Editor 本地化界面。

创建新布局

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

您可以通过以下任一方式创建新布局：

使用 Android Studio 的主菜单

  1. 在 Project 窗口中，点击要向其添加布局的模块。
  2. 在主菜单中，依次选择 File > New > XML > Layout XML File。
  3. 在显示的对话框中，提供文件名、根布局标记以及布局所属的源代码集。
  4. 点击 Finish 以创建布局。

使用 Project 视图

  1. 从 Project 窗口中选择 Project 视图。
  2. 右键点击想要在其中添加布局的布局目录。
  3. 在显示的上下文菜单中，依次点击 New > Layout Resource File。

使用 Android 视图

  1. 从 Project 窗口中选择 Android 视图。
  2. 右键点击 layout 文件夹。
  3. 在显示的上下文菜单中，依次选择 New > Layout Resource File。

使用 Resource Manager

  1. 在 Resource Manager 中，选择 Layout 标签页。
  2. 点击 + 按钮，然后点击 Layout Resource File。

使用布局变体针对不同屏幕进行优化

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

使用建议的布局变体

Android Studio 包含您可以在项目中使用的常见布局变体。如需使用建议的布局变体，请执行以下操作：

  1. 打开默认布局文件。
  2. 点击窗口右上角的 Design design 模式图标 图标。
  3. 布局文件的名称显示在 Action to switch and create qualifiers for layout files 下拉列表中。选择下拉菜单。
  4. 在下拉列表中，选择一个变体，例如 Create Landscape Qualifier 或 Create Tablet Qualifier。
    “Create qualifiers”下拉菜单
    图 4.布局限定符的下拉列表。

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

创建自己的布局变体

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

  1. 打开默认布局文件。
  2. 点击窗口右上角的 Design 图标 设计模式图标。
  3. 布局文件的名称显示在 Action to switch and create qualifiers for layout files 下拉列表中。选择下拉菜单。

  4. 在下拉列表中，选择 Add Resource Qualifier。（参见上面的图 4。）

    此时将显示 Select Resource Directory 对话框。

  5. 在 Select Resource Directory 对话框中，为变体定义资源限定符：

    1. 从 Available qualifiers 列表中选择限定符。
    2. 点击 Add 用于添加限定符的按钮 按钮。
    3. 输入任意必填值。
    4. 重复上述步骤以添加其他限定符。

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

如果同一布局有多个变体，您可以从 Action to switch and create qualifiers for layout files 下拉菜单中选择一个变体，在这些变体之间切换。

如需详细了解如何为不同屏幕创建布局，请参阅支持不同的屏幕尺寸。

转换视图或布局

您可以将一种视图转换为另一种视图，也可以将一种布局转换为另一种布局：

  1. 点击编辑器窗口右上角的 Design 按钮。
  2. 在 Component Tree 中，右键点击相应视图或布局，然后点击 Convert view。
  3. 在显示的对话框中，选择新类型的视图或布局，然后点击 Apply。

将布局转换为 ConstraintLayout

为了提升布局性能，请将旧版布局转换为 ConstraintLayout。ConstraintLayout 使用基于约束条件的布局系统，让您无需使用任何嵌套视图组即可构建大多数布局。

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

  1. 在 Android Studio 中打开现有布局。
  2. 点击编辑器窗口右上角的 Design design 模式图标 图标。
  3. 在 Component Tree 中，右键点击该布局，然后点击 Convert your-layout-type to ConstraintLayout。

如需详细了解 ConstraintLayout，请参阅使用 ConstraintLayout 构建自适应界面。

在 Palette 中查找项目

如需在 Palette 中按名称搜索视图或视图组，请点击 Palette 顶部的 Search palette search 按钮 按钮。或者，您也可以在 Palette 窗口每次获得焦点时输入相应项的名称。

在 Palette 中，您可以在 Common 类别中找到常用项目。如需向此类别添加内容，请右键点击 Palette 中的相应视图或视图组，然后在上下文菜单中点击 Favorite。

从 Palette 中打开文档

如需打开视图或视图组的 Android 开发者参考文档，请在 Palette 中选择界面元素，然后按 Shift+F1。

如需查看视图或视图组的 Material Guidelines 文档，请右键点击 Palette 中的界面元素，然后从上下文菜单中选择 Material Guidelines。如果相应内容不存在任何特定条目，则该命令会打开 Material 准则文档的首页。

将视图添加到布局中

如需开始构建布局，请将视图和视图组从 Palette 拖动到设计编辑器中。将视图放置到布局中后，编辑器会显示有关该视图与布局其余部分的关系的信息。

如果您使用的是 ConstraintLayout，则可以使用 Infer Constraints 和 Autoconnect 功能自动创建约束条件。

修改视图属性

The
图 5.Attributes 面板。

您可以通过布局编辑器的 Attributes 面板修改视图属性。此窗口仅在设计编辑器打开时可用，因此请在 Design 或 Split 模式下查看布局以进行使用。

当您选择视图时（无论是通过在 Component Tree 中点击该视图，还是在设计编辑器中点击该视图），Attributes 面板会显示以下内容，如图 5 所示：

  1. Declared Attributes：列出布局文件中指定的属性。如需添加属性，请点击该部分顶部的 Add 用于添加属性的按钮 按钮。
  2. 布局：包含对视图宽度和高度的控件。如果视图位于 ConstraintLayout 中，该部分还会显示约束偏差，并列出相应视图使用的约束条件。如需详细了解如何使用 ConstraintLayout 控制视图的大小，请参阅调整视图大小。
  3. Common Attributes：列出所选视图的常见属性。如需查看所有可用的属性，请展开窗口底部的 All Attributes 部分。
  4. 搜索：可让您搜索特定的视图属性。

  5. 每个属性值右侧的图标指示属性值是否为资源引用。当值是资源引用时，这些指示符为实心 非中空指示器图标；当值经过硬编码时，指示器是空的 空指示器图标，以帮助您一目了然地识别硬编码值。

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

  6. 属性值周围的红色高亮部分表示值存在错误。例如，错误可能表示布局定义属性的条目无效。

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

向视图中添加示例数据

由于许多 Android 布局依赖于运行时数据，因此在设计应用时很难直观呈现布局的外观和风格。您可以在布局编辑器中向 TextView、ImageView 或 RecyclerView 添加示例预览数据。

如需显示 Design-time View Attributes 窗口，请右键点击其中一种视图类型，然后选择 Set Sample Data，如图 6 所示。

design-time view attributes 窗口
图 6.Design-time View Attributes 窗口。

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

包含示例数据的文本视图
图 7.包含示例数据的 TextView。

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

包含示例数据的图片视图
图 8.包含示例数据的 ImageView。

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

包含示例数据的 recycler 视图
图 9.包含示例数据的 RecyclerView。

显示布局警告和错误

布局编辑器会在 Component Tree 中相应视图的旁边使用红色圆圈感叹号图标 红色圆圈感叹号图标，指示布局错误（表示错误）或橙色三角形感叹号图标 橙色三角形感叹号图标，指示布局警告（表示警告）通知您存在的任何布局问题。点击该图标可查看更多详情。

如需在编辑器下方的窗口中查看所有已知问题，请点击工具栏中的 Show Warnings and Errors（红色圆圈感叹号图标，指示布局错误 或 橙色三角形感叹号图标，指示布局警告）。

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

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

  1. 在布局编辑器中，点击 Design design 模式图标 图标以在设计编辑器中查看布局。
  2. 选择文本视图。
  3. 在 Attributes 面板中，展开 textAppearance，然后展开 fontFamily 方框。
  4. 滚动到列表底部，然后点击 More Fonts，以打开 Resources 对话框。
  5. 在 Resources 对话框中，如需选择字体，请浏览列表或在顶部的搜索栏中输入内容。如果您在 Downloadable 下选择了字体，则可以点击 Create 可下载字体，在运行时将该字体作为可下载字体加载，也可以点击 Add font to project，将 TTF 字体文件打包到 APK 中。 Android 下列出的字体由 Android 系统提供，因此这些字体不需要下载，也不需要打包到 APK 中。
  6. 点击 OK 完成。

布局验证

“布局验证”是一款可视化工具，用于同时预览使用不同设备和不同显示配置时的布局，可帮助您在此过程的早期发现布局中存在的问题。如需使用此功能，请点击 IDE 窗口右上角的 Layout Validation 标签页：

“Layout Validation”标签页的屏幕截图

图 10. Layout Validation 标签页。

如需在可用的配置集之间切换，请从“Layout Validation”窗口顶部的 Reference Devices 下拉列表中选择以下其中一项：

  • Reference Devices（参考设备）
  • 自定义
  • Color Blind
  • Font Sizes（字体大小）

布局验证工具中的下拉菜单屏幕截图

图 11. “Reference Devices”下拉菜单。

Reference Devices（参考设备）

参考设备是指我们建议您针对其进行测试的一组设备，包括手机、可折叠设备、平板电脑和桌面设备的界面。您应该可以预览您的布局在这一组参考设备上的显示效果：

不同参考设备的布局预览的屏幕截图

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

自定义

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

在布局验证工具中自定义设备显示界面

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

Color Blind

为了方便色盲用户使用您的应用，请对常见的色盲类型进行模拟，以此验证布局：

不同色盲类型的模拟预览的屏幕截图

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

Font Sizes

验证各种字体大小下的布局；使用较大的字体测试布局，改进对视力障碍用户的无障碍支持：

不同字体大小下的应用布局预览（使用大字体时有可见的布局错误）

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