支援不同的螢幕尺寸

如果應用程式支援各種螢幕尺寸，就能讓更多使用者在更多裝置上存取應用程式。

如要盡可能支援多種螢幕大小 (包括不同裝置螢幕或多視窗模式中的不同應用程式視窗)，請設計回應式及自動調整式應用程式版面配置。無論螢幕大小為何，回應式/自動調整式版面配置都可提供最佳的使用者體驗，讓應用程式能根據手機、平板電腦、折疊式裝置、ChromeOS 裝置、直向和橫向螢幕方向，以及大小調整設定 (例如分割畫面模式和電腦視窗)，配合調整大小。

回應式/自動調整式版面配置會配合可用的顯示區域而變化。變更範圍從填滿空間的版面配置小調整 (回應式設計) 到完全取代版面配置，以便應用程式能最佳配合不同的螢幕大小 (自動調整式設計)。

Jetpack Compose 是一種宣告式 UI 工具包，十分適合用來設計及導入可配合各種畫面大小自行調整算繪內容的版面配置。

明確配合內容層級可組合項大幅變更版面配置

應用程式層級和內容層級可組合項會佔用應用程式可用的所有顯示空間。對於這類可組合項，建議您變更大螢幕上應用程式的整體版面配置。

避免使用實體硬體值來決定版面配置。您可能會想根據固定的實際資訊做決策 (該裝置是平板電腦嗎？實體螢幕有特定的顯示比例嗎？)，但這些問題的答案對於協助您判斷 UI 可以使用的空間，可能沒有幫助。

圖 1. 手機、摺疊式裝置、平板電腦和筆記型電腦板型規格

在平板電腦上，應用程式可能會在多視窗模式下執行，這時應用程式可能會在畫面上與其他應用程式並排顯示；在桌面視窗模式或 ChromeOS 上，應用程式可能會在可調整大小的視窗中執行。裝置上甚至可能有多個實體螢幕，例如折疊式裝置。在這些情況下，實體螢幕的大小就無法用來判斷如何顯示內容。

您必須改為根據實際分配給應用程式的畫面部分 (例如 Jetpack WindowManager 程式庫所提供的目前視窗指標) 做決定。如需在 Compose 應用程式中使用 WindowManager 的範例，請參閱 JetNews 範例。

此外，如果版面配置可因應螢幕空間調整，系統就能降低特殊處理工作量，輕鬆支援 ChromeOS 等平台和平板電腦與折疊式裝置等板型規格。

確定應用程式可用的空間指標後，請將原始大小轉換為視窗大小類別，如「使用視窗大小類別」一節所述。「視窗大小類別」是一種中斷點，設計目的是要讓您在最佳化應用程式時兼顧簡單與靈活，能滿足大多數螢幕大小的需求。視窗大小類別指的是應用程式的整體視窗，因此請利用這些類別來決定會影響整體應用程式版面配置的版面配置決策。您可以將視窗大小類別當成狀態向下傳遞，或者，也可以執行額外邏輯以建立衍生狀態，再向下傳遞到巢狀可組合項中。

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

這種分層做法可將螢幕大小邏輯限制在單一位置，而不會散布到應用程式需要保持同步的其他地方。單一位置會產生狀態，您可以將此狀態明確向下傳遞給其他可組合項，就像傳遞其他應用程式狀態一樣。明確傳遞狀態可簡化個別可組合項，因為可組合項會攜帶著大小類別或指定的設定，並搭配其他資料。

彈性巢狀可組合項可重複使用

要是可組合項可以放置在許多不同位置，就能提升重複使用的可能性。如果可組合項必須放置在特定位置且具有特定大小，則可組合項不太可能在其他情境中重複使用。這也表示可重複使用的個別可組合項應避免仰賴全域顯示大小資訊。

想像一個巢狀可組合項導入了「清單 - 詳細資料」版面配置，螢幕可能會顯示單一窗格或兩個並排的窗格：

應用程式並排顯示兩個窗格。
圖 2. 應用程式顯示一般清單/詳細資料版面配置：1 是清單區域，2 是詳細資料區域。

清單詳細資料決策應屬於應用程式整體版面配置的一部分，因此這項決策會從內容層級可組合項向下傳遞：

@Composable
fun AdaptivePane(
    showOnePane: Boolean,
    /* ... */
) {
    if (showOnePane) {
        OnePane(/* ... */)
    } else {
        TwoPane(/* ... */)
    }
}
AdaptiveLayoutSnippets.kt

