Ứng dụng tràn viền tận dụng toàn bộ màn hình bằng cách vẽ giao diện người dùng bên dưới thanh hệ thống.
Cướp lại bóng
- Vẽ nền và nội dung cuộn bên dưới các thanh hệ thống để mang lại trải nghiệm tràn viền.
- Tránh thêm cử chỉ nhấn hoặc mục tiêu kéo bên dưới phần lồng ghép hệ thống; những cử chỉ này xung đột với chế độ hiển thị tràn viền và điều hướng bằng cử chỉ.
Vẽ nội dung của bạn phía sau các thanh hệ thống
Tính năng tràn viền cho phép bạn vẽ giao diện người dùng bên dưới các thanh hệ thống để có trải nghiệm sống động.
Ứng dụng có thể xử lý nội dung bị chồng chéo bằng cách phản ứng với phần lồng ghép. Phần lồng ghép mô tả lượng khoảng đệm cần thiết cho nội dung của ứng dụng để tránh chồng chéo với thanh hệ thống hoặc với các tính năng của thiết bị thực, chẳng hạn như vết cắt trên màn hình. Đọc về cách hỗ trợ chế độ tràn viền và xử lý phần lồng ghép trong Compose và Thành phần hiển thị.
Hãy lưu ý đến các loại phần lồng ghép sau đây khi thiết kế các trường hợp sử dụng tràn viền:
- Phần lồng ghép thanh hệ thống áp dụng cho giao diện người dùng vừa có thể nhấn vào vừa không được thanh hệ thống che khuất về mặt hình ảnh.
- Phần lồng ghép cử chỉ hệ thống áp dụng cho các vùng thao tác bằng cử chỉ mà hệ điều hành sử dụng. Các vùng này sẽ được ưu tiên hơn ứng dụng của bạn.
- Phần lồng ghép vết cắt trên màn hình áp dụng cho các vùng trên thiết bị mở rộng vào bề mặt màn hình, chẳng hạn như vết cắt trên camera.
Những điểm cần cân nhắc về thanh trạng thái
Hãy xem Thanh hệ thống Android để biết hướng dẫn cơ bản về thiết kế thanh hệ thống. Phần sau đây thảo luận về những điểm cần cân nhắc khác đối với thanh trạng thái.
Nội dung có thể cuộn
Thanh ứng dụng trên cùng sẽ thu gọn khi người dùng cuộn. Tìm hiểu cách thu gọn TopAppBar của Material 3. Trong Material 3, các thanh ứng dụng nhỏ ở trên cùng có thể thu gọn thành chiều cao thanh trạng thái hoặc cuộn ra khỏi màn hình. Thanh ứng dụng trên cùng có kích thước trung bình và lớn có thể thu gọn thành một thanh ứng dụng nhỏ hơn. Xem hướng dẫn về Material.
Nên
Nên
Thanh trạng thái phải trong mờ khi giao diện người dùng cuộn bên dưới, để các biểu tượng trên thanh trạng thái không bị lộn xộn. Để thực hiện việc này, trước tiên, hãy tạo một giao diện người dùng có thể cuộn tràn viền bằng cách triển khai các bước trong tài liệu LazyColumn hoặc RecyclerView. Sau đó, hãy đảm bảo thanh hệ thống có màu trong mờ bằng cách thực hiện một trong những thao tác sau:
- Dựa vào tính năng bảo vệ tự động TopAppBar của Material 3 khi cuộn, nếu có thể.
- Tạo thành phần kết hợp chuyển màu tuỳ chỉnh hoặc dùng GradientProtection cho Khung hiển thị. Để biết thêm thông tin về cách thực hiện việc này trong Compose, hãy xem bài viết Bảo vệ thanh hệ thống.
Đối với bố cục thích ứng, hãy đảm bảo có các biện pháp bảo vệ riêng cho các ngăn có màu nền khác nhau.
Không nên
Nên
Tương tự, ngăn điều hướng cũng phải có một lớp bảo vệ riêng biệt với phần còn lại của ứng dụng.
Không xếp chồng các biện pháp bảo vệ thanh trạng thái, chẳng hạn như bằng cách sử dụng cả biện pháp bảo vệ tích hợp sẵn TopAppBar của Material 3 và biện pháp bảo vệ tuỳ chỉnh.
Những điều cần lưu ý về thanh điều hướng
Hãy xem Thanh hệ thống Android để biết hướng dẫn cơ bản về thiết kế thanh điều hướng. Phần sau đây trình bày thêm những điểm cần cân nhắc về thanh điều hướng.
Nội dung có thể cuộn
Thanh ứng dụng dưới cùng sẽ thu gọn khi người dùng cuộn.
Nên
Nên
Vết cắt trên màn hình
Vết cắt trên màn hình có thể ảnh hưởng đến giao diện người dùng của bạn. Các ứng dụng phải xử lý phần lồng ghép vết cắt trên màn hình để các phần quan trọng của giao diện người dùng không vẽ bên dưới vết cắt trên màn hình.
Nên
Không nên
Tuy nhiên, nền thanh ứng dụng liền khối sẽ vẽ vào vết cắt trên màn hình như minh hoạ trong hình sau.
Đảm bảo băng chuyền ngang vẽ vào vết cắt trên màn hình.
Đọc về cách hỗ trợ vết cắt trên màn hình trong Compose và Views.
Hướng dẫn khác
Nhìn chung, nền và đường phân chia cũng nên vẽ từ cạnh này sang cạnh khác, trong khi nội dung như văn bản và nút phải được lồng vào trong để tránh Giao diện người dùng hệ thống và các phần tử phần cứng.