在這篇文章中，我們將介紹 Android Studio 3.6 中 Design Editor (設(shè)計編輯器) 的新功能，與您分享促成這些體驗更改的一些細(xì)節(jié)，并向您展示用它可以來做哪些有趣的新操作。以下文章是由 Layout Editor 團(tuán)隊的軟件工程師 Amaury Medeiros 和 UX 設(shè)計師 Paris Hsu 撰寫的。

介紹 Design Tools 中的 Split View

在 Android Studio 3.6 中，我們對設(shè)計文件的編輯模式進(jìn)行了一些改動，相較于之前在左下角切換 Text 或 Design 的編輯模式 (圖 1)，我們將其整合為一個統(tǒng)一的設(shè)計編輯器，它擁有三種編輯模式選項 (圖 2)，請繼續(xù)閱讀本文以了解我們所做的更改。

圖 1: Design / Text 視圖 (更改前)

圖 2:?Split 視圖 (更改后)

通過點擊編輯器右上角的相應(yīng)按鈕或者使用快捷鍵 (如果使用的是 Mac，則快捷鍵為 Ctrl + Shift + Left/Right 方向鍵，如果是其他系統(tǒng)，則為 Alt + Shift + Left/Right 方向鍵) 來選擇以下模式:

? Code: 提供 XML 文件編輯器的功能；

? Design: 由包含設(shè)計編輯器 (比如導(dǎo)航欄、布局欄) 的視圖組成，可以使用它來以所見即所得的方式編輯文件；

? Split: 同時顯示 Code 和 Design，這樣您就可以在編輯文本的同時進(jìn)行效果圖的預(yù)覽。

之前版本的用戶可能會發(fā)現(xiàn)，新的 Split view 的使用體驗與一邊打開預(yù)覽窗口、一邊編輯 XML 文件的體驗類似。但是，我們會在之后介紹一下它們的區(qū)別。

保存每個文件的狀態(tài)

上面提到過: Split 視圖會一邊展示 Code 視圖、另一邊展示對應(yīng)的 Design 視圖。如果您先使用 Split 視圖對一個資源文件進(jìn)行預(yù)覽，然后切換到 Design 模式，使用所見即所得的方式編輯資源文件，我們則會保留 Design Editor (設(shè)計編輯器) 的狀態(tài)，如縮放級別和已選擇條目等。

我們也了解到，并行編輯多個資源文件是一種常見的情況，每個文件都會有不同的編輯需求，比如您可能需要以 Design 模式編輯其中一個文件，然后以 Split 模式編輯另一個文件，再以 Code 模式編輯第三個文件?，F(xiàn)在編輯器會保存每個文件的編輯狀態(tài)，所以您可以不用擔(dān)心丟失預(yù)覽狀態(tài)，而自由地在文件之間進(jìn)行切換。

圖 3:?資源文件切換，上次的編輯模式會被記憶??

在之前的版本中，每次文件的切換都會重置 Preview 的窗口狀態(tài)。試想一下，如果您在 Text 模式下編輯文件 A，進(jìn)而在 Preview 窗口下進(jìn)行了縮放操作。然后以 Design 模式切換到了 B 文件，當(dāng)再次切換回文件 A 的時候，Preview 窗口的狀態(tài)就會被重置到跟文件 B 一樣，如圖 4 所示:

圖 4:?切換文件后失去縮放等級的 Preview 面板??

移除了 Preview 工具窗口 (tool window)

現(xiàn)在您可以使用新增加的 "Split 視圖"?來預(yù)覽資源文件，所以就不再需要 (在 Text 模式下的) Preview 工具窗口了。之前每次使用 Text 模式打開資源文件時，我們都會顯示這個面板。如果將編輯器切換到了 Design 模式或者打開了非資源文件，我們將會隱藏這個工具窗口 (圖 5)。由于 Android Studio / IntelliJ 中沒有類似功能的工具窗口，所以這種功能可能會讓用戶感到困惑。

圖 5:?在文件切換時消失的 Preview 工具窗口??

Split 視圖具備全面的工具窗口

說到工具窗口，Split 視圖包含了在 Design 模式下可用的所有工具。在之前的版本中，如果您想看到全部的組件樹，則可能需要在 Text 模式 + Preview 工具窗口和 Design 模式中來回切換才能完成。

對 Navigation Editor 的支持

