38、Android編寫應用-使用佈局編輯器構建界面

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

使用 ConstraintLayout 構建佈局時,佈局編輯器的功能尤其強大。前者是一個佈局管理器,與 Android 2.3(API 級別 9)及更高版本兼容。

本文簡要介紹了佈局編輯器。如需詳細瞭解佈局基礎知識,請參閱佈局

佈局編輯器簡介

當您打開 XML 佈局文件時,就會顯示佈局編輯器。

佈局編輯器
圖 1. 佈局編輯器
  1. Palette:包含您可以拖到佈局中的各種視圖和視圖組。
  2. Component Tree:顯示佈局中的組件層次結構。
  3. 工具欄:點擊這些按鈕可在編輯器中配置佈局外觀及更改佈局屬性。
  4. 設計編輯器:在 Design 視圖和/或 Blueprint 視圖中修改佈局。
  5. Attributes:用於對所選視圖的屬性進行控制的控件。
  6. 視圖模式:採用 Code code 模式圖標Design design 模式圖標 或 Split split 模式圖標 模式查看佈局。Split 模式會同時顯示 Code 和 Design 窗口。
  7. 縮放和平移控件:控制編輯器內的預覽大小和位置。

當您打開 XML 佈局文件時,默認會打開設計編輯器,如圖 1 所示。如需在文本編輯器中修改佈局 XML,請點擊窗口右上角的 Code code 模式圖標 按鈕。請注意,在 Code 視圖中修改佈局時,PaletteComponent Tree 和 Attributes 窗口不可用。

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

更改預覽外觀

您可以使用設計編輯器頂行中的按鈕在編輯器中配置佈局的外觀。

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

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

  1. Design 和 Blueprint:選擇您希望如何在編輯器中查看佈局。選擇 Design 可查看佈局的渲染後預覽效果。選擇 Blueprint 可僅查看每個視圖的輪廓。選擇 Design + Blueprint 可並排查看這兩個視圖。您還可以按 B 循環瀏覽這些視圖類型。
  2. 屏幕方向和佈局變體:選擇屏幕方向(橫向和縱向),或選擇應用提供備用佈局的其他屏幕模式(例如夜間模式)。該菜單還包含用於創建新佈局變體的命令。 您還可以按 O 更改屏幕方向。
  3. 設備類型和尺寸:選擇設備類型(手機/平板電腦、Android TV 或 Wear OS)和屏幕配置(尺寸和密度)。您可以從多種預配置的設備類型和您自己的 AVD 定義中選擇,也可以從列表中選擇 Add Device Definition 創建新的 AVD。您可以通過拖動佈局的右下角來調整設備尺寸,還可以按 D 循環瀏覽設備列表。
  4. API 版本:選擇預覽佈局時使用的 Android 版本。
  5. AppTheme:選擇要應用於預覽的界面主題背景。請注意,這僅適用於支持的佈局樣式,因此該列表中的許多主題背景都會導致出錯。
  6. Language:選擇要以何種語言顯示界面字符串。此列表僅會顯示您的字符串資源支持的語言。如果您想要修改翻譯,請點擊下拉菜單中的 Edit Translations。如需詳細瞭解如何使用翻譯,請參閱使用 Translations Editor 本地化界面

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

創建新佈局

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

您可以通過以下方式之一創建新佈局:

使用 Android Studio 的主菜單

  1. 在 Project 窗口中,點擊要在其中添加布局的模塊。
  2. 在主菜單中,依次選擇 File > New > XML > Layout XML File
  3. 在顯示的對話框中,提供文件名、根佈局標記以及佈局所屬的源代碼集。
  4. 點擊 Finish 以創建佈局。

使用 Project 視圖

  1. 從 Project 窗口中選擇 Project 視圖。
  2. 右鍵點擊想要在其中添加布局的佈局目錄。
  3. 在顯示的上下文菜單中,依次點擊 New > Layout Resource File

使用 Android 視圖

  1. 從 Project 窗口中選擇 Android 視圖。
  2. 右鍵點擊 layout 文件夾。
  3. 在顯示的上下文菜單中,依次選擇 New > Layout Resource File

使用 Resource Manager

  1. 在 Resource Manager 中,選擇 Layout 標籤頁。
  2. 點擊 + 按鈕,然後點擊 Layout Resource File

使用佈局變體針對不同屏幕進行優化

佈局變體是現有佈局的備用版本,針對特定屏幕尺寸屏幕方向進行了優化。

使用建議的佈局變體

Android Studio 包含您可以在項目中使用的常見佈局變體。 如需使用建議的佈局變體,請執行以下操作:

  1. 打開原始佈局文件,點擊窗口右上角的 Design design 模式圖標 圖標。
  2. 點擊工具欄中的 Orientation for Preview 圖標 (orientation for preview 按鈕)。
  3. 在下拉列表中,選擇建議的變體,例如 Create Landscape Variant

創建自己的佈局變體

如果您想要創建自己的佈局變體,請執行以下操作:

  1. 打開原始佈局文件,點擊窗口右上角的 Design (design 模式圖標) 圖標。
  2. 點擊工具欄中的 Orientation for Preview 圖標 orientation for preview 按鈕
  3. 在下拉列表中,選擇 Create Other...
  4. 在顯示的對話框中,定義變體的資源限定符。 從 Available qualifiers 列表中選擇限定符,然後點擊 Add 用於添加限定符的按鈕 按鈕。 根據需要重複此步驟以添加其他限定符。
  5. 添加完所有限定符後,點擊 OK

如果同一佈局有多個變體,如需在這些變體間切換,請點擊 Layout Variants 圖標 layout variants 按鈕 並從顯示的列表中選擇。

如需詳細瞭解如何爲不同屏幕創建佈局,請參閱支持不同的屏幕尺寸

轉換視圖或佈局

您可以將一種視圖轉換爲另一種視圖,也可以將一種佈局轉換爲另一種佈局。

  1. 點擊編輯器窗口右上角的 Design 按鈕。
  2. 在 Component Tree 中,右鍵點擊相應視圖或佈局,然後點擊 Convert view...
  3. 在顯示的對話框中,選擇新類型的視圖或佈局,然後點擊 Apply

將佈局轉換爲 ConstraintLayout

爲了改善佈局性能,您應該將舊版佈局轉換爲 ConstraintLayoutConstraintLayout 採用基於約束條件的佈局系統,讓您無需使用任何嵌套視圖組即可構建大多數佈局。

如需將現有佈局轉換爲 ConstraintLayout,請執行以下操作:

  1. 在 Android Studio 中打開現有佈局,然後點擊編輯器窗口右上角的 Design 按鈕。
  2. 在 Component Tree 中,右鍵點擊該佈局,然後點擊 Convert your-layout-type to ConstraintLayout

如需詳細瞭解 ConstraintLayout,請參閱使用 ConstraintLayout 構建自適應界面

在 Palette 中查找內容

如需在 Palette 中按名稱搜索視圖或視圖組,請點擊 Palette 頂部的 Search 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 窗口中修改視圖屬性。只有在設計編輯器處於打開狀態時,此窗口才會顯示,因此請確保您正在使用 Design 或 Split 模式查看佈局。

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

  1. Declared Attributes 部分會列出佈局文件中指定的屬性。如需添加屬性,請點擊該部分右上角的 Add 用於添加屬性的按鈕 按鈕。
  2. Layout 部分包含視圖的寬度和高度控件。如果視圖位於 ConstraintLayout 中,該部分還會顯示約束偏差,並列出相應視圖使用的約束條件。如需詳細瞭解如何使用 ConstraintLayout,請參閱使用 ConstraintLayout 構建自適應界面
  3. Common Attributes 部分列出了所選視圖的常見屬性。如需查看所有可用的屬性,請展開窗口底部的 All Attributes 部分。
  4. 點擊 Search 按鈕可搜索特定的視圖屬性。
  5. 每個屬性值右側的圖標指示屬性值是否爲資源引用。當屬性值是資源引用時,指示器是非中空的 非中空指示器圖標當屬性值是硬編碼時,指示器是空的 空指示器圖標。這些指示器可幫助您一目瞭然地識別硬編碼值。點擊指示器(無論其處於哪種狀態)會打開 Resources 對話框窗口,您可以在其中選擇相應屬性的資源引用。
  6. 屬性值周圍的紅色突出顯示錶示值存在錯誤。 錯誤可能表示佈局定義屬性的條目無效,如圖 3 中的紅色突出顯示所示。

    橙色突出顯示錶示值存在警告。例如,如果在應該使用資源引用時使用了硬編碼值,就可能會出現警告。

向視圖中添加示例數據

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

注意:當您向 View 添加示例數據時,Android Studio 會更改您的項目,就像您在使用自己的數據一樣。您隨後可以根據需要修改這些更改內容。

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

design time view attributes 窗口
圖 4. Design-time View Attributes 窗口

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

包含示例數據的 text view
Figure 5. 包含示例數據的 TextView

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

包含示例數據的 image view
Figure 6. 包含示例數據的 ImageView

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

包含示例數據的 recycler view
Figure 7. 包含示例數據的 RecyclerView

 

顯示佈局警告和錯誤

佈局編輯器會在 Component Tree 中相應視圖的旁邊使用紅色圓圈感嘆號圖標 紅色圓圈感嘆號圖標,指示佈局錯誤(表示錯誤)或橙色三角形感嘆號圖標 橙色三角形感嘆號圖標,指示佈局警告(表示警告)通知您存在的任何佈局問題。點擊該圖標即可查看更多詳細信息。

如需在編輯器下方的窗口中查看所有已知問題,請點擊工具欄中的 Show Warnings and Errors紅色圓圈感嘆號圖標,指示佈局錯誤 或 橙色三角形感嘆號圖標,指示佈局警告)。

下載字體並將其應用於文本

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

  1. 在佈局編輯器中,點擊 Design 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 完成。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章