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

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

只要在系統資訊列後方繪製,即可讓應用程式利用螢幕的整個寬度和高度,顯示無邊框顯示效果。系統列是狀態列和導覽列。

如要實作無邊框版面配置,應用程式必須執行以下操作:

  • 在導覽列後方繪製,即可打造更吸引人且現代化的使用者體驗。
  • 如果對您的內容和版面配置符合需求 (例如全寬度圖像),請在狀態列後方繪製。方法是使用 AppBarLayout 等 API,這會定義固定在畫面頂端的應用程式列。
圖 1.採用無邊框版面配置的系統資訊列。

如要在應用程式中實作無邊框版面配置,請按照下列步驟操作:

  1. 啟用無邊框螢幕。
  2. 處理視覺重疊。
這張圖片顯示應用程式的狀態列後方有圖像
圖 2.應用程式在狀態列後方的圖像。

啟用無邊框螢幕

在應用程式中啟用無邊框螢幕功能,如下所示:

  1. 請在應用程式或模組的 build.gradle 檔案中,將依附元件新增至 androidx.activity 程式庫:

    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 擴充功能函式匯入應用程式:

    import androidx.activity.enableEdgeToEdge
    
  3. 在活動的 onCreate() 方法中呼叫 enableEdgeToEdge()。應在 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)
圖 3. 導覽列與無邊框版面配置中的懸浮動作按鈕 (FAB) 重疊。

為避免在手勢模式或按鈕模式下發生這類視覺重疊,您可以使用 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. 解決手勢操作模式下的視覺重疊問題。

系統手勢插邊

系統手勢插邊代表系統手勢優先於應用程式的特定視窗區域。這些區域會以圖 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;
});

沉浸模式

某些內容在全螢幕模式中成效最佳,為使用者提供更身歷其境的體驗。您可以使用 WindowInsetsControllerWindowInsetsControllerCompat 程式庫,在沉浸模式下隱藏系統資訊列:

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、手勢操作和插邊的運作方式,請參閱以下參考資料: