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

嘗試 Compose 方法

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

Compose 中的無邊框設計 →

您可以在「系統列」後方繪製應用程式列，讓應用程式顯示無邊框顯示的完整寬度和高度。系統列會顯示狀態列和導覽列。

如要實作無邊框版面配置，應用程式必須執行下列操作：

• 在導覽列後方繪製，即可打造更引人入勝的現代化使用者體驗。
• 如果適合您的內容和版面配置 (例如全寬度圖像)，請在狀態列後方繪製。方法是使用 AppBarLayout 等 API，可定義固定在螢幕頂端的應用程式列。

如要在應用程式中實作無邊框版面配置，請執行下列步驟：

1. 啟用無邊框螢幕。
2. 處理影像重疊問題。

啟用無邊框螢幕。

只要在 Activity 的 onCreate 中呼叫 enableEdgeToEdge，即可在應用程式中啟用無邊顯示螢幕。您必須在 setContentView 之前呼叫這個方法。

  override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    ...
  }

  @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()，增加檢視畫面的邊界。

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

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
}

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 以上版本中，系統手勢插邊包含適用於主畫面手勢的底部插邊，以及返回手勢的左右插邊：

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

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
}

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 程式庫，在沈浸模式下隱藏系統資訊列：

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

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

• WindowInsets — 版面配置的事件監聽器
• 手勢操作：插邊
• 插邊在 Android 上的運作方式為何？