除了上面提到的可用性的更改之外，我們還希望改善我們的預(yù)覽功能，讓其能夠?qū)Ω囝愋偷馁Y源文件提供支持。您現(xiàn)在可以使用新的 Split 模式打開導(dǎo)航欄文件并對其進(jìn)行編輯，同時還能對其進(jìn)行預(yù)覽。這對于編輯大且復(fù)雜的圖形時尤其有用。例如，如果要剪輯的圖形有多層嵌套，您可能需要在 "Design" 和 "Text"?編輯器中多次來回切換，才能將代碼中特定片段與其對應(yīng)的圖形部分進(jìn)行匹配，如圖 6 所示。

而現(xiàn)在，您只需要單擊 XML 部分上的 <fragment> 標(biāo)簽就可以在圖形界面上顯示該代碼片段，即使該片段位于嵌套的圖層內(nèi)也可以做到，如圖 7 所示。類似地，您可以通過在編輯器的圖形中選擇某一個組件，就可以在導(dǎo)航圖中輕松定位到相應(yīng)的元素。對文本的選擇會跳轉(zhuǎn)到相應(yīng)的 XML 標(biāo)簽中。

圖 6: 尋找目標(biāo) (更改前)

圖 7:?尋找目標(biāo) (更改后)

對繪圖的支持

現(xiàn)在，我們在 Design 模式下提供了一個用于打開一個繪制對象的選項，這樣文本編輯器就不會占用寶貴的 UI 空間。這樣的更改在您需要對某個資源進(jìn)行放大來進(jìn)行檢查時顯得格外有用。

以前，您只能使用 XML 編輯器打開可繪制對象，我們將會提供一個選項來使用 Preview 窗口進(jìn)行可繪制對象的預(yù)覽操作。圖 8 和圖 9 分別顯示了在將 UX 更改引入到編輯器之前和之后，進(jìn)行驗證矢量可繪制路徑的區(qū)別。

圖 8:?繪制對象示例 (更改前)

圖 9:?繪制對象示例 (更改后)

對替代用法的支持

我們知道，很多開發(fā)者還不太清楚如何去利用 Android Studio 3.6 中帶來的 UX 更改，這里我們會提供一些方案。

Text Editor 和 Preview

對于當(dāng)前使用 Text + Preview 面板作為開發(fā) UI 時的默認(rèn)配置的開發(fā)者，我們認(rèn)為新的 Split 模式會提供一種非常相似的使用體驗。

浮動 Preview 窗口

對于在浮動窗口使用 Preview 面板的開發(fā)者，您可以通過執(zhí)行以下操作來獲取一個相似的體驗 (圖 10) :

1.在編輯器中，右擊要浮動的文件選項卡；

2.在上下文菜單中，點擊 Split Vertically。該文件的另一個實例會以垂直拆分的形式在單獨的選項卡中打開；

3.將新的標(biāo)簽頁拖動到 Android Studio 界面外，來創(chuàng)建一個浮動窗口；

4.在新的選項卡中，選擇 Design 模式來讓該窗口能夠同浮動預(yù)覽的顯示效果一樣。

圖 10:?以浮動窗口的方式進(jìn)行 Split??

垂直預(yù)覽窗口

最后，對于那些將 Preview 面板附加到文件編輯器底部 (在垂直監(jiān)視器中特別有用) 來使用的開發(fā)者，現(xiàn)在您可以通過以下操作來獲取相似體驗 (圖 11) :

1.在編輯器中，右擊想要預(yù)覽的文件標(biāo)簽欄；

2.在上下文菜單中，選擇 Split Horizontally；

3.在新的標(biāo)簽欄中，選擇 Design 模式。

圖 11:?垂直拆分

期待來自您的反饋

我們一直在努力為用戶提供最佳的用戶體驗。告訴我們您的想法，讓我們知道我們還能做什么來改善您的工作流程。如果您對此感興趣的話，可以參加我們的用戶體驗改善研究項目。

如果您對于新的 UX 更改有任何問題，或者您對于提高您的工作效率有進(jìn)一步的想法，請聯(lián)系我們。我們將會結(jié)合您的建議和反饋持續(xù)進(jìn)行性能優(yōu)化以及 bug 修復(fù)。謝謝！

點擊這里了解更多關(guān)于 Android Studio 的內(nèi)容