您可以在「系統列」後方繪製應用程式列,讓應用程式顯示無邊框顯示的完整寬度和高度。系統列會顯示狀態列和導覽列。
如要實作無邊框版面配置,應用程式必須執行下列操作:
- 在導覽列後方繪製,即可打造更引人入勝的現代化使用者體驗。
- 如果適合您的內容和版面配置 (例如全寬度圖像),請在狀態列後方繪製。方法是使用
AppBarLayout
等 API,可定義固定在螢幕頂端的應用程式列。
如要在應用程式中實作無邊框版面配置,請執行下列步驟:
- 啟用無邊框螢幕。
- 處理影像重疊問題。
啟用無邊框螢幕。
只要在 Activity
的 onCreate
中呼叫 enableEdgeToEdge
,即可在應用程式中啟用無邊顯示螢幕。您必須在 setContentView
之前呼叫這個方法。
Kotlin
override fun onCreate(savedInstanceState: Bundle?) { enableEdgeToEdge() super.onCreate(savedInstanceState) ... }
Java
@Override protected void onCreate(@Nullable Bundle savedInstanceState) { EdgeToEdge.enable(this); super.onCreate(savedInstanceState); ... }
根據預設,enableEdgeToEdge
會讓系統資訊列保持透明,但狀態列為半透明紗罩的三按鈕操作模式除外。系統圖示和紗罩的顏色會根據系統淺色或深色主題進行調整。
enableEdgeToEdge
方法會自動宣告應用程式應採用無邊框設計,並調整系統列的顏色。如果基於任何原因而必須手動設定,請參閱「手動設定無邊框顯示螢幕」。
使用插邊處理重疊
啟用無邊框螢幕後,部分應用程式的檢視畫面可能會在系統列下方繪製,如圖 3 所示。
如要解決重疊的問題,您可以回應「插邊」,指定畫面的哪些部分與系統 UI 互動,例如導覽列或狀態列。互動代表可以顯示在內容上方,但也能告知應用程式系統手勢。
適用於以無邊框方式顯示應用程式時,適用的插邊類型如下:
系統列插邊:最適合用於可調整,且不得遭到系統列遮蔽的檢視畫面。
系統手勢插邊:用於系統使用的手勢瀏覽區域,且該區域的優先順序高於應用程式。
系統列插邊
系統列插邊是最常用的插邊類型。這些控制項代表系統 UI 在應用程式上方 Z 軸顯示的區域。這類元素最適合用於在應用程式中移動或放置在可輕觸的檢視畫面,且不得遭到系統列遮蔽。
例如,圖 3 中的懸浮動作按鈕 (FAB) 會由導覽列部分遮蓋:
為避免在手勢模式或按鈕模式中發生這類重疊問題,您可以使用 getInsets(int)
搭配 WindowInsetsCompat.Type.systemBars()
,增加檢視畫面的邊界。
以下程式碼範例說明如何實作系統列插邊:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()) // Apply the insets as a margin to the view. This solution sets // only the bottom, left, and right dimensions, but you can apply whichever // insets are appropriate to your layout. You can also update the view padding // if that's more appropriate. v.updateLayoutParams<MarginLayoutParams>( leftMargin = insets.left, bottomMargin = insets.bottom, rightMargin = insets.right, ) // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars()); // Apply the insets as a margin to the view. This solution sets only the // bottom, left, and right dimensions, but you can apply whichever insets are // appropriate to your layout. You can also update the view padding if that's // more appropriate. MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams(); mlp.leftMargin = insets.left; mlp.bottomMargin = insets.bottom; mlp.rightMargin = insets.right; v.setLayoutParams(mlp); // Return CONSUMED if you don't want want the window insets to keep passing // down to descendant views. return WindowInsetsCompat.CONSUMED; });
如果將這個解決方案套用至圖 3 所示的示例,則會導致按鈕模式中沒有任何視覺重疊,如圖 4 所示:
這也適用於手勢操作模式,如圖 5 所示:
系統手勢插邊
系統手勢插邊表示系統手勢優先於應用程式的視窗區域。這些區域會以橘色顯示,如圖 6 所示:
與系統列插邊一樣,您可以使用 getInsets(int)
搭配 WindowInsetsCompat.Type.systemGestures()
,避免與系統手勢插邊重疊。
使用這些插邊,即可將可滑動檢視畫面移出邊緣,常見的用途包括底部功能表、在遊戲中滑動,以及使用 ViewPager2
實作的輪轉介面。
在 Android 10 以上版本中,系統手勢插邊包含適用於主畫面手勢的底部插邊,以及返回手勢的左右插邊:
以下程式碼範例說明如何實作系統手勢插邊:
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets -> val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()) // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.updatePadding(insets.left, insets.top, insets.right, insets.bottom) // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> { Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures()); // Apply the insets as padding to the view. Here, set all the dimensions // as appropriate to your layout. You can also update the view's margin if // more appropriate. view.setPadding(insets.left, insets.top, insets.right, insets.bottom); // Return CONSUMED if you don't want the window insets to keep passing down // to descendant views. return WindowInsetsCompat.CONSUMED; });
沉浸模式
有些內容最適合以全螢幕播放,讓使用者享有更身歷其境的體驗。您可以使用 WindowInsetsController
和 WindowInsetsControllerCompat
程式庫,在沈浸模式下隱藏系統資訊列:
Kotlin
val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) // Hide the system bars. windowInsetsController.hide(Type.systemBars()) // Show the system bars. windowInsetsController.show(Type.systemBars())
Java
Window window = getWindow(); WindowInsetsControllerCompat windowInsetsController = WindowCompat.getInsetsController(window, window.getDecorView()); if (windowInsetsController == null) { return; } // Hide the system bars. windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()); // Show the system bars. windowInsetsController.show(WindowInsetsCompat.Type.systemBars());
如要進一步瞭解如何實作這項功能,請參閱「在沈浸模式下隱藏系統資訊列」。
其他資源
如要進一步瞭解 WindowInsets
、手勢瀏覽和插邊的運作方式,請參閱下列參考資料: