Android Studio 的布局編輯器

前一小節(jié)我們介紹了如何通過 lint 來檢查我們的代碼，本小結(jié)我們學(xué)習(xí)如何使用 Android Studio 布局編輯器，布局編輯器可以幫助我們完成界面上視圖的創(chuàng)建、編輯、預(yù)覽等。

1. 什么是布局編輯器

Android 布局編輯器可以幫助我們將界面元素拖動(dòng)到可視化設(shè)計(jì)編輯器中（而不是手動(dòng)編寫布局 XML），快速構(gòu)建布局。布局編輯器還支持在不同的 Android 設(shè)備和版本上預(yù)覽布局，并且我們還可以動(dòng)態(tài)調(diào)整布局大小，以確保它能夠很好地適應(yīng)不同的屏幕尺寸。

當(dāng)我們打開 XML 布局文件時(shí)，就會(huì)顯示布局編輯器，如下圖：

上圖中的幾個(gè)部分分別代表一下含義：

1. Palette：包含可以拖到布局中的各種視圖和視圖組；

2. Component Tree：顯示布局中的組件層次結(jié)構(gòu)；

3. 工具欄：點(diǎn)擊這些按鈕可在編輯器中配置布局外觀及更改布局屬性；

4. 設(shè)計(jì)編輯器：在 Design 視圖和/或 Blueprint 視圖中修改布局；

5. Attributes：用于對(duì)所選視圖的屬性進(jìn)行控制的控件；

6. 視圖模式：采用 Code 模式、Design 模式或 Split 模式模式查看布局。Split 模式會(huì)同時(shí)顯示 Code 和 Design 窗口；

7. 縮放和平移控件：控制編輯器內(nèi)的預(yù)覽大小和位置。

2. 如何更改預(yù)覽外觀

Android 布局編輯器支持在不同配置下的預(yù)覽，我們可以使用設(shè)計(jì)編輯器頂行中的按鈕在編輯器中配置布局的外觀。

1. Design 和 Blueprint：選擇我們希望如何在編輯器中查看布局。選擇 Design 可查看布局的渲染后預(yù)覽效果。選擇 Blueprint 可僅查看每個(gè)視圖的輪廓。選擇 Design + Blueprint 可并排查看這兩個(gè)視圖；

2. 屏幕方向和布局變體：選擇屏幕方向（橫向和縱向），或選擇應(yīng)用提供備用布局的其他屏幕模式（例如夜間模式）。該菜單還包含用于創(chuàng)建新布局變體的命令；

3. 設(shè)備類型和尺寸：選擇設(shè)備類型（手機(jī)/平板電腦、Android TV 或 Wear OS）和屏幕配置（尺寸和密度）。我們可以從多種預(yù)配置的設(shè)備類型和 AVD 定義中選擇，也可以從列表中選擇 Add Device Definition 創(chuàng)建新的 AVD；

4. API 版本：選擇預(yù)覽布局時(shí)使用的 Android 版本；

5. AppTheme：選擇要應(yīng)用于預(yù)覽的界面主題背景。請(qǐng)注意，這僅適用于支持的布局樣式，因此該列表中的許多主題背景都會(huì)導(dǎo)致出錯(cuò)；

6. Language：選擇要以何種語言顯示界面字符串。此列表僅會(huì)顯示我們的字符串資源支持的語言。如果想要修改翻譯，點(diǎn)擊點(diǎn)擊下拉菜單中的 Edit Translations。

3. 如何創(chuàng)建一個(gè)新布局

3.1 創(chuàng)建默認(rèn)布局文件

我們可以通過以下方式之一創(chuàng)建新布局：

使用 Android Studio 的主菜單

1. 在 Project 窗口中，點(diǎn)擊要在其中添加布局的模塊；

2. 在主菜單中，依次選擇 File > New > XML > Layout XML File；

3. 在顯示的對(duì)話框中，提供文件名、根布局標(biāo)記以及布局所屬的源代碼集；

4. 點(diǎn)擊 Finish 以創(chuàng)建布局。

使用 Project 視圖

1. 從 Project 窗口中選擇 Project 視圖；

2. 右鍵點(diǎn)擊想要在其中添加布局的布局目錄；

3. 在顯示的上下文菜單中，依次點(diǎn)擊 New > Layout Resource File。

使用 Android 視圖

1. 從 Project 窗口中選擇 Android 視圖；

2. 右鍵點(diǎn)擊 layout 文件夾；

3. 在顯示的上下文菜單中，依次選擇 New > Layout Resource File。

3.2 使用建議的布局變體

布局變體是現(xiàn)有布局的備用版本，針對(duì)特定屏幕尺寸或屏幕方向進(jìn)行了優(yōu)化，Android Studio 包含我們可以在項(xiàng)目中使用的常見布局變體。

如需使用建議的布局變體，請(qǐng)執(zhí)行以下操作：

1. 打開原始布局文件，點(diǎn)擊窗口右上角的 Design 圖標(biāo)；

2. 點(diǎn)擊工具欄中的 Orientation for Preview 圖標(biāo)；

3. 在下拉列表中，選擇建議的變體，例如 Create Landscape Variant。

3.3 創(chuàng)建自己的布局變體

如果我們想要?jiǎng)?chuàng)建自己的布局變體，請(qǐng)執(zhí)行以下操作：

1. 打開原始布局文件，點(diǎn)擊窗口右上角的 Design 圖標(biāo)；

2. 點(diǎn)擊工具欄中的 Orientation for Preview 圖標(biāo)；

3. 在下拉列表中，選擇 Create Other…；

4. 在顯示的對(duì)話框中，定義變體的資源限定符。 從 Available qualifiers 列表中選擇限定符，然后點(diǎn)擊 Add 按鈕。 根據(jù)需要重復(fù)此步驟以添加其他限定符；

5. 添加完所有限定符后，點(diǎn)擊 OK。

4. 如何添加視圖

要開始構(gòu)建布局，只需將視圖和視圖組從 Palette 拖動(dòng)到設(shè)計(jì)編輯器中即可。將視圖放置到布局中后，編輯器會(huì)顯示有關(guān)該視圖與布局其余部分的關(guān)系的信息。

如需在 Palette 中按名稱搜索視圖或視圖組，請(qǐng)點(diǎn)擊 Palette 頂部的 Search 按鈕?；蛘咭部梢栽?Palette 窗口每次獲得焦點(diǎn)后輸入內(nèi)容名稱。

我們可以在 Palette 的 Common 類別中找到經(jīng)常使用的內(nèi)容。如需向此類別中添加內(nèi)容，請(qǐng)右鍵點(diǎn)擊 Palette 中的相應(yīng)視圖或視圖組，然后在上下文菜單中點(diǎn)擊 Favorite。

5. 如何修改視圖屬性

我們可以在布局編輯器右側(cè)的 Attributes 窗口中修改視圖屬性。只有在設(shè)計(jì)編輯器處于打開狀態(tài)時(shí)，此窗口才會(huì)顯示，因此請(qǐng)確保我們正在使用 Design 或 Split 模式查看布局。

當(dāng)我們選擇視圖時(shí)（無論是通過在 Component Tree 中點(diǎn)擊該視圖，還是在設(shè)計(jì)編輯器中點(diǎn)擊該視圖），Attributes 窗口會(huì)顯示以下內(nèi)容：

1. Declared Attributes：列出布局文件中指定的屬性。如需添加屬性，請(qǐng)點(diǎn)擊該部分右上角的 Add 按鈕；

2. Layout：包含視圖的寬度和高度控件。如果視圖位于 ConstraintLayout 中，該部分還會(huì)顯示約束偏差，并列出相應(yīng)視圖使用的約束條件；

3. Common Attributes：列出了所選視圖的常見屬性。如需查看所有可用的屬性，請(qǐng)展開窗口底部的 All Attributes 部分；

4. Search：可搜索特定的視圖屬性；

5. 引用指示器：每個(gè)屬性值右側(cè)的圖標(biāo)指示屬性值是否為資源引用。當(dāng)屬性值是資源引用時(shí)，指示器是非中空的圖標(biāo)，當(dāng)屬性值是硬編碼時(shí)，指示器是空的圖標(biāo)。這些指示器可幫助我們一目了然地識(shí)別硬編碼值。點(diǎn)擊指示器（無論其處于哪種狀態(tài)）會(huì)打開 Resources 對(duì)話框窗口，我們可以在其中選擇相應(yīng)屬性的資源引用；

6. 顏色提示：屬性值周圍的紅色突出顯示表示值存在錯(cuò)誤，錯(cuò)誤可能表示布局定義屬性的條目無效。

6. 小結(jié)

本節(jié)課程我們主要學(xué)習(xí)了如何使用 Android Studio 布局編輯器。本節(jié)課程的重點(diǎn)如下：

• 掌握布局編輯器添加視圖控件和修改屬性；
• 掌握不同配置下的預(yù)覽方式。