手動設定無邊框螢幕

您可以呼叫 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);