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

    完成。