共计 5182 个字符，预计需要花费 13 分钟才能阅读完成。
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 里或者下方留言区提交您的倡议。咱们将会持续优化编辑器的性能，继续改良修复问题，并一直听取、驳回您的倡议和反馈。
