Android Studio 4.1 中 Design Tools 的改进

Android Studio 中的 Design Tools Suite 提供了一整套开发工具包，使得开发者们能高效地进行 UI 设计、原型设计、构建和调试代码。这些工具包括 Layout Editor (排版编辑器)、Navigation Editor (Navigation 编辑器)、Motion Editor (动做编辑器)、Resource Manager (资源管理器) 和 Layout Inspector (布局检查器) 等。在 Android Studio 4.1 的迭代中，咱们将重心侧重于听取并处理来自用户的反馈，并以此做为依据对现有工具进行改善，最终咱们不只从新设计了现有的一些交互方式，还新增了一些遗漏的功能。本篇文章会介绍咱们针对 Android Studio 在 UX 方面作的一些改进，本文中所提到的内容您也能够在 What’s new in Design Tools Talk 这一视频中进行查看。

https://www.bilibili.com/vide...

Layout editor (布局编辑器)

更好的 ConstraintHelpers 支持

ConstraintLayout 1.1 首次引入了 Barriers 和 Guidelines 这样的 ConstraintHelper，它们可让一个不可见的 view 引用多个 widget，并在无需重复编写代码的条件下对 widget 进行分组对齐 (group-align)。在 ConstraintLayout 2.0 版本中，咱们继续扩展了 helper 的概念: 添加了诸如 Flow 和 Groups 这样的 VirtualLayouts，来容许将某些行为同时做用到全部被引用的 widget 上。例如，使用 Flow，能够很轻松地经过全局调整界面间的间隔 (gap) 和环绕样式 (wrap style) 来对 view 进行水平或者垂直方向的排版。

在 Android Studio 4.1 中，咱们但愿可以在 IDE 中很好地支持这些 helper 的功能，从而达到更好的交互体验。所以，咱们以用户的视角，摸索出了一套从找到相应的功能、自主进行建立、再对所建立出的项目进行更改这一整个使用历程，以此为基础，咱们进一步去着手提升每一步操做过程的使用效率。例如，咱们在 Palette 中添加了一个 Helpers 栏，以便让用户可以轻松查找并使用那些可用的 helper 工具。

Palette 中新增 Helpers 一栏

当建立某一 helper 时，您能够选择多个 view，右击来选择一个 helper，Android Studio 会自动根据用户所选添加正确的 id。

多选状况下的 helper 建立

针对基于 helper 的操做，咱们但愿 Flow 的功能更易于使用，所以在属性面板 (property panel) 中扩展了一些经常使用的属性，尤为针对于 Flow。例如，快速对齐的按钮上增长了相应的指示图标，以及增长了用于快速从新排列 view 的 Reference Views 栏。

经过新的属性面板选项操做 helper

设计时 (Design-time) 的属性开关

Android Studio 提供了各类 工具属性，它们都是 android:tools 命名空间下的 XML 属性，使用它们能够启用设计时 (design-time) 的一些功能 (例如展现 fragment 的布局)。这些属性在构建应用时会被删除，它们仅被用于设计/开发中，所以对于生成的 APK 大小或者运行时行为不会形成任何影响。

在构建 UI 过程当中，tools:visibility 和用于绝对定位的 tools:layout_editor_absoluteX 和 tools:layout_editor_absoluteY 是最为普遍使用的工具属性，前者容许设计人员对 UI 进行临时的显示或隐藏操做，后者则能够在 Layout Editor 中设置约束以前对界面进行精准定位。然而，从对用户用例的实际观察中咱们发现，很难判断 view 在什么时候或者是否设置了工具属性，所以常常出现用户在 Layout Editor 中所见到的预览效果和在模拟器或真机上渲染出来的效果有着很大差别的情况。例如，在下面的截图中，右侧一列的图片是使用绝对定位的，即便它们在 Layout Editor 的预览中看起来没什么问题，但在模拟器中，它们在屏幕左侧所有重叠在了一块儿。

