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

Màn hình 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 sống động hơn cho người dùng. Nếu bạn nhắm đến các thiết bị mục tiêu chạy Android 15 (cấp độ API 35) trở lên, thì theo mặc định, chế độ tràn viền sẽ được thực thi.

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

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

Để bật chế độ 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():

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

Theo mặc định, enableEdgeToEdge() 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, trong đó chế độ này áp dụng một lớp phủ mờ cho thanh điều hướng để có độ tương phản tốt hơn. Màu của các biểu tượng hệ thống và lớp phủ sẽ điều chỉnh theo giao diện sáng hoặc Giao diện 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 của bạn nhận các phần lồng ghép IME, giúp bạn điều chỉnh bố cục bằng khoảng đệ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 chồng chéo bằng cách sử dụng phần lồng ghép

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

Phần lồng ghép mô tả các phần của màn hình giao nhau 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 xem xét cho màn hình tràn viền là:

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

Trong Compose, bạn có thể xử lý phần lồng ghép bằng cách sử dụng thước kẻ, đối tượng sửa đổi khoảng đệm hoặc đối tượng 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 xem xét những trường hợp sau đây để biết thêm các trường hợp sử dụng tràn viền nâng cao.

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

Một số nội dung, chẳng hạn như video hoặc bản đồ, sẽ mang lại trải nghiệm sống động hơn khi các thanh hệ thống bị ẩn. Bạn có thể ẩn 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())

Màu sắc và biểu tượng của 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 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 để có độ tương phản tốt hơn.

Để thay đổi biểu tượng trên 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ờ mặc định, nhưng bạn có thể cần tuỳ chỉnh các thanh 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ờ.

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

window.isNavigationBarContrastEnforced = false

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

Tiếp
Giới thiệu về WindowInsetsRulers