Android 11 開發者預覽版現已推出;快來測試并分享您的反饋吧

使用布局編輯器構建界面

在布局編輯器中,您可以通過將界面元素拖動到可視化設計編輯器中(而不是手動編寫布局 XML),快速構建布局。設計編輯器支持在不同的 Android 設備和版本上預覽布局,并且您可以動態調整布局大小,以確保它能夠很好地適應不同的屏幕尺寸。

使用 ConstraintLayout(在支持庫中提供的布局管理器,與 Android 2.3(API 級別 9)及更高版本兼容)構建新布局時,布局編輯器的功能尤其強大。

本文簡要介紹了布局編輯器。要詳細了解布局基礎知識,請參閱布局。要詳細了解如何使用 ConstraintLayout 構建布局,請參閱使用 ConstraintLayout 構建自適應界面

布局編輯器簡介

當您打開 XML 布局文件時,就會出現 Layout Editor。

編輯器的各個區域(對應于圖 1 中的各個數字)如下:

  1. Palette:您可以拖到布局中的視圖和視圖組列表。
  2. Component Tree:查看布局的層次結構。
  3. Toolbar:用于在編輯器中配置布局外觀及更改某些布局屬性的按鈕。
  4. Design editor:Design 視圖和/或 Blueprint 視圖中的布局。
  5. Attributes:用于對所選視圖的屬性進行控制的控件。

圖 1. 布局編輯器

當您打開 XML 布局文件時,默認會打開設計編輯器(如圖 1 所示)。

要在文本編輯器中修改布局 XML,請點擊窗口底部的 Text 標簽。在文本編輯器中,您還可以通過點擊窗口右側的 Preview,查看 PaletteComponent Tree 和設計編輯器。文本編輯器中沒有 Attributes 窗口。

提示:您只需按 Alt + Shift + 向右/向左箭頭(在 Mac 上按 Control + Shift + 向右/向左箭頭),即可在設計編輯器和文本編輯器之間切換。

更改預覽外觀

您可以使用設計編輯器頂行中的按鈕在編輯器中配置布局的外觀。文本編輯器的 Preview 窗口中也有此工具欄。

圖 2. 布局編輯器工具欄中用于配置布局外觀的按鈕

可用的按鈕(對應于圖 2 中的各個數字)如下:

  1. Design and blueprint:選擇您希望如何在編輯器中查看布局;可以選擇 Design 視圖(布局的實際預覽效果)、Blueprint 視圖(僅顯示每個視圖的輪廓)或 Design + Blueprint(并排顯示這兩個視圖)。

    提示:按 B 可循環瀏覽這些視圖。

  2. Screen orientation and layout variants:選擇屏幕方向(橫向和縱向),或應用提供備用布局的其他屏幕模式(例如夜間模式)。該菜單還包含用于創建新布局變體的命令。
  3. Device type and size:選擇設備類型(手機/平板電腦、Android TV 或 Wear OS)和屏幕配置(尺寸和密度)。您可以從多種預配置的設備類型和您自己的 AVD 定義中進行選擇,也可以從列表中選擇 Add Device Definition 來啟動新的 AVD。

    提示:您可以通過拖動布局的右下角來調整設備尺寸。

  4. API version:選擇預覽布局時使用的 Android 版本。
  5. App theme:選擇要應用于預覽的界面主題背景。 (這僅適用于支持的布局樣式;因此該列表中的許多主題背景都會導致出錯。)
  6. Language:選擇要以何種語言顯示界面字符串。此列表僅會顯示您的字符串資源支持的語言。如果您想要修改翻譯,請點擊下拉菜單中的 Edit Translations(請參閱使用 Translations Editor 本地化界面)。

注意:這些配置對應用的代碼或清單沒有任何影響(除非您選擇從 Layout Variants 添加新的布局文件);它們只會影響布局預覽。

創建新布局

為應用添加新布局時,請先在項目的默認 layout/ 目錄中創建一個布局文件,以便其適用于所有設備配置。創建默認布局之后,您可以為特定的設備配置(例如特大屏幕)創建布局變體