由于工具属性的关系，致使 Layout Editor 中的预览效果和模拟器的渲染效果有差别

为了解决这一问题，咱们决定在 Layout Editor 的设计面板右上角增长一个开关，经过它用户能够轻松地切换 tools:visibility 和 absolute positioning 两种状态。

使用新的工具属性开关

经过这一开关，咱们想为用户提供更精准的、非设计时 (non-design-time) 的渲染效果，并让用户可以意识到是否正在使用这些工具属性。

在 Component Tree 中控制 Visibility 属性

正如上一节所说，Visibility (可见性) 是 view 的一个很是经常使用且重要的属性，尤为是当您须要根据不一样的条件和特定的逻辑来显示/隐藏某一 UI 时，好比只容许已经过验证的用户查看相应用户数据这一场景，它就显得格外有用。所以，咱们但愿经过提供一种快速的方法来轻松地在 Layout Editor 中设置 visibility 的 show/hide/gone (显示/隐藏/移除) 三种状态，从而优化 visibility 属性。

在 Component Tree 中使用新的 visibility 属性控制器

从 4.1 版本开始，您可以在 Component Tree 一栏中的任何一个 view 旁边，使用 visibility 属性选择器 (visibility control picker) 对该属性进行更改。这样一来，您只须要看一眼 Component Tree 的显示状态，就能了解到这些 view 的 visibility 状态，而后能够根据需求对 UI 作出相应的更改。

Component Tree 使用图标展现不一样的 visibility 状态

咱们同时提供了 tools 和 android 两个 visibility 的命名空间，以覆盖不一样的用户需求。这里要注意的是，在设计时 (design-time) 中，tools 命名空间会覆盖 android 命名空间下的 visibility 属性，这一行为也会在控件上反映出来 — 若是您设置了 tools:visibility，它会在 UI 上以高优先级体现出来。例如，在下面的截图中，student 设置了 android:visibility = visible 和 tools:visibility = gone，这种状况下 tools:visibility 的优先级更高，便如下图中的形式体现了出来。

tools 覆盖了 android 命名空间下的 visibility 属性

键盘快捷键和映射的设置

咱们都认识到键盘快捷键在提升生产力和开发效率上的重要性。在 Studio 4.1 版本中，咱们对 Design Tools Suite 中全部的快捷键 进行了从新审视，并将它们都注册到了 Preferences > Keymap 中，您能够探索相应的快捷键设置，也能够对其进行更改，从而使其成为最适合您工做方式的开发工具。

包含 design editor 快捷键的键盘映射设置

Transform 面板

有一些开发者反馈，但愿可以在处理 view 的 Transform 属性时提升操做的精度，咱们在这一版中也对此进行了改进。为了更轻松地调整 view 的 Transform 属性，咱们添加了可视化显示功能来实时展现出 view 的 3D 转换效果，并增长一个滑块来进行更精细的操做。在属性面板中，一旦选择一个 view 以后，便能在 "Transform" 中对控件进行调整。

在 Transform 面板中旋转查看 service dog 图片

Resource manager (资源管理器)

间距 Drawable 资源选择器

在 Android Studio 3.6 版本中，咱们引入了 Color picker resource tab (拾色器资源选项卡)，它可以帮助您快速更新应用中的色值。因为拾色器模式的交互提供了从文本 (代码) 到视觉 (颜色) 的无缝过渡，所以这一功能很受欢迎。用户能够在代码编辑器不改变上下文的状况下，同时使用图形化界面 (GUI) 来提升开发效率。在 4.1 版本中，咱们将相同的理念引入到了 Drawable 中，当项目文件包含 Drawable 资源时，您会发现一个 gutter icon (间距图标) 出如今编辑器旁，经过它能够快速更改 Drawable 资源。此外，单击 "browse" 还会打开资源对话框，以便进行更普遍的搜索。

Drawable 选择器

自动下载 Vector asset 中的图标资源

