博客

38、Android编写应用-使用布局编辑器Layout Editor构建界面

  • Post author:
  • Post category:其他


在布局编辑器中，您可以通过将界面元素拖动到可视化设计编辑器中（而不是手动编写布局 XML），快速构建布局。设计编辑器支持在不同的 Android 设备和版本上预览布局，并且您可以动态调整布局大小，以确保它能够很好地适应不同的屏幕尺寸。


使用

ConstraintLayout

构建布局

时，布局编辑器的功能尤其强大。前者是一个布局管理器，与 Android 2.3（API 级别 9）及更高版本兼容。

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

布局

。

布局编辑器简介

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

布局编辑器

图 1.

布局编辑器


  1. Palette

    ：包含您可以拖到布局中的各种视图和视图组。

  2. Component Tree

    ：显示布局中的组件层次结构。

  3. 工具栏

    ：点击这些按钮可在编辑器中配置布局外观及更改布局属性。

  4. 设计编辑器

    ：在 Design 视图和/或 Blueprint 视图中修改布局。

  5. Attributes

    ：用于对所选视图的属性进行控制的控件。

  6. 视图模式

    ：采用

    Code

    code 模式图标
    、

    Design

    design 模式图标
    或

    Split

    split 模式图标
    模式查看布局。

    Split

    模式会同时显示

    Code

    和

    Design

    窗口。

  7. 缩放和平移控件

    ：控制编辑器内的预览大小和位置。

当您打开 XML 布局文件时，默认会打开设计编辑器，如图 1 所示。如需在文本编辑器中修改布局 XML，请点击窗口右上角的

Code

code 模式图标
按钮。请注意，在

Code

视图中修改布局时，

Palette

、

Component Tree

和

Attributes

窗口不可用。


提示

：您只需按

Alt + Shift + Right/Left arrow

（在 Mac 上按

Control + Shift + Right/Left arrow

），即可在设计编辑器和文本编辑器之间切换。

更改预览外观

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


图 2.

布局编辑器工具栏中用于配置布局外观的按钮

可用的按钮（对应于图 2 中的各个数字）如下：


  1. Design 和 Blueprint

    ：选择您希望如何在编辑器中查看布局。选择

    Design

    可查看布局的渲染后预览效果。选择

    Blueprint

    可仅查看每个视图的轮廓。选择

    Design + Blueprint

    可并排查看这两个视图。您还可以按

    B

    循环浏览这些视图类型。

  2. 屏幕方向和布局变体

    ：选择屏幕方向（横向和纵向），或选择应用提供备用布局的其他屏幕模式（例如夜间模式）。该菜单还包含用于

    创建新布局变体

    的命令。 您还可以按

    O

    更改屏幕方向。

  3. 设备类型和尺寸

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

    Add Device Definition

    创建新的 AVD。您可以通过拖动布局的右下角来调整设备尺寸，还可以按

    D

    循环浏览设备列表。

  4. API 版本

    ：选择预览布局时使用的 Android 版本。

  5. AppTheme

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

  6. Language

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

    Edit Translations

    。如需详细了解如何使用翻译，请参阅

    使用 Translations Editor 本地化界面

    。


注意

：除非您选择从

Layout Variants

添加新的布局文件，否则这些配置对应用的代码或清单没有任何影响。它们只会影响布局预览。

创建新布局

为应用添加新布局时，请先在项目的默认

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. 打开原始布局文件，点击窗口右上角的

    Design

    design 模式图标
    图标。
  2. 点击工具栏中的

    Orientation for Preview

    图标 (
    orientation for preview 按钮
    )。
  3. 在下拉列表中，选择建议的变体，例如

    Create Landscape Variant

    。

创建自己的布局变体

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

  1. 打开原始布局文件，点击窗口右上角的

    Design

    (
    design 模式图标
    ) 图标。
  2. 点击工具栏中的

    Orientation for Preview

    图标
    orientation for preview 按钮
    。
  3. 在下拉列表中，选择

    Create Other…

    。
  4. 在显示的对话框中，定义变体的资源限定符。 从

    Available qualifiers

    列表中选择限定符，然后点击

    Add

    用于添加限定符的按钮
    按钮。 根据需要重复此步骤以添加其他限定符。
  5. 添加完所有限定符后，点击

    OK

    。

如果同一布局有多个变体，如需在这些变体间切换，请点击

Layout Variants

图标
layout variants 按钮
并从显示的列表中选择。

如需详细了解如何为不同屏幕创建布局，请参阅

支持不同的屏幕尺寸

。

转换视图或布局

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

  1. 点击编辑器窗口右上角的

    Design

    按钮。
  2. 在

    Component Tree

    中，右键点击相应视图或布局，然后点击

    Convert view…

    。
  3. 在显示的对话框中，选择新类型的视图或布局，然后点击

    Apply

    。

将布局转换为 ConstraintLayout

为了改善布局性能，您应该将旧版布局转换为


ConstraintLayout


。

ConstraintLayout

采用基于约束条件的布局系统，让您无需使用任何嵌套视图组即可构建大多数布局。

如需将现有布局转换为

ConstraintLayout

，请执行以下操作：

  1. 在 Android Studio 中打开现有布局，然后点击编辑器窗口右上角的

    Design

    按钮。
  2. 在

    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 Guidelines 文档

的首页。

