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 裏或者下方留言區提交您的建議。咱們將會繼續優化編輯器的性能，持續改進修復問題，並不斷聽取、採納您的建議和反饋。