如果您想改為讓可組合項根據可用的顯示空間獨立變更版面配置，例如資訊卡，我們希望如果空間允許，就顯示更多詳細資訊，該怎麼做？您想依據某些可用顯示大小執行某些邏輯，但具體來說該指定哪個大小？

圖 3. 較窄的資訊卡只顯示圖示和標題，較寬的資訊卡則顯示圖示、標題和簡短說明。

請避免將尺寸設為裝置的實際螢幕大小，這麼做並不適用於不同類型的螢幕，也不適用於非全螢幕的應用程式。

由於可組合項並非內容層級可組合項，請勿直接使用目前的視窗指標。如果元件用於邊框間距 (例如插邊)，或應用程式有導覽邊欄或應用程式列等元件，可組合項的可用顯示空間量與應用程式的整體可用空間可能會有極大差異。

使用實際為可組合項指定的寬度來算繪可組合項本身。您可以透過兩種方式取得寬度：

  • 如要變更內容的顯示位置或顯示方式，請使用一系列的修飾符或自訂版面配置，讓版面配置具有回應性。這可以簡單得像拿一些子項填滿所有可用空間，或是在有足夠空間的情況下，以多個資料欄擺放子項。

  • 如要變更顯示的內容，請使用 BoxWithConstraints 這個更強大的替代方法。BoxWithConstraints 提供成效評估限制，可讓您根據可用的顯示空間呼叫不同的可組合項。不過，這伴隨著一些代價，BoxWithConstraints 會將組成作業延遲到版面配置階段 (此時會知道有哪些限制)，導致版面配置期間必須執行更多作業。

@Composable
fun Card(/* ... */) {
    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(/* ... */)
                Title(/* ... */)
            }
        } else {
            Row {
                Column {
                    Title(/* ... */)
                    Description(/* ... */)
                }
                Image(/* ... */)
            }
        }
    }
}
AdaptiveLayoutSnippets.kt

確保所有資料皆可用於各種螢幕尺寸

導入可利用額外顯示空間的可組合項時，您可能會想提高效率，並載入資料做為目前顯示大小的副作用。

不過，這樣做與單向資料流原則牴觸，在單向資料流中，資料可以提升並提供給可組合項，以便適當進行算繪。必須為可組合項提供足夠資料，讓可組合項隨時都具備在任何大小螢幕上顯示內容所需的材料，即使其中部分內容可能不會每次都用到。

@Composable
fun Card(
    imageUrl: String,
    title: String,
    description: String
) {
    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(imageUrl)
                Title(title)
            }
        } else {
            Row {
                Column {
                    Title(title)
                    Description(description)
                }
                Image(imageUrl)
            }
        }
    }
}
AdaptiveLayoutSnippets.kt

以 Card 範例為基礎，請注意，description 一律會傳遞至 Card。雖然 description 只有在寬度允許顯示時才會使用，但無論可用寬度為何，Card 一律會要求 description。

一律傳遞足夠的內容，可降低自動調整式版面配置的有狀態程度，使其變得較簡單，避免在切換不同大小時觸發副作用 (這可能會發生在重新調整視窗大小、螢幕方向改變，或折疊及展開裝置時)。

這個原則也讓您可以在版面配置發生變化時保留狀態。由於資訊可能不適用於所有螢幕尺寸，因此「提升」(hoisting) 這類資訊後，您就能在版面配置大小變更時保留應用程式狀態。舉例來說，您可以提升 showMore 布林值標記，這樣一來，在畫面大小有所調整，導致版面配置在隱藏和顯示內容之間切換時，應用程式狀態就能保留下來：

@Composable
fun Card(
    imageUrl: String,
    title: String,
    description: String
) {
    var showMore by remember { mutableStateOf(false) }

    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(imageUrl)
                Title(title)
            }
        } else {
            Row {
                Column {
                    Title(title)
                    Description(
                        description = description,
                        showMore = showMore,
                        onShowMoreToggled = { newValue ->
                            showMore = newValue
                        }
                    )
                }
                Image(imageUrl)
            }
        }
    }
}
AdaptiveLayoutSnippets.kt

瞭解詳情

如要進一步瞭解 Compose 中的自適應版面配置，請參閱下列資源：

範例應用程式

  • CanonicalLayouts 是經過實證的設計模式存放區，可在大螢幕上提供最佳使用者體驗
  • JetNews 說明如何設計可調整 UI 的應用程式，以便運用可用的顯示空間
  • Reply 是支援行動裝置、平板電腦和折疊式裝置的自動調整範例
  • Now in Android 是使用自適應版面配置來支援不同螢幕大小的應用程式

影片

上一頁
標準化版面配置
下一頁
使用視窗大小類別