【譯】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中文社區