您可以通過幾種不同的方式創建新布局(具體取決于您的 Project 窗口視圖),但可以在任意視圖中按以下步驟操作:

  1. Project 窗口中,點擊要在其中添加布局的模塊(如 app)。
  2. 在主菜單中,依次選擇 File > New > XML > Layout XML File
  3. 在隨即顯示的對話框中,輸入文件的名稱、根布局標記以及布局所屬的源代碼文件集,然后點擊 Finish

您還可以通過以下幾種方式啟動新布局文件(但顯示的對話框會有所不同):

  • 如果您在 Project 窗口中選擇了 Project 視圖:打開應用模塊的 res 目錄,右鍵點擊您要添加布局的布局目錄,然后依次點擊 New > Layout resource file
  • 如果您在 Project 窗口中選擇了 Android 視圖:右鍵點擊 layout 文件夾,然后依次選擇 New > Layout resource file

創建布局變體

如果您已經有布局,并且想創建備用版本以針對不同屏幕尺寸或方向優化布局,請按照以下步驟操作:

  1. 打開原始布局文件,并確保您正在查看的是設計編輯器(點擊窗口底部的 Design 標簽)。
  2. 點擊工具欄中的 Orientation for Preview 圖標。在下拉列表中,點擊建議的變體(例如 Create Landscape Variant),就大功告成了;或點擊 Create Other,然后繼續執行下一步。
  3. 在隨即顯示的對話框中,您只需定義目錄名稱的資源限定符即可。您可以在 Directory name 中輸入限定符,也可以從 Available qualifiers 列表中選擇一個(一次選擇一個),然后點擊 Add 圖標
  4. 添加完所有限定符后,點擊 OK

如果同一布局有多個變體,您可以從點擊 Layout Variants 圖標 后顯示的列表中輕松切換它們。

如需詳細了解如何為不同屏幕創建布局,請參閱支持不同的屏幕尺寸

轉換視圖或布局

您可以將一種視圖轉換為另一種視圖,也可以將一種布局(視圖組)轉換為另一種布局。

  1. 點擊編輯器窗口底部的 Design 標簽。
  2. Component Tree 中,右鍵點擊相應視圖或布局,然后點擊 Convert view
  3. 在隨即顯示的對話框中,選擇新類型的視圖或布局,然后點擊 Apply

將布局轉換為 ConstraintLayout

ConstraintLayout 是 Constraint Layout 庫(Android Studio 2.2 及更高版本中包含該庫)中提供的一個視圖組。它是與布局編輯器一起從頭開始構建的,因此您可以從設計編輯器中訪問其中的所有內容,而且您永遠無需手動修改 XML。最重要的是,它采用基于約束條件的布局系統,讓您無需任何嵌套視圖組即可構建大多數布局。

為了改善布局性能,您應該將舊版布局轉換為 ConstraintLayout

要將現有布局轉換為 ConstraintLayout,請執行以下操作:

  1. 在 Android Studio 中打開現有布局,然后點擊編輯器窗口底部的 Design 標簽頁。
  2. Component Tree 窗口中,右鍵點擊該布局,然后點擊 Convert layout to ConstraintLayout

與上一部分中介紹的簡單 Convert view 命令相比,專門用于將布局轉換為 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 功能自動創建約束條件

修改視圖屬性

圖 3. Attributes 窗口

您可以在 Attributes 窗口(位于 Layout Editor 的右側)中修改視圖屬性,而不用在 XML 中執行此操作。只有在設計編輯器處于打開狀態時,此窗口才會顯示,因此請確保您已選擇窗口底部的 Design 標簽頁。

當您選擇視圖時(無論是通過在 Component Tree 中點擊該視圖,還是在設計編輯器中點擊該視圖),Attributes 窗口會顯示以下內容,如圖 3 所示:

  1. Declared Attributes 部分,其中會列出布局文件中指定的屬性。要添加屬性,請點擊該部分右上角的 Add 圖標
  2. 包含寬度/高度樣式控件的視圖檢查器。對于 ConstraintLayout 中的視圖,該部分還會顯示約束偏差,并列出相應視圖使用的約束條件。如需了解詳情,請參閱使用 ConstraintLayout 構建自適應界面
  3. 所選視圖的常見屬性列表。要查看所有可用的屬性,請展開窗口底部的 All Attributes 部分。
  4. “Search”按鈕。點擊此按鈕可搜索特定的視圖屬性。
  5. 每個屬性值右側都會顯示指示器。當屬性值是資源引用時,指示器是非中空的 ,否則是空的 。這可讓您一目了然地識別硬編碼值。點擊該指示器(無論其處于哪種狀態)都會打開 Resources 對話框窗口,您可以在其中選擇相應屬性的資源引用。
  6. 系統會突出顯示帶有錯誤或警告的屬性,以紅色突出顯示表示錯誤,以橙色突出顯示表示警告。例如,如果布局定義屬性中存在無效條目,系統會顯示錯誤(如圖所示)。如果在應該使用資源引用時使用了硬編碼值,系統會顯示警告(如圖所示)。

向視圖中添加示例數據

由于很多 Android 布局都依賴于運行時數據,因此在設計應用時很難直觀呈現布局的外觀和風格。在 Android Studio 3.2 及更高版本中,您可以從布局編輯器中向 TextViewImageViewRecyclerView 添加示例預覽數據。

您可以右鍵點擊其中某種視圖類型,然后選擇 Set Sample Data 以顯示 Design-time View Attributes 窗口,如圖 4 所示。

圖 4. Design-time View Attributes 窗口

TextView 中,您可以在不同的示例文本類別之間選擇。在使用示例文本時,Android Studio 會使用您選擇的示例數據填充 TextViewtext 屬性。請注意,僅當 text 屬性為空時,您才能通過 Design-time View Attributes 窗口選擇示例文本。

Figure 5. 包含示例數據的 TextView

ImageView 中,您可以在不同的示例圖片之間進行選擇。當您選擇示例圖片后,Android Studio 會填充 ImageViewtools:src 屬性(或 tools:srcCompat,如果使用支持庫)。

Figure 6. 包含示例數據的 ImageView

RecyclerView 中,您可以在一組包含示例圖片和文本的模板之間進行選擇。使用這些模板時,Android Studio 會將 recycler_view_item.xml 文件添加到 res/layout 目錄,該文件中包含示例數據的布局。Android Studio 還會將元數據添加到 RecyclerView,以正確顯示示例數據。

Figure 7. 包含示例數據的 RecyclerView

顯示布局警告和錯誤

如果在布局中檢測到任何問題,系統會在 Component Tree 中相應視圖的旁邊顯示感嘆號圖標(),以指明存在問題。要查看錯誤詳細信息,請點擊該圖標。

要在編輯器下方的窗口中查看所有已知問題,請點擊工具欄中的 Show Warnings and Errors)。

在此窗口中,您還可以啟用 Show issues on the preview,以便向預覽中的每個相應視圖(僅在 Design 視圖中,而非 Blueprint 視圖中)添加警告或錯誤圖標。

下載字體并將其應用于文本

使用 Android 8.0(API 級別 26)或 Android 支持庫 26.0.0 或更高版本時,您可以按照以下步驟從數百種字體中進行選擇:

  1. 在 Layout Editor 中,點擊 Design 標簽以在設計編輯器中查看布局。
  2. 點擊文本視圖。
  3. Attributes 窗口中,展開 textAppearance,然后點擊以展開 fontFamily 方框。
  4. 滾動到列表底部,然后點擊 More Fonts,以打開 Resources 對話框。
  5. Resources 對話框中,通過瀏覽列表或在頂部的搜索欄中輸入字體來選擇字體。如果您選擇 Downloadable 下列出的某種字體,則可以點擊 Create downloadable font 以在運行時加載該字體(作為可下載字體),或點擊 Add font to project 以將 TTF 字體文件打包到 APK 中。(Android 系統提供了 Android 下列出的字體,因此這些字體不需要下載,也不需要打包到 APK 中。)
  6. 點擊 OK