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. Quảng cáo này mang đến trải nghiệm hiện nội dung 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ề 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ề hình cắt ở chế độ ngang
Hình 2. Ví dụ về phần cắt bỏ ở 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ợ 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 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.

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ẽ 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 của bạn sẽ không tự động vẽ trong 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ị của chúng tôi.

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 xử lý thông tin về vết cắt chính bạn.

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 chủ đề tổng thể của bạn, 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 nếu cần, hoặc bỏ qua nếu không bắt buộc.

Ngoài ra, bạn có thể áp dụng chế độ cài đặt tương tự như phần Cắt bỏ khung hiển thị tài liệu này mô tả bằng cách cài đặt hoặc chủ đề hoạt động android:windowLayoutInDisplayCutoutMode sang một chủ đề khác hoặc đặt thuộc tính cửa sổ bằng cách sử dụ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 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 cho phép vùng cắt che khuất mọi văn bản, thành phần điều khiển hoặc thông tin quan trọng 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 cử chỉ chạm vào vùng cắt. Độ nhạy cảm ứng có thể thấp hơn trong 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ì điều này có thể dẫn đến tình trạng chồng chéo hoặc bị cắt nội dung.

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 thiết bị có nhiều loại vết cắt khác nhau, 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. Trong màn hình Tuỳ chọn cho nhà phát triển, 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ị.