內容組成與結構

運用內容的結構和包含方法，建立彈性的流程和節奏。首先設計版面配置容器，然後新增內容。

1. 基本結構：引導內容的版面配置格線

如要開始建立穩固的結構，並維持一致的防護措施，請在版面配置中新增邊界和欄。

邊界會在畫面和內容的左右兩側邊緣提供間距。 小型尺寸的標準邊界值為 16 dp，但邊界應配合大螢幕調整。應用程式的內容和動作必須位於這些邊界內，且與邊界對齊。

您也可以在這個步驟中，確保插入安全區域或插邊。系統資訊列插邊可避免重要動作落在系統資訊列下方。您應該在系統資訊列後方繪製內容。

使用資料欄建構彈性格線結構，確保對齊一致，並在主體區域中劃分內容，為版面配置提供垂直定義。內容會顯示在含有欄的螢幕區域。這些欄會為版面配置提供結構，方便您安排元素。

內容重要性或階層有助於決定版面配置格線類型，進而帶來更多結構。如果內容有明確的層級，就適合使用階層式版面配置格線，例如編輯版面配置或詳細資料畫面，其中包含大型標題和主視覺。

如果內容和版面配置同樣重要但結構嚴謹，例如相片庫，模組化格線就非常適合。

如要建立一致的回應式單向版面配置，或需要更高的彈性，請選擇欄格線。

無論是哪種型別，版面配置格線都應配合大小和板型規格調整。

這個範例使用 grid 資料欄，在保留彈性大小的同時，將內容與基礎格線對齊。為配合不同板型規格，欄格線會根據畫面大小變更欄大小和欄數，讓內容也能隨之縮放。避免版面配置格線過於細密。建議改用基準格線，提供一致的間距單位。

或者，您也可以使用階層式版面格線，讓詳細資料畫面保持井然有序。

首先，請使用一致的版面配置格線。如果內容需要，請打破格線。即使如此，您可能會發現其他格線仍符合內容需求。

進一步瞭解版面配置容器，例如分頁器和流程版面配置。

手稿和砌磚是其他類型的版面配置格線。

無論選擇哪種版面配置格線，都可以使用窗格的容器概念，將內容分組以用於自動調整式版面配置。舉例來說，使用的範例是詳細資料畫面，也就是可在清單詳細資料版面配置中顯示的窗格。

2. 套用容器

使用區隔在視覺上將元素分組。

區隔是指同時使用空白字元和可見元素，在視覺上建立分組。容器是代表封閉區域的形狀。在單一版面配置中，您可以將內容或功能相似的元素歸為一組，並使用空白空間、排版和分隔線，將這些元素與其他元素分開。

Android 會使用資料列、資料欄和方塊做為建構區塊，因此您可以採用類似方式設計容器。使用空白空間或可見分區將類似項目分組，引導您瀏覽內容。

隱性區隔會使用空白空間在視覺上將內容分組，建立容器界線，顯性區隔則使用分隔線和資訊卡等物件，將內容分組。

下圖顯示使用隱含容器來包含標題和主要副本的範例。欄格線用於對齊及建立分組。重點會明確顯示在資訊卡中。使用圖示和字體階層，進一步區分視覺元素。

3. 放置內容

選取版面配置格線並在容器中加入內容後，Android 就能透過各種方式處理內容元素並放置這些元素，包括基本構成元素和修飾符，或是格線和 Flexbox 等版面容器。

請考量內容是一維還是二維。舉例來說，內容可以水平、垂直或雙向流動。

如下圖所示，驗證版面配置可使用二維格線版面配置。

UI 元素也可以在一個維度中彈性調整和流動，例如篩選器或內容標記。進一步瞭解 Flexbox。

版面配置也可以結合使用各種版面配置類型。舉例來說，您可以將輪轉介面或橫向捲動與直向主題卡配對。或者，您也可以顯示含有直向清單資料的自訂圖表。

您可以使用 Lazy 列和 Lazy 欄，在捲動的列或欄中呈現內容。

對齊

與自動版面配置流程和對齊方式類似，您可以指定 UI 元素排列方式和對齊方式。

使用 AlignmentLine 建立自訂對齊線，父項版面配置可使用此線對齊和定位其子項。

4. 縮放及裁剪內容

縮放功能對於配合動態內容、裝置螢幕方向和螢幕大小至關重要。元素可以保持固定或縮放。

指定圖片在容器中的縮放和位置，確保圖片在任何裝置上都能正確顯示。否則，圖片的主要焦點可能會遭到裁切，或圖片可能過小或過大，不適合版面配置。

適當縮放及裁剪，以配合不同裝置的顯示比例和方向。由於長寬比差異可能很大，請指定內容處理這些情況的方式。

舉例來說，在橫向模式下，全寬的輪播圖片會占據整個手機畫面。

如果內容必須保留長寬比 (例如僅限直向影片)，請鎖定長寬比並平衡空白空間。

已釘選的內容

許多元件都內建互動、捲動和定位功能，並使用插槽或架構，例如應用程式列。您可以修改部分元素，讓這些元素保持固定，而不是對捲動做出反應，例如包含重要動作的懸浮動作按鈕 (FAB)。在特定用途中釘選元素，以便更專注於該元素，例如將文字輸入釘選至鍵盤，避免輸入內容遭到隱藏。

如果是文字輸入 (例如訊息和驗證)，輸入內容會附加至鍵盤，並成為唯一焦點。

版面配置中的元件

Material 3 元件會提供互動和內容的專屬設定和狀態。

Compose 提供便利的版面配置，讓您將 Material Design 元件合併成常見的螢幕模式。例如 Scaffold 之類的可組合項會提供位置以容納各種不同的元件和其他螢幕元素。進一步瞭解 Material Design 元件和版面配置。