Hỗ trợ vết cắt trên màn hình

Thử cách sử dụng Compose
Jetpack Compose là bộ công cụ giao diện người dùng được đề xuất cho Android. Tìm hiểu cách xử lý vết cắt trên màn hình trong Compose.
Vết cắt trên màn hình trong Compose →

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.

Hình ảnh minh hoạ vết cắt hiển thị ở trên cùng chính giữa
Hình 1. 1 Vết cắt trên màn hình.

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:

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 cho thấy nội dung hiển thị vào vùng cắt khi ở chế độ dọc
Hình 2. Kết xuất nội dung vào vùng cắt khi ở 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:

Hình ảnh cho thấy nội dung hiển thị vào vùng cắt khi ở chế độ ngang
Hình 3. Kết xuất nội dung vào vùng bị cắt khi ở chế độ 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:

Hình ảnh một thiết bị có vết cắt ở góc
Hình 4. Một thiết bị có vết cắt ở góc.

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:

Hình ảnh hiển thị LAYouT_IN_DISPLAY_CUTOUT_MODE_NEVER cho chế độ dọc
Hình 5. Ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER cho chế độ chân dung.

Sau đây là ví dụ về LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER ở chế độ ngang:

Hình ảnh hiển thị LAYouT_IN_DISPLAY_CUTOUT_MODE_NEVER cho chế độ ngang
Hình 6. 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.

    Hình ảnh cho thấy nội dung bị cắt ở trên cùng do thiết lập phần lồng ghép không đúng cách
    Hình 7. Sử dụng WindowInsetsCompat để tránh chồng chéo hoặc cắt bớt nội dung.

  • 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ụng View.getLocationOnScreen().

  • Sử dụng chế độ cắt shortEdges hoặc never 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.

    Hình ảnh cho thấy nội dung di chuyển lên và xuống trong quá trình chuyển đổi.
    Hình 8. Ví dụ về nội dung di chuyển lên và xuống trong quá trình chuyển đổi.

  • Ở 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ư:

    Hình ảnh cho thấy cửa sổ so với toạ độ màn hình khi nội dung ở dạng hòm thư.
    Hình 9. Toạ độ cửa sổ so với màn hình khi nội dung ở dạng hòm thư.

  • Khi xử lý MotionEvent, hãy sử dụng MotionEvent.getX() và MotionEvent.getY() để tránh các vấn đề toạ độ tương tự. Đừng sử dụng MotionEvent.getRawX() hoặc MotionEvent.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:

  1. Bật Tuỳ chọn cho nhà phát triển.
  2. 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).

  3. Chọn kiểu vết cắt.

    Hình ảnh minh hoạ cách mô phỏng một vết cắt trên màn hình trong trình mô phỏng
    Hình 10. Các tuỳ chọn cho nhà phát triển để kiểm thử cách nội dung của bạn hiển thị.

Tài nguyên khác