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

無論螢幕大小為何,回應式/調適性版面配置都可以提供最佳的使用者體驗。實作回應式/自動調整式版面配置,讓以檢視區塊為基礎的應用程式支援所有螢幕大小、方向和設定,包括可調整大小的設定,例如多視窗模式

回應式設計

如要支援多種裝置板型規格,首先需要建立版面配置,以便因應應用程式可用的螢幕空間數量變化。

ConstraintLayout

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

使用 ConstraintLayout 建立版面配置最簡單的方式,就是使用 Android Studio 中的版面配置編輯器。透過版面配置編輯器,您可以將新的檢視畫面拖曳至版面配置,套用與父項及同層級檢視畫面相對應的限制,並設定檢視畫面屬性,過程中完全不必手動編輯 XML。

圖 3. Android Studio 的版面配置編輯器,顯示 ConstraintLayout

詳情請參閱「使用 ConstraintLayout 建構回應式 UI」。

回應式寬度和高度

為確保版面配置能回應不同顯示大小,請使用 wrap_contentmatch_parent0dp (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 的寬度和高度。

圖 4. 回應式 TextView

TextView 會將寬度設定為填滿所有可用空間 (match_parent),且高度等於包含文字的高度所需的空間 (wrap_content),這樣一來,檢視畫面就能根據不同的螢幕尺寸及不同的文字量進行調整。

如果您使用 LinearLayout,也可以透過版面配置權重展開子檢視畫面,讓檢視畫面按比例填滿可用空間。不過,在巢狀 LinearLayout 中使用權重時,系統必須執行多項版面配置傳遞作業,才能判斷每個檢視畫面的大小,而這會降低 UI 效能。

ConstraintLayout 可使用 LinearLayout 建立幾乎所有可能的版面配置,且不會影響效能,因此請將巢狀 LinearLayout 轉換為 ConstraintLayout。之後,您就能使用限制鏈結定義加權版面配置

自動調整設計

應用程式版面配置應能配合各種螢幕大小隨時調整。但就算是回應式版面配置,也無法在所有裝置或多視窗模式螢幕上提供最佳使用者體驗。舉例來說,專為手機設計的 UI 可能無法在平板電腦上提供最佳使用者體驗。自動調整式設計可提供替代版面配置,針對不同螢幕尺寸進行最佳化。

用於清單/詳細資料 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>

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

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

替代版面配置資源

如要讓 UI 設計回應各種顯示大小,請使用以資源限定詞識別的替代版面配置。

圖 5. 同一應用程式針對不同顯示大小使用不同的版面配置。

在應用程式原始碼中建立額外的 res/layout/ 目錄,即可提供適用於特定螢幕的自動調整式版面配置。請為需要不同版面配置的每個螢幕設定建立目錄。然後將螢幕設定限定詞附加至 layout 目錄名稱。舉例來說,若螢幕可用寬度為 600 dp,限定詞為 layout-w600dp

這些設定限定詞代表應用程式 UI 可用的顯示顯示空間。系統為應用程式選擇版面配置時,會考量任何系統裝飾 (例如導覽列),以及視窗設定變更 (例如多視窗模式)。

如要在 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:小型手機螢幕 (240x320 ldpi、320x480 mdpi、480x800 hdpi 等)
  • 480 dp:大型手機螢幕,約 5 吋 (480 x 800 mdpi)
  • 600 dp:7 吋平板電腦 (600 x 1024 mdpi)
  • 720 dp:10 吋平板電腦 (720 x 1280 mdpi、800 x 1280 mdpi 等)

下圖詳細說明不同螢幕 dp 寬度如何對應不同的螢幕大小和方向。

圖 6. 建議使用的寬度中斷點,以支援不同的螢幕大小。

「最小寬度」限定詞的值以 dp 為單位,因為重要的是系統計算像素密度後可用的顯示空間,而非原始像素解析度。

以最小寬度等資源限定詞指定的大小並非實際螢幕大小,而是以 dp 為單位的應用程式視窗可用寬度或高度。Android 系統可能會將部分螢幕空間用於系統 UI,例如螢幕底部的系統資訊列或頂端的狀態列,因此版面配置可能無法使用部分螢幕空間。如果應用程式是在多視窗模式下使用,應用程式就只能存取含有該應用程式的視窗大小。視窗大小經過調整時,新視窗大小會觸發設定變更,系統就能選取合適的版面配置檔案。因此,您宣告的資源限定詞大小應只指定應用程式所需空間。系統為版面配置提供空間時,會計算系統 UI 所使用的所有空間。

可用寬度限定詞

您變更版面配置時,可能不會想以螢幕最小寬度為依據,而是根據可用的寬度或高度。舉例來說,您可能想在螢幕寬度至少為 600 dp 時使用兩個窗格的版面配置,但寬度可能會依裝置螢幕方向為橫向或直向而改變。在這種情況下,您應使用「可用寬度」限定詞,如下所示:

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)

