Vết cắt trong Compose

Vết cắt trên màn hình là vùng trên một số thiết bị mở rộng ra toàn bộ bề mặt màn hình. Thư viện này mang đến trải nghiệm tràn viền trong khi vẫn cung cấp 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ề hình cắt ở chế độ dọc
Hình 1. Ví dụ về hình cắt ở Chế độ dọc
Ví dụ về hình cắt ở chế độ ngang
Hình 2. Ví dụ về hình 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ợ cho 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 cạnh cạnh trên bề mặt màn hình chứa vết cắt.

Chữ hoa mặc định

Theo mặc định, các vết cắt trên màn hình được bao gồm trong thông tin phần lồng ghép cửa sổ. Do đó, ứng dụng của bạn sẽ không vẽ vào các vùng vết cắt trên màn hình khi bạn làm theo hướng dẫn về cách tạo ứ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ẽ ở các vùng có vết cắt. WindowInsets.safeContent và WindowInsets.safeDrawing đều chứa thông tin vết cắt trên màn hình và sẽ không vẽ ở vị trí 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 phải tự xử lý thông tin vết cắt.

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

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

Đối với Compose, bạn nên thiết lập 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 cần hoặc bỏ qua khoảng đệm này khi không cần thiết.

Ngoài ra, bạn có thể áp dụng các chế độ cài đặt tương tự như tài liệu về Khung hiển thị 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, chế độ vết cắt sau đó sẽ được áp dụng cho toàn bộ hoạt động và không thể kiểm soát theo từng thành phần kết hợp riêng lẻ.

Để tuân thủ phần cắt hiển thị trong một số thành phần kết hợp nhất định, nhưng không tuân theo các thành phần kết hợp khác, 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:

  • Chú ý đến vị trí của các thành phần quan trọng trên giao diện người dùng. Đừng để vùng cắt che khuất bất kỳ văn bản, thành phần điều khiển hoặc thông tin quan trọng nào khác.
  • Đừ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 thao tác chạm chi tiết vào vùng vết 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ế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ã hoá cứng chiều cao của thanh trạng thái, vì điều này có thể dẫn đến việc nội dung bị trùng lặp hoặc bị cắt.

Kiểm tra xem nội dung hiển thị như thế nào bằng các vết cắt

Hãy nhớ kiểm thử tất cả các màn hình và trải nghiệm của ứng dụng. Hãy 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 bất kỳ thiết bị hoặc trình mô phỏng nào 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. Trong màn hình Developer options (Tuỳ chọn cho nhà phát triển), hãy di chuyển xuống phần Drawing (Bản vẽ) rồi chọn Simulate a display with a Cutout (Mô phỏng màn hình có phần cắt).
  3. Chọn kiểu vết cắt.
    mô phỏng một 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 hiển thị nội dung.