手動設定無邊框螢幕

您可以呼叫 enableEdgeToEdge,在應用程式中啟用無邊框顯示。 這應該足以滿足大多數應用程式的需求。本指南說明如何啟用無邊框設計,讓應用程式不需使用 enableEdgeToEdge 即可啟用這項功能。

全螢幕顯示應用程式

使用 WindowCompat.setDecorFitsSystemWindows(window, false) 在系統資訊列後方配置應用程式,如下列程式碼範例所示:

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  WindowCompat.setDecorFitsSystemWindows(window, false)
}

Java

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

變更系統列的顏色

在無邊框版面配置中運作時,應用程式必須變更系統資訊列的顏色,讓底下的內容可見。應用程式執行這個步驟後,系統就會在手勢操作模式和按鈕模式下,處理使用者介面的所有視覺保護措施。

  • 手勢操作模式:系統會套用動態色彩調整功能,根據系統資訊列後方的內容變更顏色。在下列範例中,導覽列中的控點在淺色內容上方時會變成深色,在深色內容上方時則會變成淺色。
圖 1. 手勢操作模式的顏色變更。
  • 按鈕模式:系統會在系統資訊列後方套用半透明的遮罩 (適用於 API 級別 29 以上版本),或透明的系統資訊列 (適用於 API 級別 28 以下版本)。
圖片:半透明系統資訊列
圖 2. 系統資訊列後方的半透明紗罩。
  • 狀態列內容顏色:控制狀態列內容的顏色,例如時間和圖示。
圖片:顯示狀態列內容顏色
圖 3. 狀態列內容顏色。

您可以編輯 themes.xml 檔案,設定導覽列的顏色,並視需要將狀態列設為透明,以及將狀態列內容顏色設為深色。

<!-- values-v29/themes.xml -->
<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set to transparent if your app is drawing behind the status bar. -->
  <item name="android:statusBarColor">
     @android:color/transparent
  </item>

  <!-- Optional: set for a light status bar with dark content. -->
  <item name="android:windowLightStatusBar">
    true
  </item>
</style>

您可以直接使用 WindowInsetsController API,但我們強烈建議盡可能使用支援程式庫 WindowInsetsControllerCompat。您可以使用 WindowInsetsControllerCompat API,而非 theme.xml,控制狀態列的內容顏色。如要這麼做,請使用 setAppearanceLightNavigationBars() 函式,傳遞 true 將導覽列的前景顏色變更為淺色,或傳遞 false 還原為預設顏色。

Kotlin

val windowInsetsController =
      ViewCompat.getWindowInsetsController(window.decorView)

windowInsetsController?.isAppearanceLightNavigationBars = true

Java

WindowInsetsControllerCompat windowInsetsController =
      ViewCompat.getWindowInsetsController(getWindow().getDecorView());
if (windowInsetsController == null) {
    return;
}

windowInsetsController.setAppearanceLightNavigationBars(true);