Vết cắt trong Compose

Vết cắt trên màn hình là một vùng trên một số thiết bị mở rộng ra bề mặt màn hình. Điều này mang đến trải nghiệm tràn viền trong khi vẫn mang lại không gian cho các cảm biến quan trọng ở mặt trước của thiết bị.

Ví dụ về phần cắt ở chế độ dọc
Hình 1. Ví dụ về vết cắt trong Chế độ chân dung
Ví dụ về hình cắt ở chế độ ngang
Hình 2. Ví dụ về phần cắt ở chế độ ngang

Android hỗ trợ vết cắt trên màn hình trên các thiết bị chạy Android 9 (API cấp 28) trở lên. Tuy nhiên, nhà sản xuất thiết bị cũng có thể hỗ trợ vết cắt trên màn hình trên các thiết bị chạy Android 8.1 trở xuống.

Trang này mô tả cách triển khai tính năng hỗ trợ các thiết bị có vết cắt trong Compose, bao gồm cả cách xử lý vùng cắt – tức là hình chữ nhật tràn viền trên bề mặt màn hình có chứa vết cắt.

Kiểu viết hoa mặc định

Theo mặc định, các vết cắt trên màn hình được đưa vào thông tin của các phần lồng ghép cửa sổ. Do đó, ứng dụng sẽ không vẽ các vùng cắt trên màn hình khi bạn làm theo hướng dẫn về cách hiện ứng dụng tràn viền.

Ví dụ: khi bạn sử dụng Modifier.windowInsetsPadding(WindowInsets.safeContent) hoặc Modifier.windowInsetsPadding(WindowInsets.safeDrawing), ứng dụng của bạn sẽ tự động không vẽ trong các vùng có vết cắt. WindowInsets.safeContent và WindowInsets.safeDrawing đều chứa thông tin về vết cắt trên màn hình và sẽ không vẽ ở nơi có vết cắt trên thiết bị.

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

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Để tuỳ chỉnh thêm hành vi này, bạn cần tự xử lý thông tin vết cắt.

Xử lý thông tin về vết cắt theo cách thủ công

Bạn có thể xử lý các vết cắt theo một trong những cách sau đây:

Đối với Compose, bạn nên đặt windowLayoutInDisplayCutoutMode thành default trong giao diện tổng thể, sau đó tận dụng WindowInsets.displayCutout để xử lý các phần lồng ghép trong thành phần kết hợp:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Phương pháp này cho phép bạn tôn trọng khoảng đệm displayCutout khi bắt buộc hoặc bỏ qua khoảng đệm nếu không bắt buộc.

Ngoài ra, bạn có thể áp dụng các chế độ cài đặt tương tự mà tài liệu về Khung hiển thị cắt mô tả bằng cách đặt giao diện hoạt động android:windowLayoutInDisplayCutoutMode thành một tuỳ chọn khác hoặc đặt thuộc tính cửa sổ bằng window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Tuy nhiên, sau đó, chế độ cắt bỏ sẽ được áp dụng cho toàn bộ hoạt động và không thể kiểm soát từng thành phần kết hợp riêng lẻ.

Để tuân thủ vết cắt trên màn hình trong một số thành phần kết hợp nhất định, hãy sử dụng WindowInset.displayCutout. API này cho phép bạn truy cập vào thông tin về vết cắt khi cần.

Các phương pháp hay nhất

Khi xử lý các vết cắt trên màn hình, hãy cân nhắc những điều sau:

  • Lưu ý đến vị trí của các phần tử quan trọng trên giao diện người dùng. Đừng để vùng cắt che khuất văn bản, thành phần điều khiển hoặc thông tin quan trọng khác.
  • Không đặt hoặc mở rộng bất kỳ phần tử tương tác nào yêu cầu nhận dạng bằng thao tác chạm vào vùng cắt. Độ nhạy cảm ứng có thể thấp hơn ở vùng cắt.
  • Khi làm theo hướng dẫn tràn viền, thông tin về vết cắt sẽ được đưa vào các phần lồng ghép safeDrawing / safeContent.
  • Nếu có thể, hãy sử dụng Modifier.windowInsetsPadding(WindowInsets.safeDrawing) để xác định khoảng đệm thích hợp áp dụng cho nội dung của bạn. Tránh mã cứng chiều cao của thanh trạng thái, vì điều này có thể dẫn đến nội dung trùng lặp hoặc bị cắt bỏ.

Kiểm tra cách nội dung hiển thị bằng các vết cắt

Hãy nhớ kiểm thử mọi màn hình và trải nghiệm trong ứng dụng của bạn. Kiểm thử trên các thiết bị có nhiều loại vết cắt (nếu có thể). Nếu không có thiết bị có vết cắt, bạn có thể mô phỏng các cấu hình vết cắt phổ biến trên mọi thiết bị hoặc trình mô phỏng chạy Android 9 trở lên bằng cách thực hiện như sau:

  1. Bật Tuỳ chọn cho nhà phát triển.
  2. Trên màn hình Tuỳ chọn cho nhà phát triển, hãy cuộn xuống phần Bản vẽ rồi chọn Mô phỏng màn hình có vết cắt.
  3. Chọn loại vết cắt.
    mô phỏng vết cắt trên màn hình trong trình mô phỏng
    Hình 3. Sử dụng Tuỳ chọn cho nhà phát triển để kiểm thử cách nội dung hiển thị.