Giới thiệu về phần lồng ghép cửa sổ

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ẽ xuất hiện 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.

Hình 1. Chuyển sang chế độ tràn viền để vẽ phía sau thanh hệ thống.

Trên Android 14 (cấp độ API 34) trở xuống, theo mặc định, giao diện người dùng của ứng dụng không vẽ bên dưới thanh hệ thống và vết cắt trên màn hình.

Trên Android 15 (cấp độ API 35) trở lên, ứng dụng của bạn sẽ vẽ bên dưới các thanh hệ thống và vết cắt trên màn hình sau khi ứng dụng nhắm đến SDK 35. Nhờ vậy, người dùng có trải nghiệm liền mạch hơn và ứng dụng của bạn có thể 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 khoảng lùi, cách chuyển sang chế độ tràn viền và cách sử dụng API khoảng lùi để tạo ảnh động cho giao diện người dùng, đồng thời đảm bảo nội dung của ứng dụng không bị các phần tử trên giao diện người dùng của hệ thống che khuất.

Quan trọng: Chế độ tràn viền được thực thi trên Android 15 trở lên sau khi ứng dụng của bạn nhắm đến SDK 35. Nếu ứng dụng của bạn chưa tràn viền, thì một số phần của ứng dụng có thể bị ẩn và bạn phải xử lý các phần lồng ghép. Tuỳ thuộc vào ứng dụng, công việc này có thể quan trọng hoặc không. Thành phần Scaffold của Material 3 có thể giảm bớt công việc cần làm để tương thích với việc thực thi chế độ tràn viền của Android 15. Xem phần Tạo thành phần scaffold để giữ giao diện người dùng lại với nhau.

Kiến thức cơ bản về phần lồng ghép

Khi ứng dụng chuyển sang chế độ tràn viền, bạn cần đảm bảo rằng nội dung và hoạt động tương tác quan trọng không bị giao diện người dùng hệ thống che khuất. 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 hệ thống được chỉ định bằng 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 đó. 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 của ứng dụng phải được lồng vào khoảng đó.

Các loại phần lồng ghép tích hợp sẵn này của Android có sẵn thông qua WindowInsets:

WindowInsets.statusBars	Các phần lồng ghép mô tả 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 các biểu tượng thông báo và các chỉ báo khác.
WindowInsets.statusBarsIgnoringVisibility	Phần lồng ghép thanh trạng thái khi thanh trạng thái hiển thị. Nếu thanh trạng thái bị ẩn (do chuyển sang chế độ toàn màn hình), 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.
WindowInsets.navigationBars	Các phần lồng ghép mô tả 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 phía dưới cùng của thiết bị, mô tả thanh tác vụ hoặc biểu tượng điều hướng. Các chế độ 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ụ.
WindowInsets.navigationBarsIgnoringVisibility	Phần lồng ghép thanh điều hướng khi chúng hiển thị. Nếu thanh điều hướng bị ẩn (do chuyển sang chế độ toàn màn hình tối đa), 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.
WindowInsets.captionBar	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 ở trong cửa sổ dạng tự do, chẳng hạn như thanh tiêu đề trên cùng.
WindowInsets.captionBarIgnoringVisibility	Thanh chú thích lồng vào khi chúng hiển thị. Nếu thanh chú thích bị ẩn, thì 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.
WindowInsets.systemBars	Sự kết hợp của các phần lồng ghép thanh hệ thống, bao gồm thanh trạng thái, thanh điều hướng và thanh chú thích.
WindowInsets.systemBarsIgnoringVisibility	Phần lồng ghép thanh hệ thống khi chúng hiển thị. Nếu các thanh hệ thống bị ẩn (do chuyển sang chế độ hiển thị tối đa toàn màn hình), 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.
WindowInsets.ime	Các phần lồng ghép mô tả khoảng không gian ở dưới cùng mà bàn phím phần mềm chiếm dụng.
WindowInsets.imeAnimationSource	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.
WindowInsets.imeAnimationTarget	Các 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.
WindowInsets.tappableElement	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, cung cấp 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ỉ, một số thành phần ứng dụng có thể nhấn được thông qua giao diện người dùng điều hướng của hệ thống.
WindowInsets.tappableElementIgnoringVisibility	Phần lồng ghép phần tử có thể nhấn khi chúng hiển thị. Nếu các phần tử có thể nhấn bị ẩn (do chuyển sang chế độ toàn màn hình tối đa), 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.
WindowInsets.systemGestures	Các phần lồng ghép thể hiện số lượng phần lồng ghép mà hệ thống sẽ chặn cử chỉ để điều hướng. Ứng dụng có thể chỉ định theo cách thủ công việc xử lý một số lượng hạn chế các cử chỉ này bằng cách sử dụng Modifier.systemGestureExclusion.
WindowInsets.mandatorySystemGestures	Một nhóm nhỏ các cử chỉ hệ thống sẽ luôn được hệ thống xử lý và không thể chọn không sử dụng bằng Modifier.systemGestureExclusion.
WindowInsets.displayCutout	Các 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 vết cắt trên màn hình (tai thỏ hoặc lỗ kim).
WindowInsets.waterfall	Các phần lồng ghép đại diện cho các vùng cong của màn hình 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 quanh các cạnh của thiết bị.

Các loại này được tóm tắt bằng ba loại phần lồng ghép "an toàn" để đảm bảo nội dung không bị che khuất:

• WindowInsets.safeDrawing
• WindowInsets.safeGestures
• WindowInsets.safeContent

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 các 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 phần lồng ghép phổ biến nhất: để ngăn việc vẽ nội dung 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 xung đột giữa cử chỉ hệ thống với cử chỉ ứng dụng (chẳng hạn như cử chỉ cho trang tính dưới cùng, băng chuyền hoặc trong trò chơi).
• Sử dụng WindowInsets.safeContent dưới dạng kết hợp của WindowInsets.safeDrawing và WindowInsets.safeGestures để đảm bảo nội dung không bị chồng chéo về hình ảnh và cử chỉ.