大螢幕標準版面配置

大型螢幕標準化版面配置是經過實證、功能多元的應用程式版面配置,可在大型螢幕裝置上提供最佳的使用者體驗。

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

標準版面配置能快速回應及自動調整,並支援小螢幕手機、平板電腦、摺疊式裝置和 ChromeOS 裝置。這些版面配置是根據 Material Design 指南所設計,美觀又實用。

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. 大螢幕標準化版面配置決策樹。

其他資源