由Android官方团队带你学习Android Studio的布局编辑器
/ 今日科技快讯 /
小鹏道歉未能换来认可，小鹏汽车车主集体维权要求退车。部分小鹏汽车用户表示，自己于2018年5月订购了小鹏汽车，但是等到今年5月才提到车，新款就推出了，而且在配置方面新款更加丰富，价格却更加实惠。
/ 作者简介 /
本篇文章转载自驻坑大使的文章，分享了一篇翻译文章，关于Android Studio布局编辑器的介绍，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章。
翻译原文地址如下：
https://medium.com/androiddevelopers/android-studio-project-marble-layout-editor-608b6704957a
/ 翻译说明 /
这是 Android Studio 团队发布的一系列博客文章中的第五篇，这些博客文章深入探讨了 Project Marble 的一些细节和幕后故事。从 Android Studio 3.3 发布开始，Project Marble 是一个多版本，专注于使 IDE 的基本功能更加可靠和优雅。以下帖子由 Paris Hsu（交互设计师）代表布局编辑团队撰写。
在布局编辑器是设计工具 Android Studio 中，允许开发人员预览和构建跨越多个设备的布局之一。使用 ConstraintLayout 构建新布局时，布局编辑器功能特别强大。我们从许多应用程序开发人员那里听说他们喜欢我们在布局编辑器中引入的新功能，例如预览不同屏幕尺寸的布局或样本数据，这样可以指定占位符文本和图像。
但是，我们也收到了强烈的反馈意见，即存在一些性能和容易出错的可用性问题，这使得编辑 XML 成为唯一的前进道路，尤其是在使用 ConstraintLayout 时，这通常会使开发人员处于设计工具中无意识和尴尬的状态。
因此，我们着手解决 Project Marble 期间的这些性能和可用性问题，今天我们很高兴为您提供有关进展的最新信息。虽然本文将主要关注可用性问题，但我们希望让您了解构建性能也是 Project Marble 的重点。
实际上，设计界面在很大程度上依赖于构建速度，因为在每个鼠标上：XML 被更新，由构建处理，并加载到 Layout Lib 渲染引擎 - 模拟在JVM上的 Android Studio 中运行的 Android UI 系统。因此，我们还确保在提高可用性的所有努力中，没有任何变化影响性能。
现在让我们详细介绍一下到目前为止我们在 Android Studio 3.5 中所做的重要可用性改进以及我们的后续步骤。
/ 那我们可以做什么？ /
我们为布局编辑器设定的核心目标之一是为您提供最准确的布局预览，以便更快地进行设计迭代。考虑到这一目标，我们从应用程序开发人员的最近一系列可用性研究中获得了结果，优先考虑了问题，经过一些技术调查后，我们在 Project Marble 期间进行了以下六大优化布局编辑器：
约束可视化和选择
约束创造
约束删除
视觉刷新
设备捕捉行为
维度的维度资源
/ 改进1 - 约束可视化和选择 /
目前，存在的限制是在布局编辑器可视化两种方式：
用在设计图面上箭头＆锚
与所述属性面板上的约束部件
如下图所示：
我们从您那里学到的是，虽然当前的可视化有助于说明约束类型，约束方向和边缘值，但它有一个缺失的部分：快速识别关系的能力 - 一目了然地看到这些约束连接的概要至。我们发现，特别难以看到箭头指向复杂布局的位置，其中许多组件彼此重叠。
为了解决这个反馈，我们在Attributes面板中添加了一个 Constraints Section，它以易于理解的格式列出了当前所选UI组件的约束关系，如下所示：
您现在可以看到为此组件创建了多少约束，这些约束指向哪些组件，以及它们的约束边距或偏差。
此外，通过这个新的 Constraints Section，我们从可视化到使用更进了一步。我们想：“如果我们还允许您从列表中选择这些约束，就像从组件树中选择组件一样，该怎么办？”
这样，将在设计图面上的约束和列表上的约束之间创建心理映射，使您可以在构建布局时轻松找到约束：
通过新的选择模式，我们还解决了一些我们遇到的约束删除问题（下面的改进3中有更深入的内容）。现在，当在列表上选择约束时，您可以使用Delete键删除约束。
这里需要注意的一点是，在可用性研究中我们也注意到许多开发人员不了解设计图面上的缩放控件，如果没有放大，布局编辑器中的某些交互更难执行。我们相信，通过提供在属性面板上选择约束的替代方法，新的可视化将有助于减轻一些表面交互。然而，我们也想给一个喊出来给我们在这里的缩放控制：您可以访问他们的工具栏上，或者干脆使用键盘快捷键Ctrl键/加利福尼亚+放大，按Ctrl / CMD-缩小，按住空格键来泛：
/ 改进2 - 约束创建 /
目前，有三种方法可以在布局编辑器中创建约束：
从组件的锚点拖动到目标组件的锚点
从组件的锚点拖动到目标组件的中心
使用属性面板上约束小部件的“+”按钮
通过可用性研究，我们确定了这些工作流程中的几个难点并对其进行了一些改进。
对于交互选项1，之前在拖动时，我们使用闪烁的绿点作为您是否可以约束到该锚点的指示。我们决定去除绿点，因为它们造成了视觉混乱。我们得到的反馈是，由于点闪烁，很难说，例如，填充（约束）和非填充（非约束）锚。
因此，我们采用了依赖用户意图的系统。拖动时，我们只是隐藏您无法约束的锚点，而不是闪烁绿点，当您拖动到目标组件时，如果它们包含可约束的锚点，我们也会给它们一个蓝色重叠：
事实上，当有重叠的锚点时，蓝色叠加层特别有用; 它有助于识别您尝试约束的目标组件：
对于交互选项2，我们在将鼠标悬停在上下文菜单中的选项上时添加了鬼锚，以便直观地了解选项所指的目标组件锚点：
当它们重叠组件时特别有用：
最后，对于交互选项3，我们从应用程序开发人员那里听说他们由于缺乏信任而不使用约束小部件，因为他们与小部件交互后发生的事情几乎没有视觉/系统反馈。为了解决这个问题，我们希望新添加的约束部分（改进1）也可以提高使用窗口小部件创建约束的可学习性。我们将其视为一种方法，可以在您与窗口小部件交互后立即提供有关哪些约束的反馈：
/ 改进3 - 约束删除 /
以前，要在布局编辑器中删除约束，请单击该约束的锚点，它将被删除。
虽然这种约束删除快速而简单，但我们从开发人员那里学到的是他们发现它容易出错。在可能包含较小组件的复杂布局中，许多开发人员在尝试选择组件时会意外删除约束，尤其是在屏幕缩小时。
因此，通过选择约束的新功能，我们还更新并 改进了删除约束的方式：
选择约束，然后使用Delete键
或者，我们为旧的删除模型添加了一个键盘修改器：按住Ctrl / Cmd并将鼠标悬停在锚点上，约束将变为红色，表示单击时将删除它
/ 改进4 - 视觉刷新 /
在 Project Marble 的精神中，我们还为布局编辑器提供了可视化刷新，以获得更加一致的调色板：
我们特别专注于清理 Blueprint 模式，因为我们从开发人员那里听说他们发现这个仅限轮廓的视图在制作布局编辑时非常有用，而不会分散 UI 内容。我们更新了颜色饱和度以更具凝聚力，摆脱了高对比度的白线，并为之前为空的组件添加了文本支持。
/ 改进5 - 设备捕捉行为 /
使用 ConstraintLayout 最有价值的原因之一是确保您的应用程序布局在多个设备上看起来很棒，而布局编辑器通过在工具栏上循环浏览不同的设备，为您提供了一种简单的方法。我们还允许自定义尺寸捕捉。
但是，当我们在 Project Marble 期间查看此功能时，我们意识到我们的默认设备列表已经很老了，并且自定义大小的捕捉行为不是很直观。因此，我们在这两个方面进行了改进，以包括更新的设备尺寸，始终显示调整大小的手柄，并改善捕捉。我们还添加了一个蓝色覆盖图，以指示常见设备尺寸的区域，从小型，普通型到超大型。
/ 改进6 - 保证金的维度资源 /
最后但并非最不重要的是，我们更新了约束小部件和默认边距下拉以允许使用维度资源作为边距：我们为它们添加了“@ ...”，虽然设计在不断发展，但这是当前的迭代：
/ 下一步是什么？ /
项目并未就此结束！我们有很多计划继续支持和改进布局编辑器的体验。当然，直接用XML编辑布局文件仍然只需点击即可，但我们希望您在布局编辑器中看到一些有用的交互，这可以在 Android Studio 中创建和编辑布局时提高生产力。
推荐阅读：
欢迎关注我的公众号
学习技术或投稿
长按上图，识别图中二维码即可关注