在搭載 Android 15 以上版本的裝置上指定 SDK 35 以上版本後, 您的應用程式會是無邊框設計視窗橫跨整個寬度和高度 在系統資訊列後方繪製顯示畫面系統列包含狀態 說明文字列和導覽列
許多應用程式都有頂端應用程式列。頂端應用程式列應延展到頂端邊緣 並顯示在狀態列後方。(選用) 頂端應用程式列可以 內容捲動時,縮小至狀態列的高度。
許多應用程式都有底部應用程式列或底部導覽列。這些長條 也延伸到螢幕底部,並顯示在導覽後方 。否則,應用程式應顯示在導覽列後方。
在應用程式中實作無邊框版面配置時,請注意下列事項: 心智:
- 啟用無邊框螢幕
- 處理視覺重疊。
- 建議你在系統資訊列後方顯示剪裁。
![狀態列後方的圖像範例](https://developer.android.com/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=0000&hl=zh-tw)
啟用無邊框顯示
如果您的應用程式指定 SDK 35 以上版本,系統會自動為 搭載 Android 15 以上版本的裝置。
如要在先前的 Android 版本中啟用無邊框功能,請按照下列步驟操作:
將依附元件新增至
androidx.activity
程式庫 應用程式或模組的build.gradle
檔案:Kotlin
dependencies { val activity_version =
activity_version
// Java language implementation implementation("androidx.activity:activity:$activity_version") // Kotlin implementation("androidx.activity:activity-ktx:$activity_version") }Groovy
dependencies { def activity_version =
activity_version
// Java language implementation implementation 'androidx.activity:activity:$activity_version' // Kotlin implementation 'androidx.activity:activity-ktx:$activity_version' }匯入
enableEdgeToEdge
加入應用程式的擴充功能:
呼叫 enableEdgeToEdge
即可手動啟用無邊框設計
您 Activity
中的 onCreate
。請在 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()
函式會自動宣告應用程式應
採用無邊框設計,並調整系統資訊列的色彩。
如要在不使用
enableEdgeToEdge()
函式,請參閱
手動設定無邊框螢幕。
使用插邊處理重疊
應用程式的部分檢視畫面可能會在系統資訊列後方繪製,如圖所示 3.
您可以回應插邊,指定 螢幕畫面與系統 UI,例如導覽列或狀態 。間隔是指顯示在內容上方,但也可用來 宣傳應用程式
用來顯示無邊框應用程式插邊的插邊類型如下:
系統資訊列插邊:最適合可輕觸且不可輕觸的檢視畫面 視覺上可能會遭系統資訊列遮住
螢幕凹口插邊:可能設有螢幕凹口的區域 。
系統手勢插邊:針對系統使用的手勢瀏覽區域 優先考慮你的應用程式
系統資訊列插邊
系統列插邊是最常用的插邊類型,代表 系統 UI 顯示在應用程式上方的 Z 軸區域。他們最好 用來移動或清除應用程式中可輕觸的檢視畫面 圖片會遭系統資訊列遮住。
舉例來說,懸浮動作 圖 3 中的按鈕 (FAB) 只有部分內容 被導覽列遮住:
![這是採用無邊框設計的範例,但導覽列覆蓋了懸浮動作按鈕 (FAB)](https://developer.android.com/static/images/guide/navigation/e2e-after-implementation.png?authuser=0000&hl=zh-tw)
為避免在手勢模式或按鈕模式下這類視覺重疊,
就能透過 BERT 模型增加視角的邊界
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 所示,按鈕模式的視覺重疊:
![半透明的導覽列未遮住懸浮動作按鈕 (FAB)](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-top.png?authuser=0000&hl=zh-tw)
這也適用於手勢操作模式,如圖 5 所示:
![採用無邊框設計](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=0000&hl=zh-tw)
螢幕凹口插邊
部分裝置配備螢幕凹口。一般來說,凹口位於 並顯示在狀態列中。裝置螢幕處於橫向模式時 模式時,凹口可能會位於垂直邊緣。根據應用程式的內容 但應導入邊框間距來避免螢幕凹口,如 根據預設,應用程式會在螢幕凹口中繪製。
舉例來說,許多應用程式畫面都會顯示項目清單。不遮蓋清單項目 螢幕凹口或系統資訊列。
Kotlin
ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets -> val bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout() ) v.updatePadding( left = bars.left, top = bars.top, right = bars.right, bottom = bars.bottom, ) WindowInsetsCompat.CONSUMED }
Java
ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> { WindowInsetsCompat bars = insets.getInsets( WindowInsetsCompat.Type.systemBars() | WindowInsetsCompat.Type.displayCutout() ); v.setPadding(bars.left, bars.top, bars.right, bars.bottom); return WindowInsetsCompat.CONSUMED; });
求出 WindowInsetsCompat
的邏輯 or
系統資訊列和螢幕凹口類型
將 clipToPadding
設為 RecyclerView
,讓邊框間距隨著
清單項目。如此一來,當使用者時
捲動畫面,如以下範例所示
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
系統手勢插邊
系統手勢插邊代表系統手勢的視窗區域 比您的應用程式優先考量這些區域會以橘色顯示,如圖 6 所示:
![系統手勢插邊範例](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=0000&hl=zh-tw)
如同系統資訊列插邊,可避免重疊系統手勢插邊
使用
getInsets(int)
敬上
同時
WindowInsetsCompat.Type.systemGestures()
。
使用這些插邊將可滑動的檢視畫面從邊緣移動或滑過。常見用途
案例包含底部功能表
以及實作
ViewPager2
。
在 Android 10 以上版本中,系統手勢插邊會包含 主畫面手勢,以及向左和向右插頭:返回手勢:
![系統手勢插邊測量範例](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=0000&hl=zh-tw)
以下程式碼範例說明如何實作系統手勢插邊:
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; });
Material Design 元件
許多以檢視畫面為基礎的 Android Material 元件
(com.google.android.material){:.external} 會自動處理插邊,包括
BottomAppBar
、
BottomNavigationView
,
NavigationRailView
和 NavigationView
但 AppBarLayout
就不會自動處理插邊新增
android:fitsSystemWindows="true"
敬上
處理頂端的插邊或使用 setOnApplyWindowInsetsListener
。
瞭解如何使用以下程式碼處理插邊: Compose 中的 Material 元件。
沉浸模式
某些內容在全螢幕模式中能提供最佳體驗,為使用者提供更高的體驗
沉浸式體驗。您可以使用以下項目,在沉浸模式下隱藏系統資訊列:
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
、手勢,請參閱下列參考資料
以及插邊的運作方式: