使用版面配置編輯器打造 UI

您可以透過版面配置編輯器快速將 UI 元素拖曳至視覺設計編輯器中，而不必手動編寫版面配置的 XML。設計編輯器可預覽在不同的 Android 裝置和版本上的版面配置，且您可以動態調整版面配置，確保版面配置能在不同的螢幕大小上運作。

使用 ConstraintLayout 建構版面配置時，版面配置編輯器功能特別實用，其為與 Android 2.3 (API 等級 9) 及以上版本相容的版面配置管理器。

本頁提供版面配置編輯器的總覽。如要進一步瞭解版面配置基礎知識，請參閱版面配置一文。

版面配置編輯器簡介

當您開啟 XML 版面配置檔案時，版面配置編輯器隨即顯示。

圖 1 版面配置編輯器

1. 區塊面板：包含多種檢視畫面，以及可拖曳至版面配置的檢視區塊群組。
2. 元件樹狀結構：顯示版面配置中的元件階層。
3. 工具列：按一下這些按鈕，即可在編輯器中設定版面配置的外觀，並變更版面配置屬性。
4. 設計編輯器：在設計檢視、藍圖檢視畫面或兩者中編輯版面配置。
5. 屬性：所選檢視屬性的控制項。
6. 檢視模式：透過以下其中一種方式檢視版面配置：程式碼 、設計 ，或分割 模式。分割模式會同時顯示「程式碼」和「設計」視窗。
7. 縮放和平移控制項：控制編輯器中的預覽大小和位置。

開啟 XML 版面配置檔案時，設計編輯器預設為開啟 (如圖 1 所示)。如要在文字編輯器中編輯版面配置 XML，請按一下視窗右上角的「程式碼」 按鈕。請注意，在程式碼檢視畫面中編輯版面配置時，無法使用區塊面板、元件樹狀結構，以及屬性。

提示：只要按下 Alt + Shift + Right/Left arrow (Mac 上的 Control + Shift + Right/Left arrow)，即可在設計和文字編輯器之間切換。

變更預覽外觀

設計編輯器的頂端資料列中的按鈕，可在編輯器中設定版面配置的外觀。

圖 2 版面配置編輯器工具列中的按鈕，可用來設定版面配置外觀

對應圖 2 的數字，可用的按鈕如下：

1. 「設計和藍圖」：選取您要在編輯器中查看版面配置的方式。選擇「設計」 即可查看版面配置的預覽畫面。選擇「藍圖」，即可只顯示每個檢視畫面的描繪外框。選擇「設計 + 藍圖」，即可查看並排查看這兩種檢視畫面。您也可以按下 B 來循環切換這些檢視畫面類型。
2. 螢幕方向和版面配置變化版本：選擇橫向和直向螢幕模式，或為應用程式提供替代版面配置 (例如夜間模式) 的其他螢幕模式。這個選單包含建立新的版面配置變化版本的指令。 您也可以按下 O 來變更螢幕方向。

3. 裝置類型和大小：選取裝置類型 (手機/平板電腦、Android TV 或 Wear OS) 以及螢幕設定 (大小和密度)。您可以從數種預先設定的裝置類型和自己的 AVD 定義中擇一使用，也可以從清單中選取「新增裝置定義」 來建立新的 AVD。您可以拖曳版面配置的右下角來調整裝置大小。 您也可以按下 D 循環瀏覽裝置清單。根據這些參考裝置測試版面配置，有助於確保您的應用程式在實際裝置上的版面配置縮放到良好的狀態。

   

   圖 3附有參考裝置的裝置挑選器選單。

4. API 版本：選取要預覽版面配置的 Android 版本。

5. 應用程式主題：選取要套用至預覽的 UI 主題。請注意，這項功能僅適用於支援的版面配置樣式，因此清單中的許多主題最後會產生錯誤。

6. 語言：選取 UI 字串要顯示的語言。這份清單只會顯示字串資源中可用的語言。如要編輯翻譯，請按一下下拉式選單中的「編輯翻譯」。如要進一步瞭解如何使用翻譯，請參閱使用翻譯編輯器將 UI 本地化。

注意事項： 除非您選擇從版面配置變化版本中新增版面配置檔案，否則這些設定對於應用程式的程式碼或資訊清單不會產生任何影響。只會影響版面配置預覽。

建立新的版面配置

為應用程式新增版面配置時，請先在專案的預設 layout/ 目錄中建立預設版面配置檔案，使其套用至所有的裝置設定。有了預設版面配置後，您可以針對特定的裝置設定 (例如大螢幕) 建構版面配置的變化版本。

您可以透過下列任一種方式建立新的版面配置：

使用 Android Studio 的主選單

1. 在「專案」視窗中，按一下您要新增版面配置的模組。
2. 在主選單中，依序選取「檔案」 >「新增」 >「XML」 >「版面配置 XML 檔案」。
3. 在隨即顯示的對話方塊中，提供檔案名稱、根版面配置標記和版面配置所屬的來源集。
4. 按一下「完成」即可建立版面配置。

