標準版面配置

標準版面配置是經過實證、功能多元的版面配置，可為各種板型規格提供最佳使用者體驗。

顯示標準版面配置的大螢幕裝置。

標準版面配置支援小螢幕手機、平板電腦、摺疊式裝置和 ChromeOS 裝置。這些版面配置是根據 Material Design 指南所設計，美觀又實用。

Android 架構包含特殊的元件，可讓您以直觀可靠的方式實作版面配置。

標準化版面配置可建立引人入勝、提升工作效率的 UI，奠定卓越應用程式的基礎。

If you're already familiar with the adaptive app canonical layouts but aren't sure which Android APIs to use, jump to the Applicability section for help determining which layout is right for your app's use cases.

清單詳細資料

清單詳細資料版面配置的線框。

藉助清單詳細資料版面配置，使用者可探索具有描述性、解釋性或其他補充資訊的項目清單，例如作品詳細資料。

此版面配置將應用程式視窗分為兩個並排的窗格：一個用於清單，另一個用於詳細資料。使用者從清單中選取項目，即可顯示作品詳細資料。 詳細資料中的深層連結會顯示詳細資料窗格中的其他內容。

展開寬度螢幕 (請參閱「使用視窗大小類別」) 可同時顯示清單和詳細資料。選取清單項目，即可更新詳細資料窗格，顯示所選項目的相關內容。

寬度中等和較窄的螢幕會依照使用者與應用程式的互動情況，顯示清單或詳細資料。僅顯示清單時，選取某個清單項目會使畫面改為顯示詳細資料，不再顯示清單。僅顯示詳細資訊時，按下返回按鈕即可重新顯示清單。

設定變更 (例如裝置螢幕方向變更或應用程式視窗大小變更) 則會改變螢幕的視窗大小類別。清單詳細資料版面配置會據此回應，保留應用程式狀態：

  • 展開寬度螢幕同時顯示清單和詳細資料窗格時，若其縮小為中等或較窄小，詳細資料窗格仍會繼續顯示，而清單窗格則會隱藏起來
  • 如果寬度為中等或較窄小的螢幕僅顯示詳細資料窗格，且視窗大小類別擴大為展開狀態，清單和詳細資料則會同時顯示，而清單則會指出已選取與詳細資料窗格中內容對應的項目
  • 如果寬度為中等或較窄小的螢幕僅顯示清單窗格，並擴大為展開狀態，清單和預留位置詳細資料窗格會同時顯示

清單/詳細資料很適合用於訊息應用程式、聯絡人管理工具、互動式媒體瀏覽器，或是任何可將內容整理成項目清單的形式來顯示額外資訊的應用程式。

圖 1. 訊息應用程式，顯示了對話清單和所選對話的詳細資料。

實作

A list-detail layout can be created with a variety of technologies, including Compose, views, and activity embedding (for legacy apps). See the Applicability section for help deciding which technology is most suitable for your app.

The SlidingPaneLayout library is designed for implementation of list‑detail layouts based on views or fragments.

First, declare a SlidingPaneLayout as the root element of your XML layout. Next, add the two child elements—either views or fragments—that represent the list and detail content.

Implement a communication methodology to pass data between the list-detail views or fragments. ViewModel is recommended because of its ability to store business logic and survive configuration changes.

SlidingPaneLayout automatically determines whether to display the list and detail together or individually. In a window that has enough horizontal space to accommodate both, the list and detail appear side by side. In a window that lacks sufficient space, either the list or detail is displayed depending on the user's interaction with the app.

For an example implementation, see the List-detail with sliding pane sample.

活動嵌入

使用活動嵌入功能，即可讓舊版多活動應用程式在同一個畫面中並排顯示兩個活動，或相互疊放顯示 (一個活動疊加在另一個活動上)。如果應用程式在不同活動中實作清單/詳細資料版面配置的清單和詳細資料，活動嵌入功能可讓您在幾乎不需要重構程式碼的情況下建立清單/詳細資料版面配置。

