使用布局编辑器构建界面

在布局编辑器中，您可以通过将界面元素拖动到可视设计编辑器来快速构建布局，无需手动编写布局XML。该设计编辑器可在各种​​Android设备和版本上预览布局，并且您可以动态地调整布局大小以确保它可以很好地适应不同界面尺寸。

布局编辑器在使用ConstraintLayout构建新布局时尤为强大，ConstraintLayout是支持库中提供的布局管理器，它与Android 2.3（API级别9）及更高版本兼容。

本页概述布局编辑器。如需了解有关布局基础知识的更多信息，请参阅布局。如需了解有关如何使用ConstraintLayout构建布局的更多信息，请参阅使用ConstraintLayout构建自适应界面。

布局编辑器简介

当你打开XML布局文件时将显示布局编辑器。

与图1中数字相对应的编辑器区域如下：

1. 工具箱：您可以拖动到布局内的视图和视图组列表。
2. 组件树：查看布局的层次结构。
3. 工具栏：用于在编辑器中配置布局外观和更改某些布局属性的按钮。
4. Design编辑器：Design视图布局和Blueprint视图布局之一或两者。
5. 属性：针对选定视图属性的控件。
   
   图1.布局编辑器

当你打开XML布局文件时，系统默认情况下打开Design编辑器（如图1所示）。

要在文本编辑器中编辑布局XML，请点击窗口底部的文本标签。在文本编辑器中时，通过点击窗口右侧的预览，您还可以查看调色板，组件树和设计编辑器。文本编辑器不提供属性窗口。

提示：通过按Alt + Shift +向右/向左箭头（在Mac上按Control + Shift +向右/向左箭头），您可以在设计和文本编辑器之间进行切换。

更改预览外观

设计编辑器顶行的按钮让您可以在编辑器中配置布局的外观。您也可在文编辑器的预览窗口中打开此工具栏。

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

与图2中数字相对应的按钮如下：

1. Design and blueprint：选择在编辑器中查看布局的方式;可以选择设计视图（布局的真实预览），蓝图视图（只显示每个视图的轮廓），或选择设计+蓝图，同时并排查看两个视图。

   提示：按B循环浏览这些视图。

2. Screen orientation and layoutvariants：在横向模式和纵向模式屏幕方向之间选择，或选择您的应用提供了Alternative layouts的其他界面模式，例如夜间模式。 此菜单还包含用于新建布局不同类型的命令。

3. Device type and size：选择设备类型（手机/平板电脑、Android TV 或 Wear
   OS）和界面配置（尺寸和密度）。 您可以从多个预配置的设备类型和您自己的 AVD 定义中进行选择，或从列表中选择 Add Device Definition 新建 AVD 定义。
   提示：您可以通过拖动布局的右下角来调整设备尺寸。

4. API version：用于选择要在上面预览布局的 Android 版本。

5. App theme：用于选择将应用到预览的 UI 主题背景。 （此按钮仅对支持的布局样式有效；因此，此列表中的许多主题背景会导致错误。）

6. Language：用于选择显示界面字符串的语言。 此列表仅显示字符串资源中可用的语言。 如果您要修改译文，请从下拉菜单中点击 Edit Translations（请参阅使用 Translations Editor 对界面进行本地化）。

注：这些配置对应用的代码或显示没有任何影响（除非您选择从Layout Variants添加新的布局文件）;它们仅影响布局预览。

创建新布局

为应用添加新布局时，首先在项目的默认layout/目录中创建一个布局文件，以便它适用于所有设备配置。在拥有默认布局后，您可以针对特定设备配置（如超大界面）创建布局变型。

可通过几种不同的方式创建新布局，具体取决于您的项目窗口视图，但以下步骤可从任意视图中执行：

1. 在项目窗口中，点击您要在其中添加布局的模块（如app）。
2. 在主菜单中，选择File > New > XML > Layout XML File。
3. 在出现的对话框中，输入文件的名称，根布局标签以及布局所属的源集。然后点击完成。

下面是用于创建新布局文件的其他几种方式（尽管显示的对话框各不相同）：

• 如果您已经在Project窗口中选择项目视图：打开您的应用模块的res目录，右键点击您想要向其添添布局的布局目录，然后点击New > Layout resource file。

如果您已在Project窗口中选择Android视图：右键点击布局文件夹，然后选择New > Layout resource file。

创建不同类型布局

如果您已有布局，并想要创建备用版本以针对不同界面尺寸或屏幕方向优化布局，则执行以下步骤：

1. 打开原始布局文件，并确保您查看的是设计编辑器（点击窗口底部的设计标签）。
2. 点击Orientation for Preview
   。在下拉列表中，点击建议的不同类型（如Create Landscape Variant）并完成创建，或点击创建其他并继续执行下一步。
3. 在显示的对话框中，您只需要目录名称定义资源限定符。您可以在目录名称中输入资源限定符，或从可用限定符列表中选择（一次选择一个），然后点击添加
   。
4. 在添加所有限定符后，点击确定。

如果您有相同布局的多个变体，可以通过点击布局变体时显示的列表，在这些变体之间轻松切换 。