将视图添加到布局中

要开始构建布局，只需将视图和视图组从

Palette

拖动到设计编辑器中即可。将视图放置到布局中后，编辑器会显示有关该视图与布局其余部分的关系的信息。

如果您使用的是

ConstraintLayout

，则可以使用 Infer Constraints 和 Autoconnect 功能

自动创建约束条件

。

修改视图属性


图 3.


Attributes

窗口

您可以在布局编辑器右侧的

Attributes

窗口中修改视图属性。只有在设计编辑器处于打开状态时，此窗口才会显示，因此请确保您正在使用

Design

或

Split

模式查看布局。

当您选择视图时（无论是通过在

Component Tree

中点击该视图，还是在设计编辑器中点击该视图），

Attributes

窗口会显示以下内容，如图 3 所示：


  1. Declared Attributes

    部分会列出

    布局文件中指定的属性

    。如需添加属性，请点击该部分右上角的

    Add

    用于添加属性的按钮
    按钮。

  2. Layout

    部分包含视图的宽度和高度控件。如果视图位于

    ConstraintLayout

    中，该部分还会显示约束偏差，并列出相应视图使用的约束条件。如需详细了解如何使用

    ConstraintLayout

    ，请参阅

    使用 ConstraintLayout 构建自适应界面

    。

  3. Common Attributes

    部分列出了所选视图的常见属性。如需查看所有可用的属性，请展开窗口底部的

    All Attributes

    部分。
  4. 点击

    Search

    按钮可搜索特定的视图属性。
  5. 每个属性值右侧的图标指示属性值是否为资源引用。

    当属性值是资源引用时

    ，指示器是非中空的
    非中空指示器图标
    ，

    当属性值是硬编码时

    ，指示器是空的
    空指示器图标
    。这些指示器可帮助您


    一目了然地识别硬编码值


    。点击指示器（无论其处于哪种状态）会打开

    Resources

    对话框窗口，您可以在其中选择相应属性的资源引用。

  6. 属性值周围的红色突出显示表示值存在错误。 错误可能表示布局定义属性的条目无效，如图 3 中的红色突出显示所示。

    橙色突出显示表示值存在警告。例如，如果在应该使用资源引用时使用了硬编码值，就可能会出现警告。

向视图中添加示例数据

由于很多 Android 布局都依赖于运行时数据，因此在设计应用时很难直观呈现布局的外观和风格。在 Android Studio 3.2 及更高版本中，您可以从布局编辑器中向

TextView

、

ImageView

或

RecyclerView

添加示例预览数据。


注意

：当您向

View

添加示例数据时，Android Studio 会更改您的项目，就像您在使用自己的数据一样。您随后可以根据需要修改这些更改内容。

您可以右键点击其中某种视图类型，然后选择

Set Sample Data

以显示

Design-time View Attributes

窗口，如图 4 所示。

design time view attributes 窗口

图 4.


Design-time View Attributes

窗口

在

TextView

中，您可以在不同的示例文本类别之间选择。在使用示例文本时，Android Studio 会使用您选择的示例数据填充

TextView

的

text

属性。请注意，仅当

text

属性为空时，您才能通过

Design-time View Attributes

窗口选择示例文本。

包含示例数据的 text view

Figure 5.

包含示例数据的 TextView

在

ImageView

中，您可以在不同的示例图片之间进行选择。当您选择示例图片后，Android Studio 会填充

ImageView

的

tools:src

属性（如果使用支持库，则会填充

tools:srcCompat

）。

包含示例数据的 image view

Figure 6.

包含示例数据的 ImageView

在

RecyclerView

中，您可以在一组包含示例图片和文本的模板之间进行选择。使用这些模板时，Android Studio 会将

recycler_view_item.xml

文件添加到

res/layout

目录，该文件中包含示例数据的布局。Android Studio 还会将元数据添加到

RecyclerView

，以正确显示示例数据。

包含示例数据的 recycler view

Figure 7.

包含示例数据的 RecyclerView

显示布局警告和错误

布局编辑器会在

Component Tree

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

如需在编辑器下方的窗口中查看所有已知问题，请点击工具栏中的

Show Warnings and Errors

（
红色圆圈感叹号图标，指示布局错误
或
橙色三角形感叹号图标，指示布局警告
）。

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

使用 Android 8.0（API 级别 26）或 Android 支持库 26.0.0 或更高版本时，您可以按照以下步骤从数百种字体中进行选择：

  1. 在布局编辑器中，点击

    Design

    design 模式图标
    按钮以在设计编辑器中查看布局。
  2. 点击一个文本视图。
  3. 在

    Attributes

    窗口中，展开

    textAppearance

    ，然后展开

    fontFamily

    方框。
  4. 滚动到列表底部，然后点击

    More Fonts

    ，以打开

    Resources

    对话框。
  5. 在

    Resources

    对话框中，通过浏览列表或在顶部的搜索栏中输入字体来选择字体。如果您选择

    Downloadable

    下的某种字体，则可以点击

    Create downloadable font

    以在运行时加载该字体作为

    可下载字体

    ，或点击

    Add font to project

    以将 TTF 字体文件打包到 APK 中。请注意，Android 系统提供了

    Android

    下列出的字体，因此这些字体不需要下载，也不需要打包到 APK 中。
  6. 点击

    OK

    完成。