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. Thiết kế này mang lại trải nghiệm từ cạnh này sang cạnh kia, đồng thời cung cấp không gian cho các cảm biến quan trọng ở mặt trước thiết bị.

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

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 từ cạnh này sang cạnh kia 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, phần cắt màn hình được đưa vào thông tin lồng ghép cửa sổ. Do đó, ứng dụng của bạn sẽ không vẽ trong các vùng cắt 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 sẽ tự động không vẽ trong các khu vực đặt phần cắt. Cả WindowInsets.safeContent và WindowInsets.safeDrawing đều chứa thông tin về phần cắt màn hình và sẽ không vẽ vị trí cắt 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 cắt.

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

Bạn có thể xử lý phần cắt theo bất kỳ cách nào 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 tuân thủ khoảng đệm displayCutout khi cần thiết hoặc bỏ qua khoảng đệm đó 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ư mô tả trong tài liệu về Khung cắt thành phần hiển thị 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ế độ cắt sẽ được áp dụng cho toàn bộ hoạt động và không thể kiểm soát được từng thành phần kết hợp riêng lẻ.

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

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

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

  • Hãy chú ý đến vị trí đặt các thành phần quan trọng của 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.
  • Đừng đặt hoặc mở rộng bất kỳ thành phần tương tác nào cần nhận dạng thao tác chạm tinh tế 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 từ cạnh này sang cạnh kia, thông tin cắt sẽ được đưa vào 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ì việc này có thể dẫn đến nội dung bị chồng chéo hoặc bị cắt bớt.

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.
    mô phỏng phần cắt 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ị.