在應用程式中以無邊框方式顯示內容

試用 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用無邊框設計。
Compose 中的無邊框設計 →

在搭載 Android 15 以上版本的裝置上指定 SDK 35 以上版本後， 您的應用程式會是無邊框設計視窗橫跨整個寬度和高度 在系統資訊列後方繪製顯示畫面系統列包含狀態 說明文字列和導覽列

許多應用程式都有頂端應用程式列。頂端應用程式列應延展到頂端邊緣 並顯示在狀態列後方。(選用) 頂端應用程式列可以 內容捲動時，縮小至狀態列的高度。

許多應用程式都有底部應用程式列或底部導覽列。這些長條 也延伸到螢幕底部，並顯示在導覽後方 。否則，應用程式應顯示在導覽列後方。

圖 1.採用無邊框版面配置的系統資訊列。

在應用程式中實作無邊框版面配置時，請注意下列事項： 心智：

  1. 啟用無邊框螢幕
  2. 處理視覺重疊。
  3. 建議你在系統資訊列後方顯示剪裁。
，瞭解如何調查及移除這項存取權。
狀態列後方的圖像範例
圖 2.背景圖像範例 狀態列
，瞭解如何調查及移除這項存取權。

啟用無邊框顯示

如果您的應用程式指定 SDK 35 以上版本，系統會自動為 搭載 Android 15 以上版本的裝置。

如要在先前的 Android 版本中啟用無邊框功能，請按照下列步驟操作：

  1. 將依附元件新增至 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'
}

  2. 匯入 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() 會將系統列設為透明，但在 3 鍵導覽模式下，狀態列會變成半透明的遮罩。 系統圖示和薄板的顏色會根據系統調整 淺色或深色主題。

enableEdgeToEdge() 函式會自動宣告應用程式應 採用無邊框設計，並調整系統資訊列的色彩。

如要在不使用 enableEdgeToEdge() 函式，請參閱 手動設定無邊框螢幕。

使用插邊處理重疊

應用程式的部分檢視畫面可能會在系統資訊列後方繪製，如圖所示 3.

您可以回應插邊，指定 螢幕畫面與系統 UI，例如導覽列或狀態 。間隔是指顯示在內容上方，但也可用來 。

用來顯示無邊框應用程式插邊的插邊類型如下：

  • 系統資訊列插邊：最適合可輕觸且不可輕觸的檢視畫面 視覺上可能會遭系統資訊列遮住

  • 螢幕凹口插邊：可能設有螢幕凹口的區域 。

  • 系統手勢插邊：針對系統使用的手勢瀏覽區域 優先考慮你的應用程式

系統資訊列插邊

系統列插邊是最常用的插邊類型，代表 系統 UI 顯示在應用程式上方的 Z 軸區域。他們最好 用來移動或清除應用程式中可輕觸的檢視畫面 圖片會遭系統資訊列遮住。

舉例來說，懸浮動作 圖 3 中的按鈕 (FAB) 只有部分內容 被導覽列遮住：

這是採用無邊框設計的範例，但導覽列覆蓋了懸浮動作按鈕 (FAB)
圖 3. 導覽列與 無邊框版面配置

為避免在手勢模式或按鈕模式下這類視覺重疊， 就能透過 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)
圖 4. 解決按鈕中的影像重疊問題 模式。

這也適用於手勢操作模式，如圖 5 所示：

採用無邊框設計
圖 5. 解決手勢中的視覺重疊問題 導航模式。

螢幕凹口插邊

部分裝置配備螢幕凹口。凹口通常位於 並顯示在狀態列中。裝置螢幕處於橫向模式時 模式時，凹口可能會位於垂直邊緣。根據應用程式的內容 但應導入邊框間距來避免螢幕凹口，如 根據預設，應用程式會在螢幕凹口中繪製。

舉例來說，許多應用程式畫面都會顯示項目清單。不遮蓋清單項目 螢幕凹口或系統資訊列。

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) -> {
  Insets 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 所示：

系統手勢插邊範例
圖 6. 系統手勢插邊。

如同系統資訊列插邊，可避免重疊系統手勢插邊 使用 getInsets(int)敬上 同時 WindowInsetsCompat.Type.systemGestures()。

使用這些插邊將可滑動的檢視畫面從邊緣移動或滑過。常見用途 案例包含底部功能表 以及實作 ViewPager2。

在 Android 10 以上版本中，系統手勢插邊會包含 主畫面手勢，以及向左和向右插頭：返回手勢：

系統手勢插邊測量範例
圖 7. 系統手勢插邊測量結果。

以下程式碼範例說明如何實作系統手勢插邊：

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、手勢，請參閱下列參考資料 以及插邊的運作方式：