在佈局編輯器中,您可以通過將界面元素拖動到可視化設計編輯器中(而不是手動編寫佈局 XML),快速構建佈局。設計編輯器支持在不同的 Android 設備和版本上預覽佈局,並且您可以動態調整佈局大小,以確保它能夠很好地適應不同的屏幕尺寸。
使用 ConstraintLayout
構建佈局時,佈局編輯器的功能尤其強大。前者是一個佈局管理器,與 Android 2.3(API 級別 9)及更高版本兼容。
本文簡要介紹了佈局編輯器。如需詳細瞭解佈局基礎知識,請參閱佈局。
佈局編輯器簡介
當您打開 XML 佈局文件時,就會顯示佈局編輯器。
- Palette:包含您可以拖到佈局中的各種視圖和視圖組。
- Component Tree:顯示佈局中的組件層次結構。
- 工具欄:點擊這些按鈕可在編輯器中配置佈局外觀及更改佈局屬性。
- 設計編輯器:在 Design 視圖和/或 Blueprint 視圖中修改佈局。
- Attributes:用於對所選視圖的屬性進行控制的控件。
- 視圖模式:採用 Code 、Design 或 Split 模式查看佈局。Split 模式會同時顯示 Code 和 Design 窗口。
- 縮放和平移控件:控制編輯器內的預覽大小和位置。
當您打開 XML 佈局文件時,默認會打開設計編輯器,如圖 1 所示。如需在文本編輯器中修改佈局 XML,請點擊窗口右上角的 Code 按鈕。請注意,在 Code 視圖中修改佈局時,Palette、Component Tree 和 Attributes 窗口不可用。
提示:您只需按
Alt + Shift + Right/Left arrow
(在 Mac 上按Control + Shift + Right/Left arrow
),即可在設計編輯器和文本編輯器之間切換。
更改預覽外觀
您可以使用設計編輯器頂行中的按鈕在編輯器中配置佈局的外觀。
可用的按鈕(對應於圖 2 中的各個數字)如下:
- Design 和 Blueprint:選擇您希望如何在編輯器中查看佈局。選擇 Design 可查看佈局的渲染後預覽效果。選擇 Blueprint 可僅查看每個視圖的輪廓。選擇 Design + Blueprint 可並排查看這兩個視圖。您還可以按
B
循環瀏覽這些視圖類型。 - 屏幕方向和佈局變體:選擇屏幕方向(橫向和縱向),或選擇應用提供備用佈局的其他屏幕模式(例如夜間模式)。該菜單還包含用於創建新佈局變體的命令。 您還可以按
O
更改屏幕方向。 - 設備類型和尺寸:選擇設備類型(手機/平板電腦、Android TV 或 Wear OS)和屏幕配置(尺寸和密度)。您可以從多種預配置的設備類型和您自己的 AVD 定義中選擇,也可以從列表中選擇 Add Device Definition 創建新的 AVD。您可以通過拖動佈局的右下角來調整設備尺寸,還可以按
D
循環瀏覽設備列表。 - API 版本:選擇預覽佈局時使用的 Android 版本。
- AppTheme:選擇要應用於預覽的界面主題背景。請注意,這僅適用於支持的佈局樣式,因此該列表中的許多主題背景都會導致出錯。
- Language:選擇要以何種語言顯示界面字符串。此列表僅會顯示您的字符串資源支持的語言。如果您想要修改翻譯,請點擊下拉菜單中的 Edit Translations。如需詳細瞭解如何使用翻譯,請參閱使用 Translations Editor 本地化界面。
注意:除非您選擇從 Layout Variants 添加新的佈局文件,否則這些配置對應用的代碼或清單沒有任何影響。它們只會影響佈局預覽。
創建新佈局
爲應用添加新佈局時,請先在項目的默認 layout/
目錄中創建一個默認佈局文件,以便其適用於所有設備配置。默認佈局創建完畢後,您可以爲特定的設備配置(例如爲大屏幕)創建佈局變體。
您可以通過以下方式之一創建新佈局:
使用 Android Studio 的主菜單
- 在 Project 窗口中,點擊要在其中添加布局的模塊。
- 在主菜單中,依次選擇 File > New > XML > Layout XML File。
- 在顯示的對話框中,提供文件名、根佈局標記以及佈局所屬的源代碼集。
- 點擊 Finish 以創建佈局。
使用 Project 視圖
- 從 Project 窗口中選擇 Project 視圖。
- 右鍵點擊想要在其中添加布局的佈局目錄。
- 在顯示的上下文菜單中,依次點擊 New > Layout Resource File。
使用 Android 視圖
- 從 Project 窗口中選擇 Android 視圖。
- 右鍵點擊
layout
文件夾。 - 在顯示的上下文菜單中,依次選擇 New > Layout Resource File。
使用 Resource Manager
- 在 Resource Manager 中,選擇 Layout 標籤頁。
- 點擊
+
按鈕,然後點擊 Layout Resource File。
使用佈局變體針對不同屏幕進行優化
佈局變體是現有佈局的備用版本,針對特定屏幕尺寸或屏幕方向進行了優化。
使用建議的佈局變體
Android Studio 包含您可以在項目中使用的常見佈局變體。 如需使用建議的佈局變體,請執行以下操作:
- 打開原始佈局文件,點擊窗口右上角的 Design 圖標。
- 點擊工具欄中的 Orientation for Preview 圖標 ()。
- 在下拉列表中,選擇建議的變體,例如 Create Landscape Variant。
創建自己的佈局變體
如果您想要創建自己的佈局變體,請執行以下操作:
- 打開原始佈局文件,點擊窗口右上角的 Design () 圖標。
- 點擊工具欄中的 Orientation for Preview 圖標 。
- 在下拉列表中,選擇 Create Other...。
- 在顯示的對話框中,定義變體的資源限定符。 從 Available qualifiers 列表中選擇限定符,然後點擊 Add 按鈕。 根據需要重複此步驟以添加其他限定符。
- 添加完所有限定符後,點擊 OK。
如果同一佈局有多個變體,如需在這些變體間切換,請點擊 Layout Variants 圖標 並從顯示的列表中選擇。
如需詳細瞭解如何爲不同屏幕創建佈局,請參閱支持不同的屏幕尺寸。
轉換視圖或佈局
您可以將一種視圖轉換爲另一種視圖,也可以將一種佈局轉換爲另一種佈局。
- 點擊編輯器窗口右上角的 Design 按鈕。
- 在 Component Tree 中,右鍵點擊相應視圖或佈局,然後點擊 Convert view...。
- 在顯示的對話框中,選擇新類型的視圖或佈局,然後點擊 Apply。
將佈局轉換爲 ConstraintLayout
爲了改善佈局性能,您應該將舊版佈局轉換爲 ConstraintLayout
。ConstraintLayout
採用基於約束條件的佈局系統,讓您無需使用任何嵌套視圖組即可構建大多數佈局。
如需將現有佈局轉換爲 ConstraintLayout
,請執行以下操作:
- 在 Android Studio 中打開現有佈局,然後點擊編輯器窗口右上角的 Design 按鈕。
- 在 Component Tree 中,右鍵點擊該佈局,然後點擊 Convert
your-layout-type
to ConstraintLayout。
如需詳細瞭解 ConstraintLayout
,請參閱使用 ConstraintLayout 構建自適應界面。
在 Palette 中查找內容
如需在 Palette 中按名稱搜索視圖或視圖組,請點擊 Palette 頂部的 Search 按鈕。或者,您也可以在 Palette 窗口每次獲得焦點後輸入內容名稱。
您可以在 Palette 的 Common 類別中找到經常使用的內容。如需向此類別中添加內容,請右鍵點擊 Palette 中的相應視圖或視圖組,然後在上下文菜單中點擊 Favorite。
從 Palette 中打開文檔
如需打開視圖或視圖組的 Android 開發者參考文檔,請在 Palette 中選擇界面元素,然後按 Shift + F1
。
如需查看視圖或視圖組的 Material Guidelines 文檔,請右鍵點擊 Palette 中的界面元素,然後從上下文菜單中選擇 Material Guidelines。對於相應內容,如果不存在任何特定條目,則此命令會打開 Material Guidelines 文檔的首頁。
將視圖添加到佈局中
要開始構建佈局,只需將視圖和視圖組從 Palette 拖動到設計編輯器中即可。將視圖放置到佈局中後,編輯器會顯示有關該視圖與佈局其餘部分的關係的信息。
如果您使用的是 ConstraintLayout
,則可以使用 Infer Constraints 和 Autoconnect 功能自動創建約束條件。
修改視圖屬性
您可以在佈局編輯器右側的 Attributes 窗口中修改視圖屬性。只有在設計編輯器處於打開狀態時,此窗口才會顯示,因此請確保您正在使用 Design 或 Split 模式查看佈局。
當您選擇視圖時(無論是通過在 Component Tree 中點擊該視圖,還是在設計編輯器中點擊該視圖),Attributes 窗口會顯示以下內容,如圖 3 所示:
- Declared Attributes 部分會列出佈局文件中指定的屬性。如需添加屬性,請點擊該部分右上角的 Add 按鈕。
- Layout 部分包含視圖的寬度和高度控件。如果視圖位於
ConstraintLayout
中,該部分還會顯示約束偏差,並列出相應視圖使用的約束條件。如需詳細瞭解如何使用ConstraintLayout
,請參閱使用 ConstraintLayout 構建自適應界面。 - Common Attributes 部分列出了所選視圖的常見屬性。如需查看所有可用的屬性,請展開窗口底部的 All Attributes 部分。
- 點擊 Search 按鈕可搜索特定的視圖屬性。
- 每個屬性值右側的圖標指示屬性值是否爲資源引用。當屬性值是資源引用時,指示器是非中空的 ,當屬性值是硬編碼時,指示器是空的 。這些指示器可幫助您一目瞭然地識別硬編碼值。點擊指示器(無論其處於哪種狀態)會打開 Resources 對話框窗口,您可以在其中選擇相應屬性的資源引用。
-
屬性值周圍的紅色突出顯示錶示值存在錯誤。 錯誤可能表示佈局定義屬性的條目無效,如圖 3 中的紅色突出顯示所示。
橙色突出顯示錶示值存在警告。例如,如果在應該使用資源引用時使用了硬編碼值,就可能會出現警告。
向視圖中添加示例數據
由於很多 Android 佈局都依賴於運行時數據,因此在設計應用時很難直觀呈現佈局的外觀和風格。在 Android Studio 3.2 及更高版本中,您可以從佈局編輯器中向 TextView
、ImageView
或 RecyclerView
添加示例預覽數據。
注意:當您向
View
添加示例數據時,Android Studio 會更改您的項目,就像您在使用自己的數據一樣。您隨後可以根據需要修改這些更改內容。
您可以右鍵點擊其中某種視圖類型,然後選擇 Set Sample Data 以顯示 Design-time View Attributes 窗口,如圖 4 所示。
在 TextView
中,您可以在不同的示例文本類別之間選擇。在使用示例文本時,Android Studio 會使用您選擇的示例數據填充 TextView
的 text
屬性。請注意,僅當 text
屬性爲空時,您才能通過 Design-time View Attributes 窗口選擇示例文本。
在 ImageView
中,您可以在不同的示例圖片之間進行選擇。當您選擇示例圖片後,Android Studio 會填充 ImageView
的 tools:src
屬性(如果使用支持庫,則會填充 tools:srcCompat
)。
在 RecyclerView
中,您可以在一組包含示例圖片和文本的模板之間進行選擇。使用這些模板時,Android Studio 會將 recycler_view_item.xml
文件添加到 res/layout
目錄,該文件中包含示例數據的佈局。Android Studio 還會將元數據添加到 RecyclerView
,以正確顯示示例數據。
顯示佈局警告和錯誤
佈局編輯器會在 Component Tree 中相應視圖的旁邊使用紅色圓圈感嘆號圖標 (表示錯誤)或橙色三角形感嘆號圖標 (表示警告)通知您存在的任何佈局問題。點擊該圖標即可查看更多詳細信息。
如需在編輯器下方的窗口中查看所有已知問題,請點擊工具欄中的 Show Warnings and Errors( 或 )。
下載字體並將其應用於文本
使用 Android 8.0(API 級別 26)或 Android 支持庫 26.0.0 或更高版本時,您可以按照以下步驟從數百種字體中進行選擇:
- 在佈局編輯器中,點擊 Design 按鈕以在設計編輯器中查看佈局。
- 點擊一個文本視圖。
- 在 Attributes 窗口中,展開 textAppearance,然後展開 fontFamily 方框。
- 滾動到列表底部,然後點擊 More Fonts,以打開 Resources 對話框。
- 在 Resources 對話框中,通過瀏覽列表或在頂部的搜索欄中輸入字體來選擇字體。如果您選擇 Downloadable 下的某種字體,則可以點擊 Create downloadable font 以在運行時加載該字體作爲可下載字體,或點擊 Add font to project 以將 TTF 字體文件打包到 APK 中。請注意,Android 系統提供了 Android 下列出的字體,因此這些字體不需要下載,也不需要打包到 APK 中。
- 點擊 OK 完成。