Vết cắt trên màn hình là vùng trên một số thiết bị mở rộng ra khỏi bề mặt màn hình. Thư viện này mang đến trải nghiệm 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ị.
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) trở lê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.
Tài liệu này mô tả cách hỗ trợ các thiết bị có vết cắt, bao gồm cả cách xử lý vùng cắt, tức là hình chữ nhật cạnh cạnh trên bề mặt màn hình chứa vết cắt.
Chọn cách ứng dụng của bạn xử lý các vùng vết cắt
Nếu không muốn nội dung của mình chồng lên một vùng bị cắt, thì bạn chỉ cần đảm bảo nội dung không chồng lên thanh trạng thái và thanh điều hướng. Nếu bạn đang kết xuất vào vùng cắt, hãy sử dụng WindowInsetsCompat.getDisplayCutout()
để truy xuất đối tượng DisplayCutout
có chứa các phần lồng ghép và hộp giới hạn an toàn cho từng vết cắt. Các API này cho phép bạn kiểm tra xem nội dung có trùng lặp với vết cắt hay không để có thể đổi vị trí nếu cần.
Bạn cũng có thể xác định xem nội dung có được bố trí phía sau vùng bị cắt hay không. Thuộc tính bố cục cửa sổ layoutInDisplayCutoutMode
kiểm soát cách vẽ nội dung trong vùng vết cắt.
Bạn có thể đặt layoutInDisplayCutoutMode
thành một trong các giá trị sau:
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
: nội dung xuất hiện trong vùng cắt khi hiển thị ở chế độ dọc, nhưng nội dung được tạo hiệu ứng hòm thư khi hiển thị ở chế độ ngang.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
: nội dung hiển thị vào vùng cắt ở cả chế độ dọc và ngang.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
: nội dung không bao giờ hiển thị vào vùng bị cắt.
Bạn có thể đặt chế độ vết cắt theo phương thức lập trình hoặc bằng cách thiết lập kiểu trong hoạt động của mình. Ví dụ sau đây xác định một kiểu để áp dụng thuộc tính LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
cho hoạt động.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> shortEdges <!-- default, shortEdges, or never --> </item> </style>
Các phần sau đây sẽ mô tả chi tiết hơn về các chế độ cắt.
Hành động mặc định.
Theo mặc định, ở chế độ dọc không đặt cờ đặc biệt nào, thanh trạng thái trên thiết bị có vết cắt sẽ được đổi kích thước để có chiều cao tối thiểu bằng vết cắt và nội dung của bạn sẽ hiển thị trong khu vực bên dưới. Ở chế độ ngang hoặc toàn màn hình, cửa sổ ứng dụng được tạo hiệu ứng hòm thư để không có nội dung nào xuất hiện trong vùng vết cắt.
Kết xuất nội dung ở vùng cắt cạnh ngắn
Đối với một số nội dung, chẳng hạn như video, ảnh, bản đồ và trò chơi, việc kết xuất hình ảnh trong vùng cắt có thể là cách hay để mang lại trải nghiệm sống động, toàn diện hơn cho người dùng. Với LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
, nội dung sẽ mở rộng vào vùng cắt trên cạnh ngắn của màn hình ở cả hướng dọc và hướng ngang, bất kể thanh hệ thống bị ẩn hay hiển thị. Khi sử dụng chế độ này, hãy đảm bảo rằng không có nội dung quan trọng nào chồng chéo với vùng cắt.
Hình ảnh sau đây là ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
cho một thiết bị ở chế độ dọc:
Hình ảnh sau đây là ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
cho một thiết bị theo chiều ngang:
Ở chế độ này, cửa sổ sẽ mở rộng dưới các vết cắt trên cạnh ngắn của màn hình ở cả chế độ dọc và hướng ngang, bất kể cửa sổ có đang ẩn các thanh hệ thống hay không.
Vết cắt ở góc được coi là trên cạnh ngắn:
Không bao giờ hiển thị nội dung trong vùng vết cắt trên màn hình
Với LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
, cửa sổ không bao giờ được phép chồng chéo với vùng cắt.
Sau đây là ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
trong
hướng dọc:
Sau đây là ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
ở chế độ ngang:
Các phương pháp hay nhất để hỗ trợ vết cắt trên màn hình
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:
- Chú ý đến vị trí của các thành phần quan trọng trên 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 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 nhận dạng thao tác chạm chi tiết vào vùng vết cắt. Độ nhạy cảm ứng có thể thấp hơn ở vùng cắt.
Nếu có thể, hãy sử dụng
WindowInsetsCompat
để truy xuất chiều cao của thanh trạng thái và 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 trùng lặp hoặc nội dung bị cắt.Sử dụng
View.getLocationInWindow()
để xác định lượng không gian cửa sổ mà ứng dụng của bạn đang sử dụng. Đừng giả định ứng dụng đang sử dụng toàn bộ cửa sổ và không sử dụngView.getLocationOnScreen()
.Sử dụng chế độ cắt
shortEdges
hoặcnever
nếu ứng dụng của bạn cần chuyển đổi sang và thoát khỏi chế độ hiển thị tối đa. Hành vi cắt mặc định có thể khiến nội dung trong ứng dụng của bạn hiển thị trong vùng cắt khi có các thanh hệ thống, nhưng không xuất hiện khi ở chế độ hiển thị tối đa. Điều này dẫn đến việc nội dung di chuyển lên và xuống trong quá trình chuyển đổi, như được minh hoạ trong ví dụ sau.Ở chế độ hiển thị tối đa, hãy cẩn thận khi sử dụng toạ độ cửa sổ so với màn hình, vì ứng dụng không dùng toàn bộ màn hình khi ở dạng hòm thư. Do có hộp thư, toạ độ từ gốc màn hình không giống với toạ độ từ điểm gốc cửa sổ. Bạn có thể chuyển đổi toạ độ màn hình thành toạ độ của khung hiển thị nếu cần bằng cách sử dụng
getLocationOnScreen()
. Hình ảnh sau đây cho thấy sự khác biệt về toạ độ khi nội dung ở dạng hòm thư:Khi xử lý
MotionEvent
, hãy sử dụngMotionEvent.getX()
vàMotionEvent.getY()
để tránh các vấn đề toạ độ tương tự. Đừng sử dụngMotionEvent.getRawX()
hoặcMotionEvent.getRawY()
.
Kiểm thử cách nội dung hiển thị
Kiểm thử tất cả các màn hình và trải nghiệm trong ứng dụng của bạn. Kiểm thử trên các thiết bị có nhiều loại vết cắt (nếu có thể). Nếu không có thiết bị nào có vết cắt, 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 thực hiện các thao tác sau:
- Bật Tuỳ chọn cho nhà phát triển.
- Trong màn hình Developer options (Tuỳ chọn cho nhà phát triển), hãy di chuyển xuống phần Drawing (Bản vẽ) rồi chọn Simulate a display with a Cutout (Mô phỏng màn hình có phần cắt).
Chọn kiểu vết cắt.