Thiết kế tràn viền

Ứ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 các thanh hệ thống.

Hình 1. Trái. Ứng dụng không hiển thị tràn viền. Phải. Ứng dụng có chế độ tràn viền.

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 để có trải nghiệm tràn viền.
  • Tránh thêm cử chỉ nhấn hoặc mục tiêu kéo trong phần lồng ghép hệ thống; các cử chỉ này sẽ xung đột với thao tác điều hướng từ cạnh này sang cạnh kia và cử chỉ.
Hình 2. Một ứng dụng có các phần lồng ghép cử chỉ được làm nổi bật màu xanh lục.

Vẽ nội dung 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 để mang lại trải nghiệm sống động.

Ứng dụng có thể giải quyết vấn đề trùng lặp nội dung bằng cách phản ứng với phần lồng ghép. Phần lồng ghép mô tả 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 các tính năng thiết bị thực tế 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à Khung hiển thị.

Hãy lưu ý 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ừa không bị thanh hệ thống che khuất.
  • Phần lồng ghép cử chỉ của hệ thống áp dụng cho các khu vực điều hướng bằng cử chỉ mà hệ điều hành sử dụng và được ưu tiên hơn ứng dụng của bạn.
  • Vùng cắt màn hình áp dụng cho các khu vực thiết bị mở rộng vào bề mặt màn hình, chẳng hạn như vùng cắt máy ảnh.

Những điều cần cân nhắc về thanh trạng thái

Hãy xem phần Thanh hệ thống Android để biết hướng dẫn thiết kế cơ bản về thanh hệ thống. Phần sau đây thảo luận về các đ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 trong khi cuộn. Tìm hiểu cách thu gọn TopAppBar Material 3.

Nên

Thu gọn thanh ứng dụng trên cùng xuống chiều cao của thanh trạng thái nếu thanh ứng dụng cố định.

Nên

Thêm độ dốc màu nền phù hợp nếu thanh ứng dụng trên cùng không cố định.

Thanh trạng thái phải trong suốt khi giao diện người dùng cuộn bên dưới để các biểu tượng thanh trạng thái không trông 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 từ cạnh này sang cạnh kia bằng cách triển khai các bước trong tài liệu về LazyColumn hoặc RecyclerView. Sau đó, hãy đảm bảo thanh hệ thống có độ mờ bằng cách làm theo một trong những cách sau:

  • Dựa vào tính năng tự động bảo vệ TopAppBar của Material 3 khi cuộn, nếu có.
  • Tạo một thành phần kết hợp tuỳ chỉnh có độ đậm nhạt 60% hoặc sử dụng GradientProtection cho Khung hiển thị.
Hình 3. Một ứng dụng có các phần lồng ghép cử chỉ được làm nổi bật màu xanh lục.

Đố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

Có tính năng bảo vệ chuyển màu không khớp với nền của mỗi ngăn

Nên

Có lớp bảo vệ chuyển màu khớp với nền của mỗi ngăn.

Tương tự, ngăn điều hướng cũng phải có biện pháp bảo vệ riêng biệt với phần còn lại của ứng dụng.

Hình 4. Thanh trạng thái trong suốt cho ngăn điều hướng. Hình ảnh này cho thấy tính năng bảo vệ thanh trạng thái cho ngăn điều hướng nhưng không phải ứng dụng.

Đừ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.

Hãy xem phần Thanh hệ thống Android để biết hướng dẫn thiết kế cơ bản về thanh điều hướng. Phần sau đây trình bày thêm một số đ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 trong khi cuộn.

Nên

Thêm scrim thanh hệ thống để điều hướng bằng 3 nút khi thanh ứng dụng ở dưới cùng biến mất.

Nên

Giữ cho thao tác bằng cử chỉ luôn trong suốt và không thêm một màn hình mờ bổ sung.

Vết cắt trên màn hình

Phần cắt màn hình có thể ảnh hưởng đến giao diện của giao diện người dùng. Ứng dụng phải xử lý các phần lồng ghép cắt 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 phần cắt màn hình.

Nên

Lồng ghép giao diện người dùng quan trọng bằng cách sử dụng các phần lồng ghép màn hình cắt.

Không nên

Đặt giao diện người dùng quan trọng ở chính cạnh màn hình.

Tuy nhiên, nền thanh ứng dụng đồng nhất phải vẽ vào phần cắt màn hình như trong hình sau.

Hình 5. Nền thanh ứng dụng liền mạch được vẽ vào phần cắt màn hình trong khi giao diện người dùng quan trọng được lồng ghép.

Đảm bảo băng chuyền ngang vẽ vào phần cắt màn hình.

Hình 6. Màn hình ngang tràn viền, trong đó băng chuyền cuộn qua phần cắt màn hình.

Đọc về cách hỗ trợ phần cắt màn hình trong Compose và Khung hiển thị.

Hướng dẫn khác

Nhìn chung, nền và đường phân chia cũng phải vẽ từ cạnh này sang cạnh kia, trong khi nội dung như văn bản và nút phải được lồng ghép để tránh giao diện người dùng hệ thống và các phần tử phần cứng.