使用 XML 設定檔指定工作視窗分割，實作活動嵌入功能。分割定義了啟動分割的主要活動和次要活動。使用視窗大小類別中斷點，指定分割的最小顯示寬度。螢幕寬度低於最小中斷點時，活動就會疊加顯示。舉例來說，如果螢幕最小寬度為 600 dp，活動會在精簡螢幕上顯示另一個活動，但在中等和展開螢幕上會並排顯示。

Android 12L (API 級別 32) 以上版本皆支援活動嵌入功能，不過裝置製造商也可能為 API 級別較低的版本導入這項功能。如果裝置上無法使用活動嵌入功能，備用行為會導致清單活動或詳細資料活動，根據使用者與應用程式的互動產生佔據整個應用程式視窗的詳細資料活動。

詳情請參閱活動嵌入功能。

如需實作範例，請參閱「使用活動嵌入功能建立清單詳細資料」範例。

動態消息

動態消息版面配置的線框。

動態消息版面配置會在可設定格線中，排列對等的內容元素，以便快速檢視大量內容。

大小和位置建立內容元素之間的關係。

內容群組的建立方式是建立相同大小的元素並放在一起。讓這些元素比鄰近元素還要大，藉此吸引對於元素的注意。

資訊卡和清單是動態提醒版面配置的常見元件。

動態消息版面配置幾乎可支援所有螢幕尺寸，因為這種配置方式可調整內容顯示格框，單欄或多欄捲動都沒問題。

動態消息特別適合新聞和社群媒體應用程式。

圖 2. 社群媒體應用程式在不同大小的資訊卡上顯示貼文。

實作

RecyclerView 能夠有效率地在單欄中算繪大量項目。GridLayoutManager 會在格線中配置項目，以便您設定項目大小和跨距。

根據可用顯示區域的大小設定格線欄，以設定項目的最小寬度。

您可以建立自訂 SpanSizeLookup，覆寫 GridLayoutManager 預設跨距策略 (每個項目一個跨距)。如要強調部分項目，請調整跨距。

在寬度足夠且只能容納一欄的螢幕上，請使用 LinearLayoutManager，而非 GridLayoutManager。

如需實作範例，請參閱「使用檢視畫面建立動態提醒」範例。

輔助窗格

輔助窗格版面配置的線框圖。

輔助窗格版面配置會將應用程式內容整理成主要和次要顯示區域。

主要顯示區域會占用應用程式視窗的大部分空間 (通常約三分之二)，用於呈現主要內容。次要顯示區域是窗格，會佔用應用程式視窗的其餘部分，並呈現主要內容的輔助內容。

輔助窗格版面配置非常適合橫向的展開寬度螢幕 (請參閱「使用視窗大小類別」)。中等或精簡寬度螢幕支援顯示主要和次要顯示區域，前提是內容可根據更窄的顯示空間調整，或其他內容最初可隱藏在底部或側邊功能表中 (以選單或按鈕等控制項存取)。

就主要和次要內容的關係而言，輔助窗格版面配置不同於清單詳細資料版面配置。在輔助窗格版面配置中，次要窗格內容只因與主要內容相關而有意義。舉例來說，輔助窗格工具視窗本身並不重要。不過，即使沒有主要內容 (例如產品資訊中的產品說明)，在清單詳細資料版面配置的詳細資料窗格中的補充內容也仍然有意義。

輔助窗格的用途如下：

圖 3. 購物應用程式以輔助窗格顯示產品說明。

實作

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

  • Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
  • Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
  • Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

適用性

標準化版面配置可創造出多面向的內容呈現方式，方便使用者輕鬆存取及深入探索。請依照下方流程圖，找出最適合應用程式用途的版面配置和實作策略。

如需在不同類型應用程式中實作的標準化版面配置範例，請參閱「大螢幕圖片庫」。

圖 4. 大螢幕標準化版面配置決策樹。

其他資源