Thiết lập chế độ hiển thị tràn viền

Tính năng hiển thị tràn viền cho phép ứng dụng vẽ giao diện người dùng phía sau các thanh hệ thống (thanh trạng thái, thanh chú thích và thanh điều hướng) để mang lại trải nghiệm chân thực hơn cho người dùng. Nếu bạn nhắm đến các thiết bị chạy Android 15 (cấp độ API 35) trở lên, thì tính năng tràn viền sẽ được thực thi theo mặc định.

Để hiển thị chính xác nội dung tràn viền trên tất cả các phiên bản Android, hãy làm theo các bước thiết lập sau. Nếu không làm theo các bước này, ứng dụng của bạn có thể vẽ màu đồng nhất phía sau các thanh hệ thống hoặc không đồng bộ hoá nội dung với các chuyển đổi của bàn phím ảo (IME).

1. Cho phép hiển thị tràn viền

Để bật tính năng tràn viền trên các phiên bản Android trước, hãy gọi enableEdgeToEdge() trong phương thức Activity.onCreate() của bạn:

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

Theo mặc định, enableEdgeToEdge() sẽ làm cho các thanh hệ thống trở nên trong suốt, ngoại trừ ở chế độ thao tác bằng 3 nút. Ở chế độ này, tính năng này sẽ áp dụng một lớp phủ mờ cho thanh điều hướng để tăng độ tương phản. Màu của các biểu tượng hệ thống và lớp phủ sẽ thích ứng với giao diện sáng hoặc tối của hệ thống.

2. Định cấu hình windowSoftInputMode

Đặt android:windowSoftInputMode="adjustResize" trong mục nhập AndroidManifest.xml của Hoạt động. Chế độ cài đặt này cho phép ứng dụng nhận các phần lồng ghép IME, nhờ đó bạn có thể điều chỉnh bố cục bằng phần đệm khi bàn phím ảo xuất hiện hoặc biến mất.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. Xử lý các phần trùng lặp bằng cách sử dụng phần lồng ghép

Sau khi bật tính năng tràn viền, một số nội dung và thành phần giao diện người dùng của ứng dụng có thể vẽ phía sau các thanh hệ thống. Để ngăn các thành phần quan trọng hoặc tương tác bị các thanh hệ thống che khuất hoặc trùng lặp với các cử chỉ hệ thống, bạn cần xử lý các phần lồng ghép.

Phần lồng ghép mô tả các phần của màn hình giao cắt với giao diện người dùng hệ thống hoặc cử chỉ hệ thống. Các loại phần lồng ghép chính cần cân nhắc cho tính năng hiển thị tràn viền là:

Phần lồng ghép thanh hệ thống: Đại diện cho các khu vực nơi thanh hệ thống được hiển thị. Sử dụng các phần này để tránh giao diện người dùng bị các thanh hệ thống che khuất.
Phần lồng ghép vết cắt trên màn hình: Đại diện cho các khu vực có vết cắt vật lý (như phần khuyết camera) trên màn hình thiết bị.

Trong Compose, bạn có thể xử lý các phần lồng ghép bằng cách sử dụng thước đo, công cụ sửa đổi phần đệm hoặc công cụ sửa đổi kích thước phần lồng ghép. Hãy xem bài viết Giới thiệu về phần lồng ghép cửa sổ để biết hướng dẫn chi tiết.

Chủ đề nâng cao

Hãy cân nhắc những điều sau đây cho các trường hợp sử dụng nâng cao hơn của tính năng tràn viền.

Chế độ hiển thị tối đa

Một số nội dung, như video hoặc bản đồ, sẽ có lợi khi trải nghiệm ở chế độ hiển thị tối đa, trong đó các thanh hệ thống bị ẩn. Bạn có thể ẩn các thanh hệ thống bằng cách sử dụng WindowInsetsControllerCompat:

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

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

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

Màu và biểu tượng thanh hệ thống

Khi chuyển sang chế độ tràn viền, nền của ứng dụng có thể hiển thị phía sau các thanh hệ thống, vì vậy, bạn có thể cần điều chỉnh màu biểu tượng thanh hệ thống để tăng độ tương phản.

Để thay đổi biểu tượng thanh trạng thái thành sáng hoặc tối, hãy sử dụng WindowInsetsControllerCompat:

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Bảo vệ thanh hệ thống

Mặc dù enableEdgeToEdge() cung cấp các thanh hệ thống trong suốt hoặc mờ theo mặc định, nhưng bạn có thể cần tuỳ chỉnh tính năng này. Tham khảo hướng dẫn thiết kế thanh hệ thống Android và hướng dẫn thiết kế tràn viền để quyết định thời điểm sử dụng thanh trong suốt so với thanh mờ.

Để làm cho thanh điều hướng bằng 3 nút hoàn toàn trong suốt thay vì mờ, bạn có thể tắt tính năng thực thi độ tương phản:

window.isNavigationBarContrastEnforced = false

Để biết thêm thông tin, hãy xem bài viết Giới thiệu về tính năng bảo vệ thanh hệ thống.

Hộp thoại

Để hiển thị hộp thoại toàn màn hình tràn viền, hãy gọi WindowCompat.enableEdgeToEdge trong phương thức onStart() của hộp thoại:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}

Tiếp

Giới thiệu về WindowInsetsRulers