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](https://developer.android.google.cn/static/develop/ui/compose/images/system/cutouts_example_portrait.png?authuser=19&hl=vi)
![Ví dụ về hình cắt ở chế độ ngang](https://developer.android.google.cn/static/develop/ui/compose/images/system/cutouts_example_landscape.png?authuser=19&hl=vi)
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 } } }
Để 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:
Đang sử dụng
WindowInsets.displayCutout
Cài đặt trong tệp kê khai giao diện bằng
android:windowLayoutInDisplayCutoutMode
Theo phương pháp lập trình để thiết lập lựa chọn trên
Window
bằngwindow.attributes.layoutInDisplayCutoutMode
Truy cập vào đối tượng
Path
vết cắt bằngLocalView.current.rootWindowInsets.displayCutout
Đố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())) }
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:
- Bật Tuỳ chọn cho nhà phát triển.
- 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.
- Chọn loại vết cắt.
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ị.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Phần lồng ghép cửa sổ trong Compose
- Đối tượng sửa đổi đồ hoạ
- Kiểu đoạn văn bản