大型螢幕標準化版面配置

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

觀看大型螢幕圖片庫導覽,瞭解一系列大型螢幕版面配置的精選內容。

採用各種版面配置設計的大型螢幕裝置美術拼貼。

大型螢幕標準化版面配置是經過實證、功能多元的應用程式版面配置,可在大型螢幕裝置上提供最佳的使用者體驗。版面配置能夠快速回應、自動調整。這些版面配置支援小型螢幕手機,以及平板電腦、折疊式裝置和 ChromeOS 裝置。版面配置根據質感設計指南所設計,美觀又實用。

Android 架構包含特殊的元件,使用檢視畫面或 Jetpack Compose 以直觀可靠的方式實作版面配置。

標準化版面配置可建立引人入勝、提升生產力的 UI,奠定卓越應用程式的基礎。

如果您已熟悉大型螢幕標準化版面配置,但不確定應用程式要使用哪個 Android API,請直接參閱下方的適用性一節,瞭解如何判斷哪個版面配置適合您的應用程式用途。

清單詳細資料

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

藉助清單詳細資料版面配置,使用者可探索具有描述性、解釋性或其他補充資訊的項目清單,例如作品詳細資料。此版面配置將應用程式視窗分為兩個並排的窗格:一個用於清單,另一個用於詳細資料。使用者從清單中選取項目,即可顯示作品詳細資料。詳細資料中的深層連結會顯示詳細資料窗格中的其他內容。

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

中等和精簡寬度螢幕清單或詳細資料,依照使用者與應用程式的互動來顯示清單或詳細資料。僅顯示清單時,選取一個清單項目遍會顯示詳細資料,來取代清單。僅顯示詳細資訊時,按下返回按鈕即可重新顯示清單。

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

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

清單通訊詳細資料最適合用於訊息應用程式、聯絡人管理員、檔案瀏覽器,或可以將內容整理成項目清單,用於顯示其他資訊的其他應用程式。

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

實作

您可以運用各種技術建立清單詳細資料版面配置,包括 Compose、檢視畫面和活動嵌入 (適用於舊版應用程式)。請參閱下方的適用性一節,以協助判斷哪種技術最適用於您的應用程式。

Compose

Compose 的宣告式範例支援視窗大小類別邏輯,可判斷是否要同時顯示清單和詳細資料窗格 (展開寬度視窗大小類別時),或僅顯示清單或詳細資料窗格 (寬度視窗大小類別為中等或精簡時)。

如要確保單向資料流,請提升所有狀態,包括目前的視窗大小類別和目前選取項目的詳細資料 (如果有的話),以便所有可組合項均能存取資料並正確算繪。

如果僅在小型視窗上顯示詳細資料窗格,請新增 BackHandler 以移除詳細資料窗格,並只顯示清單窗格。由於處理常式取決於視窗大小類別和所選的詳細資料狀態,因此 BackHandler 不屬於整體應用程式導覽的一部分。

如需實作範例,請參閱「使用 Compose 建立清單詳細資料」範例。

檢視畫面與片段

SlidingPaneLayout 程式庫可根據檢視畫面或片段,輕鬆實作清單詳細資料版面配置。

首先,將 SlidingPaneLayout 宣告為 XML 版面配置的根元素。接著,新增兩個代表清單和詳細資料內容的子項元素 (檢視畫面或片段)。

實作通訊方法,以便在清單詳細資料檢視畫面或片段之間傳遞資料。建議使用 ViewModel,因為該程式碼能夠儲存商業邏輯,並在設定變更後繼續有效。

SlidingPaneLayout 會自動判斷是否要個別或同時顯示清單與詳細資料。在水平空間足以容納兩者的視窗中,清單和詳細資料會並列顯示。在視窗空間不足的情況下,系統會根據使用者與應用程式的互動,顯示清單或詳細資料。

如需實作範例,請參閱「使用檢視畫面建立清單詳細資料」範例。

活動嵌入

使用活動嵌入功能,即可讓舊版多活動應用程式在同一個畫面中並排顯示兩個活動,或相互疊放顯示。如果應用程式在不同活動中實作清單詳細資料版面配置的清單和詳細資料,活動嵌入功能可讓您輕鬆建立版面配置,而不用重構程式碼或進行最少的程式碼重構作業。

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