如需了解有关如何创建不同屏幕布局的详细信息，请参阅请立即获取iTunes不同屏幕尺寸。

转换视图或布局

您可以将一种视图转换成另一种视图，还可将一种布局（视图组）转换成另一种布局。

1. 点击编辑器窗口底部的Design标签。
2. 在Component Tree中，右键点击视图或布局，然后点击Convert view。
3. 在出现的对话框中，选择新的视图或布局类型，然后点击应用。

将布局转换为ConstraintLayout

ConstraintLayout 是约束布局库中提供的一个视图组，其包含在Android Studio 2.2及更高版本中。它是使用布局编辑从头开始构建的，因此，所有功能均可通过Design编辑器访问，您无需手动编辑XML ConstraintLayout最出色之处是基于约束的布局系统，让您无需嵌套任何视图组即可构建大多数布局。

为提升布局性能，您应将较早的布局转换为ConstraintLayout。

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

1. 在Android Studio中打开现有布局并点击编辑器窗口底部的Design标签。
2. 在Component Tree窗口中，右键点击布局，然后点击将布局转换为ConstraintLayout。

专用于将布局转换成ConstraintLayout的命令在推断约束和保持布局方面比上一部分中介绍的简单转换视图命令更智能。

如需了解有关如何使用ConstraintLayout构建布局的更多信息，请参阅使用ConstraintLayout构建自适应界面。

在工具箱中查找项目

要在Palette中按名称搜索视图或视图组，请点击工具箱顶部的Search 按钮，或在面板窗口处于活动状态时直接开始键入项目的名称。

您可以在Palette的Common类别中找到常用项目。要向该类别添加项目，请右键点击Palette中的视图或视图组，然后点击上下文菜单中的收藏夹。

从工具箱打开文档

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

要打开视图或视图组的材料指导方针文档，请在Palette中右键点击该界面元素，并从上下文菜单中选择材料指南。如果该项目不存在任何具体条目，则此命令会打开材料指导方针文档的主页。

将视图添加到布局

要开始构建布局，只需将Palette中的视图和视图组拖动到Design编辑器。将视图置于布局中时，编辑器会显示有关视图与布局其余部分关系的信息。

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

编辑视图属性

您可以在属性窗口（在布局编辑器的右侧）中编辑视图属性，而无需在XML中编辑。此窗口仅在打开设计编辑器时可用，因此，请确保您已选择窗口底部的设计标签。

无论您是通过在组件树还是在设计编辑器中点击来选择视图，属性窗口都会显示以下内容，如图3中所示：

1. 包含宽度/高度样式，外边距和偏差控件的视图检查器（只能用于ConstraintLayout中的视图）。如需了解详细信息，请参阅使用ConstraintLayout构建自适应界面。
2. 选择视图的常用属性列表。要查看所有可用属性，请点击窗口顶部的View all attributes 。
3. 您已选的最常用属性。要添加属性，请点击View all attributes ，然后点击将鼠标悬停在属性名称左侧时出现的星标。

要查找特定视图属性，点击View all attributes 然后点击窗口顶部的搜索 。
图3. 属性窗口

在视图中添加示例数据

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

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

在将鼠标指针悬停在某视图上时，设计时属性按钮 会出现在设计窗口的视图下方。点击此按钮可显示Design-time View Attributes窗口，如图4所示。

图4. 设计时视图属性窗口

在TextView中，你可以选择不同的示例文本类别。使用示例文本时，Android Studio会使用您选择的示例数据填充TextView的text属性。请注意，仅当text属性为空时，才可通过设计时视图属性窗口选择示例文本。

图5.带有示例数据的TextView

在ImageView中，你可以选择不同的示例图像。在选择示例图像时，Android Studio会填充ImageView的tools:src属性（或tools:srcCompat，如果使用支持库）。

图6.带有示例数据的ImageView

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

图7.带有示例数据的RecyclerView

显示布局警告和错误

如果在您的布局中检测到任何问题，将在Component Tree 中通过在对应视图旁显示感叹号图标（ 或）进行指示。要查看错误详情，点击该图标。

要在编辑器下方的窗口内查看所有已知问题，点击工具栏中的Show Warnings and Errors （ 或）。

您还可以在该窗口中启用显示Show issues on the preview，该功能会向预览中的每个对应视图添加警告或错误图标（仅适用于设计视图，不适用于蓝图视图）。

下载字体并将它们应用于文本

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

1. 在布局编辑器中，点击Design标签以在Design编辑器中查看您的布局。
2. 点击Text 视图。
3. 在Attributes窗口中，展开textAppearance，然后点击以展开fontFamily方框。
4. 滚动到列表底部并点击More Fonts 以打开Resources 对话框。
5. 在Resources 对话框中，通过浏览列表或在顶部的搜索栏中键入信息来选择字体。如果您选择一个列于Downloadable之下的字体，则可点击 Create downloadable font 以在运行时加载该字体（作为可下载字体），或点击 Add font to project 到项目以将TTF字体文件打包到您的APK中。（列于Android之下的字体是Android系统中提供的字体，因此它们无需下载或打包到您的APK之中。）
6. 点击确定。