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

介紹 Design Tools 中的 Split View

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

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

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

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

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

? Design: 由包含設(shè)計(jì)編輯器 (比如導(dǎo)航欄栖疑、布局欄) 的視圖組成，可以使用它來(lái)以所見(jiàn)即所得的方式編輯文件滔驶；

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

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

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

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

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

圖 3:?資源文件切換生兆，上次的編輯模式會(huì)被記憶??

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

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

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

現(xiàn)在您可以使用新增加的 "Split 視圖"?來(lái)預(yù)覽資源文件拴事，所以就不再需要 (在 Text 模式下的) Preview 工具窗口了沃斤。之前每次使用 Text 模式打開(kāi)資源文件時(shí)，我們都會(huì)顯示這個(gè)面板刃宵。如果將編輯器切換到了 Design 模式或者打開(kāi)了非資源文件衡瓶，我們將會(huì)隱藏這個(gè)工具窗口 (圖 5)。由于 Android Studio / IntelliJ 中沒(méi)有類(lèi)似功能的工具窗口牲证，所以這種功能可能會(huì)讓用戶(hù)感到困惑哮针。

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

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

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

對(duì) Navigation Editor 的支持

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

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

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

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

對(duì)繪圖的支持

現(xiàn)在随常，我們?cè)?Design 模式下提供了一個(gè)用于打開(kāi)一個(gè)繪制對(duì)象的選項(xiàng)，這樣文本編輯器就不會(huì)占用寶貴的 UI 空間萄涯。這樣的更改在您需要對(duì)某個(gè)資源進(jìn)行放大來(lái)進(jìn)行檢查時(shí)顯得格外有用绪氛。

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

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

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

對(duì)替代用法的支持

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

Text Editor 和 Preview

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

浮動(dòng) Preview 窗口

對(duì)于在浮動(dòng)窗口使用 Preview 面板的開(kāi)發(fā)者逗旁，您可以通過(guò)執(zhí)行以下操作來(lái)獲取一個(gè)相似的體驗(yàn) (圖 10) :

1.在編輯器中嘿辟，右擊要浮動(dòng)的文件選項(xiàng)卡舆瘪；

2.在上下文菜單中，點(diǎn)擊 Split Vertically红伦。該文件的另一個(gè)實(shí)例會(huì)以垂直拆分的形式在單獨(dú)的選項(xiàng)卡中打開(kāi)英古；

3.將新的標(biāo)簽頁(yè)拖動(dòng)到 Android Studio 界面外，來(lái)創(chuàng)建一個(gè)浮動(dòng)窗口昙读；

4.在新的選項(xiàng)卡中召调，選擇 Design 模式來(lái)讓該窗口能夠同浮動(dòng)預(yù)覽的顯示效果一樣。

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

垂直預(yù)覽窗口

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

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

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

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

圖 11:?垂直拆分

期待來(lái)自您的反饋

我們一直在努力為用戶(hù)提供最佳的用戶(hù)體驗(yàn)。告訴我們您的想法盛杰，讓我們知道我們還能做什么來(lái)改善您的工作流程剩拢。如果您對(duì)此感興趣的話(huà)，可以參加我們的用戶(hù)體驗(yàn)改善研究項(xiàng)目饶唤。

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

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