这一更新可能并不起眼，可是它的做用却很大。咱们以前收到了不少关于 Material.io 中的 Material 图标同 Vector Asset wizard 中的图标不一致的抱怨，引发不一致的主要缘由是 Android Studio 的发布节奏和 Material 的更新节奏不一致。为了解决这一问题，咱们精简了更新流程，如今每次 Material 更新其图标库时，Vector Asset wizard 也会在后台进行自动更新。所以，如今您能够在 wizard 中随时使用最新版本的 Material 图标啦！🎉

Navigation editor (Navigation 编辑器)

在 Split View 中使用图状结构展现目的地 (Destination)

在 Android Studio 3.6 版本中，引入了切换设计文件编辑模式的新方式 Split View，这一模式为咱们优化导航文件和 Navigation editor (导航栏编辑器) 的并排视图创造了机会。优化方式之一即是在 Navigation Editor 中使用组件树 (Component Tree) 的结构来展现目的地图。这样的方式可让用户对要选择的目的地 (包括涉及到的嵌套层级关系) 和操做一目了然，并可以在 split 模式中将所选择的内容 1:1 地映射到代码中。

在 Split View 中以图状结构展现目的地

顺道补充一下，这种方式对咱们代码库的健康颇有帮助，由于它能够在咱们全部的设计工具中复用通用组件。

Deeplink 对话框支持新属性，并支持自动填充

Navigation 2.3.0 为 deeplink 引入了两种新的属性类型: MIME 和 Action。为了使 Android Studio 的设计工具支持这一功能，咱们在 Navigation Editor 中的建立 DeepLink 对话框中加入了这两种属性，并增长了自动填充和验证的功能。

Motion editor (动做编辑器)

动做关键帧路径的图形化编辑

MotionLayout 支持不一样类型的关键帧，其中最经常使用的类型是 Postion keyframes (<KeyPosition …/>)，它可以让开发者在 widget 动画进行过程当中修改特定时间下的路径。经过 4.0 版本中引入的 Motion Editor，用户能够直接在界面上经过拖动来操做这些关键帧。可是，此种方式的问题在于，不一样的 keyframe 设置方式，会致使最终应用于 keyframe 的属性具备不一样的含义。例如，将 keyframe 向左拖动 20%，但这 20% 没有上下文可以肯定它是相对于路径的 20% 仍是相对于父布局的 20%。为了解决这一问题，4.1 版本中，当在设计界面中进行拖动时，咱们添加了一个浮层，它实时展现基于当前坐标系以及坐标轴的坐标值，这样每次开发者须要手动编辑 keyframe 时，就能够更好地了解它们的边界、坐标轴和方向。

展现关键帧位置的网格和坐标值

Transition 曲线编辑器

同上述 Layout Editor 中 Transform 面板相似，咱们也收到了不少开发者的反馈，认为用纯数字来制定 Transition 曲线很困难。所以，在 4.1 版本中，咱们为 Motion Editor 添加了对 GUI 曲线编辑器的支持，容许开发者经过可视化的方式和控制手柄来完善想要的曲线效果。

使用 Transition 曲线编辑器

咱们期待着您可以试用这些新的功能。咱们还会继续收集反馈意见，以此来完善咱们的产品。Design Tools Suite 的目标是经过在一些合适的地方提供可视化或 GUI 支持来不断充实、补充和提高您的编码体验。在本文中提到的一些改进也将会被一样应用到 Jetpack Compose 中。例如，一些选择器的体验 (例如 visibility 状态的切换、间距 Drawable 资源选择器) 是咱们能够进一步探索并优化的地方，由于它们是基于上下文、非分散注意力的，同时它们提供了一种特有的方式将设计工具应用到开发过程当中。

同以往同样，若是您在使用这些工具时遇到任何问题，或者有一些提高您工做效率的新想法，请在咱们的 Issue Tracker 里或者下方留言区提交您的建议。咱们将会继续优化编辑器的性能，持续改进修复问题，并不断听取、采纳您的建议和反馈。