使用「專案」檢視畫面

1. 從「專案」視窗中選擇「專案」 檢視畫面。
2. 在想要新增版面配置的版面配置目錄上按一下滑鼠右鍵。
3. 在隨即顯示的內容選單中，依序按一下「新增」 >「版面配置資源檔案」。

使用 Android 檢視畫面

1. 從「專案」視窗中選擇「Android」 檢視畫面。
2. 在 layout 資料夾上按一下滑鼠右鍵。
3. 在隨即顯示的內容選單中，依序選取「新增」>「版面配置資源檔案」。

使用資源管理員

1. 在「資源管理員」中，選取「版面配置」分頁標籤。
2. 依序點選 + 按鈕和「版面配置資源檔案」。

使用版面配置變化版本，針對不同螢幕進行最佳化調整

版面配置變化版本是指根據特定螢幕大小或方向，將現有版面配置最佳化的替代版本。

使用建議的版面配置變化版本

Android Studio 中具有可用於專案的通用版面配置變化版本。如要使用建議的版面配置變化版本，請按照下列步驟操作：

1. 開啟原始版面配置檔案，然後按一下視窗右上角的「設計」 圖示。
2. 按一下工具列中的「預覽螢幕方向」()。
3. 在下拉式清單中選取建議的變化版本，例如「建立橫向變化版本」。

建立自己的版面配置變化版本

如果您想自行建立版面配置變化版本，請按照下列步驟操作：

1. 開啟原始版面配置檔案，然後按一下視窗右上角的「設計」圖示 ()。
2. 按一下工具列中的「預覽螢幕方向」 。
3. 在下拉式清單中選取「建立其他…」。
4. 在隨即顯示的對話方塊中，定義變化版本的資源限定詞。從「Available qualifiers」清單中選取一個限定詞，然後按一下「Add」按鈕。您可以視需求重複這個步驟，以新增其他限定詞。
5. 新增好所有的限定詞後，按一下「OK」。

如果同一個版面配置有多種變化版本，可以按一下「Add」進行切換，然後從顯示的清單中選擇。

如要進一步瞭解如何為不同螢幕建構版面配置，請參閱支援不同螢幕大小。

轉換檢視畫面或版面配置

您可以將檢視畫面轉換為其他類型的檢視畫面，也可以將版面配置轉換成其他版面配置。

1. 按一下編輯器視窗右上角的「設計」按鈕。
2. 在「Component Tree」(元件樹狀結構) 中，在檢視畫面或版面配置上按一下滑鼠右鍵，然後按一下「轉換檢視畫面…」。
3. 在隨即顯示的對話方塊中，選擇新的檢視畫面或版面配置類型，然後按一下「套用」。

將版面配置轉換成 ConstraintLayout

如要改善版面配置的效能，您必須將較舊的版面配置轉換為 ConstraintLayout。ConstraintLayout 採用限制條件式的版面配置系統，可讓您建構大部分的版面配置，而不需用到任何巢狀檢視區塊群組。

如要將現有的版面配置轉換為 ConstraintLayout，請按照下列步驟操作：

1. 在 Android Studio 中開啟現有的版面配置，然後按一下編輯器視窗右上角的「Design」(設計) 按鈕。
2. 在「Component Tree」(元件樹狀結構) 中，在版面配置上按一下滑鼠右鍵，然後按一下「將 your-layout-type 轉換為 ConstraintLayout」。

如要進一步瞭解 ConstraintLayout，請參閱使用 ConstraintLayout 建構回應式 UI 一文。

尋找區塊面板中的項目

如要在「Palette」中依名稱搜尋檢視畫面或查看群組，請按一下區塊面板頂端的「Search」 按鈕。或者，只要焦點在「Palette」視窗上，您就可以輸入項目名稱。

您可以在「區塊面板」的「Common」類別中找到常用項目。如要將一個項目新增至這個類別，請在「Palette」中的檢視畫面或檢視區塊群組上按一下滑鼠右鍵，然後點選內容選單中的「Favorite」。

從區塊面板開啟文件

如要開啟檢視畫面或檢視區塊群組的 Android 開發人員參考說明文件，請在「Palette」中選取 UI 元素，然後按下 Shift + F1。

如要查看檢視畫面或檢視區塊群組的 Material Guidelines 說明文件，請在「區塊面板」中的 UI 元素上按一下滑鼠右鍵，然後在內容選單中選取「Material Guidelines」。如果該項目沒有特定項目，則指令會開啟「Material Guidelines」說明文件首頁。

在版面配置中加入檢視畫面

如要開始建構版面配置，只要將「Palette」中的檢視畫面和檢視區塊群組拖曳至設計編輯器中即可。在版面配置中放置檢視畫面時，編輯器會顯示檢視畫面與其餘版面配置的關係資訊。

如果您使用的是 ConstraintLayout，則可使用「Infer Constraints」和「Autoconnect」功能自動建立限制。

編輯畫面屬性

圖 4. 「屬性」視窗

