Android Studio Design Tools 中的 UX 更改

在这篇文章中，我们将介绍 Android Studio 3.6 中 Design Editor (设计编辑器) 的新功能，与您分享促成这些体验更改的一些细节，并向您展示用它可以来做哪些有趣的新操作。以下文章是由 Layout Editor 团队的软件工程师 Amaury Medeiros 和 UX 设计师 Paris Hsu 撰写的。

介绍 Design Tools 中的 Split View

在 Android Studio 3.6 中，我们对设计文件的编辑模式进行了一些改动，相较于之前在左下角切换 Text 或 Design 的编辑模式 (图 1)，我们将其整合为一个统一的设计编辑器，它拥有三种编辑模式选项 (图 2)，请继续阅读本文以了解我们所做的更改。

图 1: Design / Text 视图 (更改前)

通过点击编辑器右上角的相应按钮或者使用快捷键 (如果使用的是 Mac，则快捷键为 Ctrl Shift Left/Right 方向键，如果是其他系统，则为 Alt Shift Left/Right 方向键) 来选择以下模式:

Code: 提供 XML 文件编辑器的功能；
Design: 由包含设计编辑器 (比如导航栏、布局栏) 的视图组成，可以使用它来以所见即所得的方式编辑文件；
Split: 同时显示 Code 和 Design，这样您就可以在编辑文本的同时进行效果图的预览。

之前版本的用户可能会发现，新的 Split view 的使用体验与一边打开预览窗口、一边编辑 XML 文件的体验类似。但是，我们会在之后介绍一下它们的区别。

保存每个文件的状态

上面提到过: Split 视图会一边展示 Code 视图、另一边展示对应的 Design 视图。如果您先使用 Split 视图对一个资源文件进行预览，然后切换到 Design 模式，使用所见即所得的方式编辑资源文件，我们则会保留 Design Editor (设计编辑器) 的状态，如缩放级别和已选择条目等。

我们也了解到，并行编辑多个资源文件是一种常见的情况，每个文件都会有不同的编辑需求，比如您可能需要以 Design 模式编辑其中一个文件，然后以 Split 模式编辑另一个文件，再以 Code 模式编辑第三个文件。现在编辑器会保存每个文件的编辑状态，所以您可以不用担心丢失预览状态，而自由地在文件之间进行切换。

上次的编辑模式会被记忆在之前的版本中，每次文件的切换都会重置 Preview 的窗口状态。试想一下，如果您在 Text 模式下编辑文件 A，进而在 Preview 窗口下进行了缩放操作。然后以 Design 模式切换到了 B 文件，当再次切换回文件 A 的时候，Preview 窗口的状态就会被重置到跟文件 B 一样，如图 4 所示:

图 4: 切换文件后失去缩放等级的 Preview 面板移除了 Preview 工具窗口 (tool window)

现在您可以使用新增加的 "Split 视图" 来预览资源文件，所以就不再需要 (在 Text 模式下的) Preview 工具窗口了。之前每次使用 Text 模式打开资源文件时，我们都会显示这个面板。如果将编辑器切换到了 Design 模式或者打开了非资源文件，我们将会隐藏这个工具窗口 (图 5)。由于 Android Studio / IntelliJ 中没有类似功能的工具窗口，所以这种功能可能会让用户感到困惑。

图 5: 在文件切换时消失的 Preview 工具窗口 Split 视图具备全面的工具窗口

说到工具窗口，Split 视图包含了在 Design 模式下可用的所有工具。在之前的版本中，如果您想看到全部的组件树，则可能需要在 Text 模式 Preview 工具窗口和 Design 模式中来回切换才能完成。

对 Navigation Editor 的支持

除了上面提到的可用性的更改之外，我们还希望改善我们的预览功能，让其能够对更多类型的资源文件提供支持。您现在可以使用新的 Split 模式打开导航栏文件并对其进行编辑，同时还能对其进行预览。这对于编辑大且复杂的图形时尤其有用。例如，如果要剪辑的图形有多层嵌套，您可能需要在 "Design" 和 "Text" 编辑器中多次来回切换，才能将代码中特定片段与其对应的图形部分进行匹配，如图 6 所示。

而现在，您只需要单击 XML 部分上的标签就可以在图形界面上显示该代码片段，即使该片段位于嵌套的图层内也可以做到，如图 7 所示。类似地，您可以通过在编辑器的图形中选择某一个组件，就可以在导航图中轻松定位到相应的元素。对文本的选择会跳转到相应的 XML 标签中。