無邊框設計

無邊框應用程式會在系統資訊列下方繪製 UI，充分利用整個螢幕。

重點整理

• 在系統資訊列下方繪製背景和捲動內容，提供無邊框體驗。
• 請避免在系統插邊下方新增輕觸手勢或拖曳目標，以免與無邊框和手勢操作功能發生衝突。

在系統資訊列後方繪製內容

無邊框功能可讓您在系統資訊列下方繪製 UI，提供沉浸式體驗。

應用程式可以回應插邊，解決內容重疊的問題。插邊會描述應用程式內容需要多少邊框間距，以免與系統資訊列或實體裝置功能 (例如螢幕凹口) 重疊。瞭解如何在 Compose 和檢視畫面中支援無邊框和處理插邊。

設計無邊框用途時，請注意下列類型的插邊：

• 系統資訊列插邊適用於可輕觸，且不應被系統資訊列遮蔽的 UI。
• 系統手勢插邊適用於 OS 使用的手勢導覽區域，其優先順序高於應用程式。
• 螢幕凹口插邊適用於延伸至螢幕表面的裝置區域，例如相機凹口。

狀態列注意事項

如需基本的系統資訊列設計指南，請參閱「Android 系統資訊列」。下一節將討論其他狀態列注意事項。

捲動內容

頂端應用程式列應在捲動時收合。瞭解如何收合 Material 3 TopAppBar。在 Material 3 中，小型頂端應用程式列可收合至狀態列高度，或捲動至畫面外。中型和大型頂端應用程式列可收合為較小的應用程式列。請參閱 [Material 指南][10]。

當 UI 在下方捲動時，狀態列應呈現半透明狀態，以免狀態列圖示看起來雜亂。如要達成這個目標，請先按照 LazyColumn 或 RecyclerView 說明文件中的步驟，建立可捲動的無邊框 UI。接著，請執行下列任一操作，確保系統資訊列為半透明：

• 如果適用，請在捲動時，依賴 Material 3 TopAppBar 自動保護。
• 建立自訂漸層可組合項，或對檢視畫面使用 GradientProtection。如要進一步瞭解如何在 Compose 中執行這項操作，請參閱「系統資訊列保護」。

如果是自動調整版面配置，請確保不同背景顏色的窗格有各自的保護措施。

同樣地，導覽匣也應與應用程式的其他部分分開保護。

請勿堆疊狀態列保護措施，例如同時使用 Material 3 TopAppBar 內建保護措施和自訂保護措施。

導覽列注意事項

如需導覽列的基本設計指南，請參閱「Android 系統資訊列」。下一節列出其他導覽列注意事項。

捲動內容

使用 scrollBehavior 參數捲動時，[BottomAppBar][10] 應收合。

不過，由於 [NavigationBar]11 沒有 scrollBehavior 參數，因此在捲動時仍會顯示。

螢幕凹口

螢幕凹口可能會影響 UI 外觀。應用程式必須處理螢幕凹口插邊，以免 UI 的重要部分繪製在螢幕凹口下方。

不過，純色應用程式列背景應繪製到螢幕凹口，如下圖所示。

確保水平輪轉介面會繪製到螢幕凹口位置。

瞭解如何在 Compose 中支援螢幕凹口。

其他指南

一般來說，背景和分隔線也應採用無邊框設計，而文字和按鈕等內容則應內縮，避免與系統 UI 和硬體元素重疊。