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 vào bề mặt màn hình. Điều này cho phép trải nghiệm từ cạnh này sang cạnh kia 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ị.

Android hỗ trợ phần cắt 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ợ các phần cắt màn hình trên 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ó phần cắt trong Compose, bao gồm cả cách xử lý khu vực cắt – tức là hình chữ nhật tràn viền trên bề mặt hiển thị chứa phần cắt.

Trường hợp mặc định

Theo mặc định, các ứng dụng nhắm đến API cấp 34 trở xuống hoặc các Hoạt động không gọi enableEdgeToEdge sẽ không vẽ vào vùng cắt trừ phi ứng dụng vẽ vào thanh hệ thống chứa vùng cắt trên màn hình.

Ứng dụng nhắm đến API cấp 35 trở lên trên các thiết bị chạy Android 15 trở lên hoặc Hoạt động gọi enableEdgeToEdge, vẽ vào vùng cắt.

Nói cách khác, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES và LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER được diễn giải là LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS cho các cửa sổ không nổi trong các ứng dụng nhắm đến API cấp 35 trở lên trên các thiết bị chạy Android 15 trở lên.

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

Bạn phải xử lý thông tin cắt để ngăn khu vực cắt che khuất văn bản, thành phần điều khiển hoặc thành phần tương tác quan trọng cần nhận dạng thao tác chạm tinh tế (độ nhạy cảm ứng có thể thấp hơn trong khu vực cắt). Trong khi xử lý phần cắt, đừng mã hoá cứng chiều cao thanh trạng thái, vì điều này có thể dẫn đến nội dung bị chồng chéo hoặc bị cắt. Thay vào đó, hãy xử lý các phần cắt theo một trong những cách sau:

• Sử dụng WindowInsets.displayCutout, WindowInsets.safeContent hoặc WindowInsets.safeDrawing

• Truy cập vào đối tượng Path được cắt bằng LocalView.current.rootWindowInsets.displayCutout

Đối với Compose, bạn nên sử dụng displayCutout, safeContent hoặc safeDrawing để xử lý phần lồng ghép cắt trong các thành phần kết hợp. Phương pháp này cho phép bạn tuân thủ khoảng đệm cắt màn hình khi cần hoặc bỏ qua khoảng đệm này khi không cần.

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

Kiểm thử cách nội dung hiển thị với phần cắt

Hãy nhớ kiểm thử tất cả màn hình và trải nghiệm của ứng dụng. Kiểm thử trên các thiết bị có nhiều loại phần cắt, nếu có thể. Nếu không có thiết bị có phần cắt, bạn có thể mô phỏng các cấu hình 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 làm như sau:

1. Bật Tuỳ chọn cho nhà phát triển.
2. Trên màn hình Developer options (Tuỳ chọn cho nhà phát triển), hãy cuộn xuống phần Drawing (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 loại hình cắt.