【译】Android Studio Project Marble：布局编辑器

翻译说明:

原标题: Android Studio Project Marble: Layout Editor

原文地址: medium.com/androiddeve…

原文做者: Paris Hsu

这是 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. 约束可视化和选择
2. 约束创造
3. 约束删除
4. 视觉刷新
5. 设备捕捉行为
6. 维度的维度资源

改进＃1 - 约束可视化和选择

目前，存在的限制是在布局编辑器可视化两种方式：

(1) 用在设计图面上箭头＆锚

(2) 与所述属性面板上的约束部件，以下图所示：

咱们从您那里学到的是，虽然当前的可视化有助于说明约束类型，约束方向和边缘值，但它有一个缺失的部分：快速识别关系的能力  - 一目了然地看到这些约束链接的概要至。咱们发现，特别难以看到箭头指向复杂布局的位置，其中许多组件彼此重叠。

为了解决这个反馈，咱们在Attributes面板中添加了一个 Constraints Section，它以易于理解的格式列出了当前所选UI组件的约束关系，以下所示：

您如今能够看到为此组件建立了多少约束，这些约束指向哪些组件，以及它们的约束边距或误差。

此外，经过这个新的 Constraints Section，咱们从可视化到使用更进了一步。咱们想：“若是咱们还容许您从列表中选择这些约束，就像从组件树中选择组件同样，该怎么办？”

这样，将在设计图面上的约束和列表上的约束之间建立心理映射，使您能够在构建布局时轻松找到约束：

经过新的选择模式，咱们还解决了一些咱们遇到的约束删除问题（下面的改进＃3中有更深刻的内容）。如今，当在列表上选择约束时，您可使用Delete键删除约束。

这里须要注意的一点是，在可用性研究中咱们也注意到许多开发人员不了解设计图面上的缩放控件，若是没有放大，布局编辑器中的某些交互更难执行。咱们相信，经过提供在属性面板上选择约束的替代方法，新的可视化将有助于减轻一些表面交互。然而，咱们也想给一个喊出来给咱们在这里的缩放控制：您能够访问他们的工具栏上，或者干脆使用键盘快捷键Ctrl键/加利福尼亚+放大，按Ctrl / CMD-缩小，按住空格键来泛：

改进＃2 - 约束建立

目前，有三种方法能够在布局编辑器中建立约束：

1. 从组件的锚点拖动到目标组件的锚点
2. 从组件的锚点拖动到目标组件的中心
3. 使用属性面板上约束小部件的“+”按钮

经过可用性研究，咱们肯定了这些工做流程中的几个难点并对其进行了一些改进。

对于交互选项＃1，以前在拖动时，咱们使用闪烁的绿点做为您是否能够约束到该锚点的指示。咱们决定去除绿点，由于它们形成了视觉混乱。咱们获得的反馈是，因为点闪烁，很难说，例如，填充（约束）和非填充（非约束）锚。所以，咱们采用了依赖用户意图的系统。拖动时，咱们只是隐藏您没法约束的锚点，而不是闪烁绿点，当您拖动到目标组件时，若是它们包含可约束的锚点，咱们也会给它们一个蓝色重叠：

事实上，当有重叠的锚点时，蓝色叠加层特别有用; 它有助于识别您尝试约束的目标组件：

对于交互选项＃2，咱们在将鼠标悬停在上下文菜单中的选项上时添加了鬼锚，以便直观地了解选项所指的目标组件锚点：

当它们重叠组件时特别有用：

最后，对于交互选项＃3，咱们从应用程序开发人员那里据说他们因为缺少信任而不使用约束小部件，由于他们与小部件交互后发生的事情几乎没有视觉/系统反馈。为了解决这个问题，咱们但愿新添加的约束部分（改进＃1）也能够提升使用窗口小部件建立约束的可学习性。咱们将其视为一种方法，能够在您与窗口小部件交互后当即提供有关哪些约束的反馈：

改进＃3 - 约束删除

之前，要在布局编辑器中删除约束，请单击该约束的锚点，它将被删除。

虽然这种约束删除快速而简单，但咱们从开发人员那里学到的是他们发现它容易出错。在可能包含较小组件的复杂布局中，许多开发人员在尝试选择组件时会意外删除约束，尤为是在屏幕缩小时。

所以，经过选择约束的新功能，咱们还更新并 改进了删除约束的方式：

1. 选择约束，而后使用Delete键
2. 或者，咱们为旧的删除模型添加了一个键盘修改器：按住Ctrl / Cmd并将鼠标悬停在锚点上，约束将变为红色，表示单击时将删除它

改进＃4 - 视觉刷新

在 Project Marble 的精神中，咱们还为布局编辑器提供了可视化刷新，以得到更加一致的调色板：

咱们特别专一于清理 Blueprint 模式，由于咱们从开发人员那里据说他们发现这个仅限轮廓的视图在制做布局编辑时很是有用，而不会分散 UI 内容。咱们更新了颜色饱和度以更具凝聚力，摆脱了高对比度的白线，并为以前为空的组件添加了文本支持。

改进＃5 - 设备捕捉行为

使用 ConstraintLayout 最有价值的缘由之一是确保您的应用程序布局在多个设备上看起来很棒，而布局编辑器经过在工具栏上循环浏览不一样的设备，为您提供了一种简单的方法。咱们还容许自定义尺寸捕捉。可是，当咱们在 Project Marble 期间查看此功能时，咱们意识到咱们的默认设备列表已经很老了，而且自定义大小的捕捉行为不是很直观。所以，咱们在这两个方面进行了改进，以包括更新的设备尺寸，始终显示调整大小的手柄，并改善捕捉。咱们还添加了一个蓝色覆盖图，以指示常见设备尺寸的区域，从小型，普通型到超大型。

改进＃6 - 保证金的维度资源

最后但并不是最不重要的是，咱们更新了约束小部件和默认边距下拉以容许使用维度资源做为边距：咱们为它们添加了“@ ...”，虽然设计在不断发展，但这是当前的迭代：

下一步是什么？

项目并未就此结束！咱们有不少计划继续支持和改进布局编辑器的体验。固然，直接用XML编辑布局文件仍然只需点击便可，但咱们但愿您在布局编辑器中看到一些有用的交互，这能够在 Android Studio 中建立和编辑布局时提升生产力。

若是您在使用布局编辑器时遇到任何问题，或者对能够提升工做效率的新功能有所了解，请提交错误消息。咱们将继续优化编辑器的性能，修复错误并整合您的建议和反馈。

欢迎关注 Kotlin 中文社区！

中文官网：www.kotlincn.net/

中文官方博客：www.kotliner.cn/

公众号：Kotlin

知乎专栏：Kotlin

CSDN：Kotlin中文社区

掘金：Kotlin中文社区

简书：Kotlin中文社区