透過檢視畫面的回應式/自動調整設計

無論採用何種應用程式，回應式/自動調整式版面配置都能提供最佳的使用者體驗 螢幕大小。導入回應式/自動調整式版面配置， 以檢視畫面為基礎的應用程式，支援所有顯示大小、方向和 包括可調整大小的設定，例如多視窗模式 模式。

回應式設計

如要支援多種裝置板型規格 能配合可用顯示空間大小變化的版面配置 導入您的應用程式

ConstraintLayout

如要建立回應式版面配置，最好的方法就是使用 ConstraintLayout敬上 做為 UI 的基本版面配置。ConstraintLayout 可讓您指定 根據與其他檢視區塊的空間關係，決定每個檢視畫面的位置和大小 版面配置的檢視畫面如此一來，所有檢視畫面就可以一起移動和調整大小 顯示空間變更

使用 ConstraintLayout 建立版面配置最簡單的方式，就是使用 Android Studio 中的版面配置編輯器。版面配置編輯器可讓您將新的檢視畫面拖曳至 套用版面配置、套用與父項和同層級檢視畫面相關的限制，並設定檢視畫面 屬性，而且完全不需手動編輯 XML。

詳情請參閱「使用以下工具建構回應式 UI： ConstraintLayout。

回應式寬度和高度

如要確保版面配置能回應不同的顯示大小，請使用 寬度和 wrap_content、match_parent 或 0dp (match constraint) 檢視畫面元件的高度，而非硬式編碼值：

• wrap_content：檢視畫面會設定其大小以符合檢視區塊包含的內容。
• match_parent：檢視畫面會在父項檢視畫面中盡可能展開。
• 0dp (match constraint)：在 ConstraintLayout 內，類似於 match_parent。檢視區塊會佔用檢視畫面中的所有可用空間 限制。

例如：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

圖 4 說明 TextView 的寬度和高度如何隨著螢幕調整 寬度會隨著裝置螢幕方向而改變

TextView 會將寬度設定為填滿所有可用空間 (match_parent)，以及 高度到完全取決於所含容器高度所需的空間 文字 (wrap_content)，讓檢視畫面適應不同的螢幕 文字尺寸和文字量也不同

如果你使用 LinearLayout， 也能根據版面配置 權重，讓檢視畫面填滿 可用的空間。不過，在巢狀 LinearLayout 中使用權重時， 系統會執行多個版面配置傳遞作業，藉此決定每個 Pod 的 導致 UI 效能降低

ConstraintLayout 可建立幾乎所有可能的版面配置： 不影響效能的 LinearLayout，因此轉換巢狀結構 LinearLayout 至 ConstraintLayout。接著是 可定義設有限制的加權版面配置 鏈結。

自動調整式設計

應用程式版面配置應能配合各種螢幕大小隨時調整。 不過，就算是回應式版面配置，也無法在 個別裝置或多視窗模式的顯示畫面。舉例來說 可能無法透過 平板電腦。自動調整式設計可提供替代版面配置，針對不同 顯示尺寸

用於清單/詳細資料 UI 的 SlidingPaneLayout

一般來說，清單/詳細資料 UI 可為 支援各種螢幕大小的螢幕在大螢幕上，清單窗格和詳細資料窗格 通常會並排顯示使用者選取清單中的項目時，項目資訊會 而不需變更 UI，但兩個窗格仍會保留 並排顯示。但在小螢幕上，這兩個窗格會分開顯示 佔據整個顯示區域的每個窗格。當清單窗格中的項目 就會取代含有所選項目資訊的詳細資料窗格 清單窗格返回導覽會以清單窗格取代詳細資料窗格。

SlidingPaneLayout敬上 可管理判斷何種使用者體驗的邏輯 適合目前的視窗大小：

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

內含兩個檢視畫面的 layout_width 和 layout_weight 屬性 SlidingPaneLayout 會決定 SlidingPaneLayout 行為。在這個範例中 如果視窗夠大 (寬度至少為 580dp) 以同時顯示兩個檢視畫面， 窗格會並排顯示。但如果視窗寬度小於 580 dp，窗格會滑動至另一個窗格上方，各自佔滿整個應用程式 視窗。

如果視窗寬度大於所指定最小寬度的總和 (580 dp)， layout_weight 值可用來按比例調整兩個窗格的大小。在 舉例來說，由於清單窗格並未設定權重，因此一律為 280 dp。 但詳細資料窗格一律會填滿超過 580 dp 的水平空間，因為 檢視畫面的 layout_weight 設定。

替代版面配置資源

如要讓 UI 設計調整為各種螢幕大小，請使用其他版面配置 由資源識別 限定詞

如要提供適用於特定螢幕的自動調整式版面配置，您可以建立其他 應用程式原始碼中的 res/layout/ 目錄。為每個 需要不同的版面配置然後附加一個畫面 設為 layout 目錄名稱的設定限定詞 (例如 layout-w600dp 適用於可用寬度為 600dp 的螢幕。

這些設定限定詞代表 應用程式使用者介面所有系統裝飾 (例如 導覽列)，以及視窗設定變更 (例如多視窗模式) mode)。

如要在 Android Studio 中建立替代版面配置，請參閱「將版面配置變化版本用於 針對不同螢幕進行最佳化調整 使用 View 開發 UI。

最小寬度限定詞

使用「最小寬度」螢幕大小限定詞，即可提供替代選項 寬度最小的螢幕版面配置 (以「密度獨立」為單位) 像素 (dp)。