您可以在版面配置編輯器右側的「屬性」視窗中編輯檢視畫面屬性。只有在設計編輯器開啟時，系統才會提供這個視窗，因此請務必使用「設計」或「分割」模式來觀看版面配置。

當您選取檢視畫面時，無論是在「Component Tree」(元件樹狀結構) 或設計編輯器中按一下該檢視畫面，「屬性」視窗都會顯示以下內容 (如圖 4 所示)：

1. 「宣告的屬性」區段會列出版面配置檔案中指定的屬性。如要新增屬性，請按一下區段右上方的「新增」按鈕 。
2. 「版面配置」區段包含檢視畫面的寬度和高度的控制項。如果檢視畫面位於 ConstraintLayout，這個區段還會顯示限制偏誤，並列出檢視畫面使用的限制。如要進一步瞭解如何使用 ConstraintLayout，請參閱使用 ConstraintLayout 建構回應式 UI 一文。
3. 「Common Attributes」(常見屬性) 區段會列出所選檢視畫面的常見屬性。如要查看所有可用的屬性，請展開視窗底部的「All Attributes」區段。
4. 按一下「Search」按鈕即可搜尋特定的檢視畫面屬性。
5. 每個屬性值右側的圖示會指出屬性值是否為資源參照。如果該值是某項資源參照，這些指標會以實心 表示，如果值是以硬式編碼方式寫入，則指標為空白 。這些指標可讓您快速認出以硬式編碼方式寫入的值。按一下任一狀態的指標即可開啟「資源」對話方塊，您可以在其中選取對應屬性的資源參照。

6. 屬性值周圍的紅色醒目顯示代表有錯誤值。 錯誤可能表示定義版面配置的屬性具有無效的項目，如圖 3 的紅色醒目顯示所示。

   橘色醒目顯示值代表該值得警示。舉例來說，如果您使用的硬式編碼值應該含有資源參照，系統可能會顯示警示訊息。

在檢視畫面中加入範例資料

由於許多 Android 版面配置都依賴執行階段資料，因此在設計應用程式時，可能會很難看出版面配置的樣式和風格。在 Android Studio 3.2 或以上版本中，您可以將範例預覽資料新增至版面配置編輯器中的 TextView、ImageView 或是 RecyclerView。

注意： 當您將範例資料新增至 View 時，Android Studio 會變更您的專案，就如同使用自己的資料一樣。然後，您就能視需要修改這些變更。

您可以在其中一個檢視畫面類型上按一下滑鼠右鍵，然後選取「設定範例資料」以顯示「設計時間檢視畫面屬性」視窗 (如圖 5 所示)。

圖 5. 「設計時間檢視畫面屬性」視窗

在 TextView 中，您可以選擇不同的範例文字類別。使用範例文字時，Android Studio 會將 TextView 的 text 屬性填入您所選的範例資料。請注意，只有在 text 屬性為空白時，才能透過設計時間檢視畫面屬性視窗中選擇範例文字。

圖 6. 包含範例資料的 TextView

在 ImageView 中，您可以選擇不同的範例圖片。當您選擇範例圖片時，Android Studio 會填入 ImageView 的 tools:src 屬性 (如使用支援資料庫，則為 tools:srcCompat)。

圖 7. 包含範例資料的 ImageView

在 RecyclerView 中，您可以選擇一組含有範例圖片和文字的範本。使用這些範本時，Android Studio 會將檔案新增至 res/layout 目錄 (recycler_view_item.xml)，其中包含範例資料的版面配置。Android Studio 也會將中繼資料新增至 RecyclerView，以正確顯示範例資料。

圖 8. 包含範例資料的 RecyclerView

顯示版面配置警示和錯誤

在「Component Tree」中，版面配置編輯器會在相應檢視畫面旁邊通知您任何版面配置的問題，以紅色圓圈驚嘆號圖示 代表錯誤，而橘色三角形驚嘆號圖示 則代表警示。按一下圖示即可查看詳細資料。

如要查看編輯器下方的視窗中所有已知問題，請按一下工具列中的「顯示警示和錯誤」( 或 )。

下載字型並套用至文字

使用 Android 8.0 (API 級別 26) 或 Android 支援資料庫 26.0.0 或以上版本時，您可以按照下列步驟從數百種字型中選擇：

1. 在版面配置編輯器中，按一下「Design」 按鈕，即可在設計編輯器中查看版面配置。
2. 按一下文字檢視區塊。
3. 在「屬性」視窗中展開「textAppearance」，然後展開「fontFamily」方塊。
4. 捲動至清單底部，然後按一下「更多字型」，即可開啟「資源」對話方塊。
5. 在「資源」對話方塊中瀏覽清單，或在頂端的搜尋列中輸入字型以選取字型。如果您在「Downloadable」中選取了一種字型，即可按一下「Create downloadable font」，讓系統在執行階段將字型以「可下載的字型」載入，或是按一下「Add font to project」，將 TTF 字型檔案封裝在 APK 中。請注意，Android 之下列出的字型是由 Android 系統提供，因此無需在 APK 中下載或組合。
6. 按一下「確定」以結束程序。