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 cả màn hình nền tảng. 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ề hình cắt rời ở 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ợ 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) và cao hơ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 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 thao tác với vùng cắt – tức là vùng hiển thị tràn viền hình chữ nhật trên bề mặt màn hình có chứa vết cắt.

Trường hợp 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 về phần lồng ghép cửa sổ. Do đó, ứng dụng sẽ không vẽ trong 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 làm cho ứng dụng hiển thị 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 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 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, 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ủ phần cắt màn hình trong một số thành phần kết hợp 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 tràn viền, thông tin về vết cắt được đưa vào trong 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ì 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 bạn không có thiết bị có cutout, 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 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 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ị.