透過以 dp 為單位描述螢幕大小，Android 可讓您建立 專為特定螢幕尺寸設計的版面配置，讓您不必煩惱 不同的像素密度

舉例來說，您可以建立名為 main_activity 的版面配置，藉此針對 製作不同版本的檔案， 目錄：

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

最小寬度限定詞可指定顯示兩邊的最小寬度。 預設會不受裝置螢幕方向影響，因此可指定 版面配置可用的整體顯示大小

以下列出幾種最小寬度值與一般螢幕大小的對應關係：

• 320 dp：手機螢幕小 (240 x 320 ldpi、320 x 480 mdpi、480 x 800 hdpi 等)
• 480 dp：大型手機螢幕，約 5 吋(480x800 mdpi)
• 600 dp：7 英寸平板電腦 (600 x 1024 mdpi)
• 720 dp：10 英寸平板電腦 (720 x 1280 mdpi、800 x 1280 mdpi 等)

下圖提供更詳細的畫面 dp 差異的詳細資料 寬度和方向也一致

「最小寬度」限定詞的值為 dp，因為 系統計算像素密度後可用的顯示空間大小 而非原始像素解析度)。

您透過最小寬度等資源限定詞指定的大小如下 而不是實際的螢幕大小而是會指定廣告素材的寬度或高度 應用程式視窗可用的 dp 單位。Android 系統可能會使用 部分系統 UI 畫面 (例如 或頂端的狀態列)，因此部分畫面可能不會顯示 不同版面的版面如果應用程式用於多視窗模式， 應用程式只能存取包含該應用程式的視窗大小。當 視窗大小經過調整後，會觸發設定 調整視窗大小 可讓系統選取合適的版面配置檔案。資源中 您宣告的限定詞大小應只指定應用程式所需的空間。 系統在提供空間給 版面配置

可用寬度限定詞

您不需要根據螢幕最小寬度來變更版面配置 可能會想根據可用的寬度或高度來變更版面配置 舉例來說，您可能想在畫面時一律採用雙窗格版面配置 提供的寬度至少為 600dp，視 裝置處於橫向或直向狀態。此時，您應該使用 可用寬度限定詞，如下所示：

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

如果應用程式需考量可用高度，可以使用 可用高度限定詞。例如，layout-h600dp 適用於 螢幕高度至少為 600 dp。

螢幕方向限定詞

即使您可能只使用 「最小寬度」和「可用寬度」限定詞的組合，則可能需要 也希望使用者切換直向模式時 以及橫向螢幕方向

為此，您可以將 port 或 land 限定詞新增到版面配置目錄 。不過要確保螢幕方向限定詞在尺寸限定詞後方。 例如：

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

如要進一步瞭解所有螢幕設定限定詞，請參閱應用程式 資源總覽。

視窗大小類別

視窗大小類別是可視區域中斷點，可協助您建立自動調整式 版面配置中斷點會將應用程式可用的顯示區域視為 精簡、中等或展開：寬度和高度是分開指定 所以應用程式一律設有寬度的視窗大小類別， 。

如要透過程式輔助方式套用自動調整式版面配置，請按照下列步驟操作：

• 根據視窗大小類別中斷點建立版面配置資源
• 使用 WindowSizeClass#compute()敬上 函式 (來自 Jetpack WindowManager) 程式庫
• 加載目前視窗大小類別的版面配置資源

，瞭解如何調查及移除這項存取權。

詳情請參閱「視窗大小」一節 類別。

使用片段將 UI 元件模組化

針對多種顯示大小設計應用程式時，請使用片段擷取 將 UI 邏輯分入多個獨立元件中，以避免不必要的 跨活動複製 UI 行為。接著您可以結合片段 在大螢幕上建立多窗格版面配置，也可以將片段置入 小螢幕的不同活動

例如，清單/詳細資料模式 (請參閱 SlidingPaneLayout) 包含清單的片段，以及另一個包含清單項目的片段 詳細資料。在大螢幕上，片段可以並排顯示；為 分別佔滿整個螢幕的小螢幕。

詳情請參閱「片段」總覽。

活動嵌入

如果應用程式內含多項活動，您可以利用活動嵌入功能 輕鬆建立自動調整式 UI

活動嵌入功能可顯示多項活動，或 在應用程式工作視窗中同時執行相同的活動。在大螢幕上 活動則可並列顯示疊加在小螢幕上 彼此的效能

您可以建立 XML，決定應用程式顯示活動的方式 系統藉此判斷出 根據顯示大小做出選擇您也可以建立 Jetpack WindowManager API 呼叫。

活動嵌入功能可支援裝置螢幕方向變更，並支援摺疊式裝置。 在裝置旋轉、摺疊及展開時堆疊及解除堆疊活動。

詳情請參閱「活動 嵌入

螢幕大小和顯示比例

以各種螢幕大小和顯示比例測試應用程式，確保 UI 符合預期 比例。

Android 10 (API 級別 29) 以上版本支援多種顯示比例。 折疊式裝置板型規格可能會因高窄的螢幕而異。例如， 摺疊時，展開時轉換成 1:1 的正方形顯示比例。

為確保與更多裝置相容，請盡可能測試應用程式 多種螢幕顯示比例如下：

如果只能選擇適合不同螢幕大小的裝置 ，您可以使用 Android Emulator 來模擬 幾乎適合所有螢幕大小

如果您想在實體裝置上進行測試，但手邊沒有裝置，則可以使用 Firebase Test Lab，即可存取 大量部署裝置

其他資源

• Material Design：瞭解版面配置