Nền tảng Android chịu trách nhiệm vẽ giao diện người dùng hệ thống, chẳng hạn như thanh trạng thái và thanh điều hướng. Giao diện người dùng hệ thống này sẽ hiển thị bất kể người dùng đang sử dụng ứng dụng nào.
WindowInsets cung cấp thông tin về giao diện người dùng hệ thống để đảm bảo ứng dụng của bạn vẽ ở đúng khu vực và giao diện người dùng không bị giao diện người dùng hệ thống che khuất.
Trên Android 14 (API cấp 34) trở xuống, giao diện người dùng của ứng dụng sẽ không vẽ bên dưới các thanh hệ thống và vết cắt trên màn hình theo mặc định.
Trên Android 15 (API cấp 35) trở lên, ứng dụng của bạn sẽ vẽ bên dưới các thanh hệ thống và hiển thị các phần cắt khi ứng dụng nhắm đến SDK 35. Điều này mang lại trải nghiệm liền mạch hơn cho người dùng và cho phép ứng dụng của bạn tận dụng tối đa không gian cửa sổ có sẵn.
Việc hiển thị nội dung phía sau giao diện người dùng hệ thống được gọi là chuyển sang chế độ tràn viền. Trên trang này, bạn sẽ tìm hiểu về các loại phần lồng ghép, cách hiển thị tràn viền và cách sử dụng API phần lồng ghép để tạo ảnh động cho giao diện người dùng và đảm bảo nội dung của ứng dụng không bị các thành phần trên giao diện người dùng hệ thống che khuất.
Kiến thức cơ bản về phần lồng ghép
Khi một ứng dụng chạy tràn viền, bạn cần đảm bảo rằng giao diện người dùng hệ thống không che khuất nội dung và hoạt động tương tác quan trọng. Ví dụ: nếu một nút được đặt phía sau thanh điều hướng, thì người dùng có thể không nhấp được vào nút đó.
Kích thước của giao diện người dùng hệ thống và thông tin về vị trí đặt giao diện người dùng được chỉ định thông qua phần lồng ghép.
Mỗi phần của giao diện người dùng hệ thống có một loại phần lồng ghép tương ứng mô tả kích thước và vị trí của phần lồng ghép đó. Ví dụ: phần lồng ghép thanh trạng thái cung cấp kích thước và vị trí của thanh trạng thái, trong khi phần lồng ghép thanh điều hướng cung cấp kích thước và vị trí của thanh điều hướng. Mỗi loại phần lồng ghép bao gồm 4 kích thước pixel: trên cùng, bên trái, bên phải và dưới cùng. Các kích thước này chỉ định khoảng cách mà giao diện người dùng hệ thống mở rộng từ các cạnh tương ứng của cửa sổ ứng dụng. Do đó, để tránh trùng lặp với loại giao diện người dùng hệ thống đó, giao diện người dùng ứng dụng phải được lồng ghép theo lượng đó.
Các loại phần lồng ghép Android tích hợp sẵn này có sẵn thông qua WindowInsets:
Các phần lồng ghép mô tả các thanh trạng thái. Đây là các thanh giao diện người dùng hệ thống trên cùng chứa biểu tượng thông báo và các chỉ báo khác. |
|
Các phần lồng ghép thanh trạng thái khi chúng hiển thị. Nếu thanh trạng thái hiện đang ẩn (do chuyển sang chế độ toàn màn hình sống động), thì các phần lồng ghép thanh trạng thái chính sẽ trống, nhưng các phần lồng ghép này sẽ không trống. |
|
Phần lồng ghép mô tả các thanh điều hướng. Đây là các thanh giao diện người dùng hệ thống ở bên trái, bên phải hoặc bên dưới thiết bị, mô tả thanh tác vụ hoặc biểu tượng điều hướng. Các thành phần này có thể thay đổi trong thời gian chạy dựa trên phương thức điều hướng mà người dùng ưu tiên và tương tác với thanh tác vụ. |
|
Các phần lồng ghép thanh điều hướng khi chúng hiển thị. Nếu các thanh điều hướng hiện đang bị ẩn (do chuyển sang chế độ toàn màn hình sống động), thì các phần lồng ghép thanh điều hướng chính sẽ trống, nhưng các phần lồng ghép này sẽ không trống. |
|
Phần lồng ghép mô tả kiểu trang trí cửa sổ giao diện người dùng hệ thống nếu ở cửa sổ dạng tự do, chẳng hạn như thanh tiêu đề trên cùng. |
|
Phần lồng ghép thanh phụ đề khi chúng hiển thị. Nếu các thanh chú thích hiện đang bị ẩn, thì các phần lồng ghép thanh chú thích chính sẽ trống, nhưng các phần lồng ghép này sẽ không trống. |
|
Tập hợp các phần lồng ghép của thanh hệ thống, bao gồm thanh trạng thái, thanh điều hướng và thanh chú thích. |
|
Các phần lồng ghép thanh hệ thống khi chúng hiển thị. Nếu các thanh hệ thống hiện đang bị ẩn (do chuyển sang chế độ toàn màn hình sống động), thì các phần lồng ghép thanh hệ thống chính sẽ trống, nhưng các phần lồng ghép này sẽ không trống. |
|
Phần lồng ghép mô tả dung lượng không gian ở dưới cùng mà bàn phím phần mềm chiếm dụng. |
|
Các phần lồng ghép mô tả lượng không gian mà bàn phím phần mềm chiếm trước ảnh động bàn phím hiện tại. |
|
Phần lồng ghép mô tả lượng không gian mà bàn phím phần mềm sẽ chiếm sau ảnh động bàn phím hiện tại. |
|
Một loại phần lồng ghép mô tả thông tin chi tiết hơn về giao diện người dùng điều hướng, cho biết lượng không gian mà hệ thống sẽ xử lý "lượt nhấn" chứ không phải ứng dụng. Đối với thanh điều hướng trong suốt có tính năng điều hướng bằng cử chỉ, bạn có thể nhấn vào một số thành phần ứng dụng thông qua giao diện người dùng điều hướng của hệ thống. |
|
Phần tử có thể nhấn sẽ lồng ghép vào khi hiển thị. Nếu các phần tử có thể nhấn hiện đang bị ẩn (do chuyển sang chế độ toàn màn hình sống động), thì các phần lồng ghép phần tử có thể nhấn chính sẽ trống, nhưng các phần lồng ghép này sẽ không trống. |
|
Phần lồng ghép đại diện cho số lượng phần lồng ghép mà hệ thống sẽ chặn cử chỉ để điều hướng. Các ứng dụng có thể chỉ định xử lý một số lượng hạn chế các cử chỉ này theo cách thủ công thông qua |
|
Một tập hợp con của các cử chỉ hệ thống sẽ luôn do hệ thống xử lý và không thể chọn không sử dụng thông qua |
|
Phần lồng ghép thể hiện khoảng cách cần thiết để tránh chồng chéo với phần cắt trên màn hình (vết khía hoặc lỗ pin). |
|
Phần lồng ghép đại diện cho các khu vực cong của màn hình dạng thác nước. Màn hình thác nước có các vùng cong dọc theo các cạnh của màn hình, nơi màn hình bắt đầu bao bọc dọc theo các cạnh của thiết bị. |
Các loại này được tóm tắt theo 3 loại phần lồng ghép "an toàn" để đảm bảo nội dung không bị che khuất:
Các loại phần lồng ghép "an toàn" này bảo vệ nội dung theo nhiều cách, dựa trên phần lồng ghép nền tảng cơ bản:
- Sử dụng
WindowInsets.safeDrawingđể bảo vệ nội dung không được vẽ bên dưới bất kỳ giao diện người dùng hệ thống nào. Đây là cách sử dụng lồng ghép phổ biến nhất: để ngăn nội dung vẽ bị giao diện người dùng hệ thống che khuất (một phần hoặc hoàn toàn). - Sử dụng
WindowInsets.safeGesturesđể bảo vệ nội dung bằng cử chỉ. Điều này giúp tránh các cử chỉ của hệ thống xung đột với cử chỉ của ứng dụng (chẳng hạn như các cử chỉ cho các trang dưới cùng, băng chuyền hoặc trong trò chơi). - Sử dụng
WindowInsets.safeContentdưới dạng kết hợp giữaWindowInsets.safeDrawingvàWindowInsets.safeGesturesđể đảm bảo nội dung không bị chồng chéo về hình ảnh và không bị chồng chéo về cử chỉ.
Đề xuất cho bạn
- Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
- Thành phần và bố cục Material
- Di chuyển
CoordinatorLayoutsang Compose - Những điểm khác cần cân nhắc