Android 12L (API 級別 32) 以上版本支援活動嵌入功能,不過裝置製造商實作的 API 級別也可能較少。如果裝置未提供活動嵌入功能,備用廣告行為則會根據使用者與應用程式的互動,產生佔據整個應用程式視窗的清單活動或詳細資料活動。

詳情請參閱活動嵌入功能

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

動態消息

動態提醒版面配置的線框。

動態提醒版面配置會在可設定格線中排列相對的內容元素,以便快速檢視大量內容。

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

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

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

動態提醒版面配置支援幾乎所有大小,因為格線可從單一捲動欄調整成多欄的捲動內容動態提醒。

動態提醒非常適用於新聞和社群媒體應用程式。

圖 2. 在各種大小的資訊卡中顯示貼文的社群媒體應用程式。

實作

Compose

動態提醒是由垂直捲動容器中的大量內容元素組成,以格線配置。Lazy 清單能夠有效率地在多欄或多列中算繪大量項目。Lazy 格線能夠在格線中算繪項目,支援項目大小和跨距的設定。

根據可用的螢幕區域設定格線版面配置欄,以便設定格線項目的最小寬度。定義格線項目時,調整欄的跨距以強調部分項目。

如果是區段標題、分隔線或其他佔用動態提醒完整寬度的項目,請使用 maxLineSpan 佔用版面配置的整個寬度。

如果精簡寬度螢幕的空間不足以顯示一個欄以上,LazyVerticalGrid 就會像 LazyColumn 一樣運作。

如需實作範例,請參閱「使用 Compose 建立動態提醒」範例。

檢視畫面與片段

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

根據可用螢幕區域的大小設定格線欄,即可設定項目的最小寬度。

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

在僅足以容納單欄的精簡寬度螢幕上,請使用 LinearLayoutManager,而非 GridLayoutManager

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

輔助面板

輔助面板版面配置的線框。

輔助面板版面配置會將應用程式內容整理成主要和次要的顯示區域。主要顯示區域佔用應用程式視窗的大部分空間 (通常約三分之二),包含主要內容。次要顯示區域是佔用應用程式視窗其餘部分的面板,呈現主要內容的輔助內容。

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

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

輔助面板的用途包括:

  • 效率提升應用程式:輔助面板中內含評論者留言的文件或試算表
  • 媒體應用程式:輔助面板中內含相關影片清單的串流影片,或內含播放清單的音樂專輯描述
  • 搜尋與參考應用程式:輔助面板中內含搜尋結果的查詢輸入表單
圖 3. 輔助面板中內含圖片調整控制項的相片應用程式。

實作

Compose

Compose 支援視窗大小類別邏輯,可讓您判斷要同時顯示主要內容和輔助內容,或將輔助內容放在替代位置。

提升所有狀態,包括目前的主要視窗大小類別,以及與主要內容與輔助內容資料相關的資訊。

如果是精簡寬度螢幕,請將輔助內容放在主要內容下方或底部功能表中。如果是中等和展開寬度,請將輔助內容放在主要內容旁,並根據可用的內容和空間適當調整大小。如果是中等寬度,請將顯示空間平分給主要內容和輔助內容。如果是展開寬度,請將 70% 的空間留給主要內容,30% 分給輔助內容。

如需實作範例,請參閱「使用 Compose 建立輔助面板」範例。

檢視畫面與片段

使用 LinearLayoutConstraintLayout 等輔助程式版面配置,實作輔助面板版面配置。設定視窗大小類別,將應用程式可用的水平顯示空間分為三個類別:精簡 (< 600dp)、中等 (>= 600dp) 和展開 (>= 840dp)。

定義版每個視窗大小類別的面配置,如下所示:

  • 精簡:在應用程式資源 layout 資料夾中,將算繪輔助面板的內容放在主要內容下方或底部功能表內
  • 中等:在 layout-w600dp 資料夾中,提供用於並排算繪主要內容與輔助面板的輔助面板內容,並平分水平顯示空間
  • 展開:layout-w840dp 資料夾中,加入用於並排轉譯主要內容與輔助面板的輔助面板內容;但輔助面板只會佔用 30% 的水平空間,其餘 70% 則為主要內容

無論是否使用檢視畫面、片段或組合,使用 ViewModel 在主要內容與輔助面板之間進行通訊。

如需實作範例,請參閱下列範例:

適用性

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

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

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

其他資源