如果應用程式需考量可用高度,可以使用「可用高度」限定詞。舉例來說,若螢幕高度至少為 600 dp,則限定詞為 layout-h600dp

螢幕方向限定詞

雖然您可能只需組合「最小寬度」和「可用寬度」限定詞,就能支援所有的大小變化,但您可能還希望在使用者切換直向和橫向螢幕方向時改變使用者體驗。

為此,您可以將 portland 限定詞新增到版面配置目錄名稱中,不過要確保螢幕方向限定詞在尺寸限定詞後方。例如:

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

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

視窗大小類別

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

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

  • 根據視窗大小類別中斷點建立版面配置資源
  • 使用 Jetpack WindowManager 程式庫中的 WindowSizeClass#compute() 函式,計算應用程式的寬度和高度視窗大小類別
  • 為目前的視窗大小類別加載版面配置資源

如要進一步瞭解視窗大小類別,請參閱「支援不同的螢幕大小」。

使用片段將 UI 元件模組化

為多種顯示大小設計應用程式時,請使用片段將 UI 邏輯擷取至不同元件,避免在不同活動之間複製 UI 行為。然後,您可以組合片段,在大螢幕上建立多窗格的版面配置,也可以將片段置入小螢幕的不同活動中。

舉例來說,實作清單詳細資料模式 (請見上文的 SlidingPaneLayout) 時,可以使用一個含有清單的片段,以及另一個含有清單項目詳細資料的片段。在大螢幕上,片段可以並排顯示;而在小螢幕上,則可以各自佔滿螢幕。

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

活動嵌入

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

活動嵌入功能可在應用程式工作視窗中,同時顯示多項活動或同一活動的多個例項。在大螢幕上,活動可以並排顯示,在小螢幕上則可堆疊在其他活動上方。

您可以建立 XML 設定檔,讓系統根據螢幕尺寸決定適當的呈現方式,藉此決定應用程式顯示活動的方式。您也可以進行 Jetpack WindowManager API 呼叫。

活動嵌入功能可支援裝置螢幕方向變化,並可在折疊式裝置旋轉、摺疊及展開時堆疊及取消活動堆疊。

詳情請參閱活動嵌入功能

螢幕大小和長寬比

請以各種螢幕大小和顯示比例測試應用程式,確保 UI 可正確縮放。

Android 10 (API 級別 29) 以上版本支援多種顯示比例。折疊式裝置的板型規格可能來自高窄型螢幕 (例如折疊時為 21:9),展開時的正方形顯示比例為 1:1。

為確保與更多裝置相容,請針對下列螢幕顯示比例,盡可能測試您的應用程式:

圖 7.各種螢幕顯示比例。

如果無法取得每個要測試的螢幕大小裝置,可使用 Android Emulator 模擬幾乎所有螢幕大小。

如果您想在實體裝置上測試,但沒有該裝置,可以使用 Firebase Test Lab 存取 Google 資料中心內的裝置。

其他資源