Thanh trạng thái và thanh điều hướng cùng được gọi là thanh hệ thống. Chúng cho thấy các thông tin quan trọng như mức pin, thời gian và các cảnh báo thông báo và cho phép tương tác trực tiếp với thiết bị từ bất cứ đâu.
Điều quan trọng là phải tính đến sự nổi bật của thanh hệ thống, cho dù bạn đang thiết kế giao diện người dùng cho các tương tác với hệ điều hành Android, phương thức nhập hoặc các khả năng của thiết bị. Giữ thanh hệ thống ở trên cùng của hầu hết các lớp để đảm bảo chúng được tính.
Cướp lại bóng
Đưa thanh hệ thống vào thiết kế của bạn để tính đến các vùng an toàn cho giao diện người dùng, hệ thống tương tác, phương thức nhập, vết cắt trên màn hình và các tính năng khác của thiết bị. Giữ thanh hệ thống ở lớp trên cùng để đảm bảo chúng được tính đến.
Nên: Làm cho thanh hệ thống trở nên trong suốt và bố trí ứng dụng ở chế độ toàn màn hình, tiếp tục giao diện người dùng dưới các thanh để mang lại trải nghiệm tràn viền.
Nếu bạn không thể đặt cả hai thanh là trong suốt, hãy đảm bảo màu của các thanh khớp với màu của phần nội dung trong ứng dụng. Ví dụ: khớp với phía dưới cùng màu thanh điều hướng cùng với màu của thanh cử chỉ và thanh trạng thái ở trên cùng bằng màu của nội dung.
Hình 2: Đảm bảo màu của thanh hệ thống khớp với màu nội dung của ứng dụng Tránh thêm các cử chỉ nhấn hoặc đích kéo bên dưới phần lồng ghép cử chỉ; chúng xung đột với thao tác hiển thị tràn viền và thao tác bằng cử chỉ.
Hình 3: Phần lồng ghép cử chỉ hệ thống. Tránh đặt cử chỉ nhấn các mục tiêu thuộc những khía cạnh này
Vẽ nội dung của bạn phía sau các thanh hệ thống
Tính năng hiển thị tràn viền cho phép Android vẽ giao diện người dùng dưới các thanh hệ thống một trải nghiệm sống động hơn. Bạn nên sử dụng chiến dịch tràn viền vì thanh điều hướng trong suốt là một yêu cầu phổ biến của người dùng. (Tìm hiểu cách support Ed-to-edge).
Ứng dụng có thể giải quyết các trường hợp trùng lặp trong nội dung bằng cách phản ứng với các phần lồng ghép. Phần lồng ghép mô tả mức độ cần chèn nội dung của ứng dụng để tránh chồng chéo với các phần của giao diện người dùng trên hệ điều hành Android như thanh điều hướng hoặc thanh trạng thái hoặc với các tính năng thực của thiết bị như vết cắt trên màn hình.
Hãy lưu ý các loại phần lồng ghép sau đây khi thiết kế để sử dụng tràn viền trường hợp:
- 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 được phép nhấn vào bị các thanh hệ thống che khuất trực quan.
- Phần lồng ghép cử chỉ hệ thống áp dụng cho các khu vực thao tác bằng cử chỉ mà hệ thống sử dụng được ưu tiên hơn ứng dụng của bạn.
Thanh trạng thái
Trên Android, thanh trạng thái chứa biểu tượng thông báo và biểu tượng hệ thống. Chiến lược phát hành đĩa đơn người dùng tương tác với thanh trạng thái bằng cách kéo thanh xuống để truy cập thông báo bóng.
Thanh trạng thái có thể xuất hiện khác nhau tuỳ thuộc vào ngữ cảnh, thời gian trong ngày, chủ đề hoặc lựa chọn ưu tiên do người dùng đặt và các tham số khác. Bạn cũng có thể đặt kiểu thanh trạng thái như trong các ví dụ sau.
Đảm bảo rằng nội dung ứng dụng trải rộng ra toàn bộ màn hình, hiển thị tràn viền là bắt buộc. Sử dụng các thanh hệ thống trong suốt với nội dung tràn viền, như minh hoạ trong ví dụ sau.
Khi thông báo đến, một biểu tượng thường xuất hiện trên thanh trạng thái. Chiến dịch này tín hiệu cho người dùng rằng có nội dung gì đó trong ngăn thông báo. Đây có thể là biểu tượng ứng dụng hoặc biểu tượng đại diện cho kênh. Xem Thiết kế thông báo.
Đặt kiểu thanh trạng thái
Tạo kiểu cho nền thanh trạng thái trong giao diện ứng dụng bằng một màu tuỳ chỉnh hoặc kiểu, cùng với đặt độ trong suốt và độ mờ.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Nếu đặt màu nền theo cách thủ công, bạn có thể tuỳ ý tạo kiểu cho trạng thái nội dung thanh thành sáng hoặc tối để có độ tương phản tối ưu.
Vết cắt trên màn hình và thanh trạng thái
Vết cắt trên màn hình là một vùng trên một số thiết bị mở rộng ra cả màn hình một bề mặt khác để tạo không gian cho các cảm biến mặt trước. Việc này có thể ảnh hưởng đến giao diện thanh trạng thái. Vết cắt trên màn hình có thể khác nhau tuỳ theo nhà sản xuất.
Đọc về cách hỗ trợ vết cắt trên màn hình.
Thanh điều hướng
Android cho phép người dùng điều khiển việc đi theo chỉ dẫn bằng các chế độ điều khiển quay lại, trang chủ và tổng quan:
- Thao tác quay lại sẽ trực tiếp quay lại khung hiển thị trước đó.
- Màn hình chính chuyển ra khỏi ứng dụng và sang màn hình chính của thiết bị.
- Thẻ Tổng quan cho thấy các ứng dụng đang mở và mới mở gần đây.
Người dùng có thể chọn trong số nhiều cấu hình thanh điều hướng, bao gồm cả cử chỉ thao tác (nên dùng) và thao tác bằng 3 nút.
Di chuyển bằng cử chỉ
Ra mắt trong Android 10 (API cấp 29), bạn nên dùng thao tác bằng cử chỉ loại điều hướng, mặc dù bạn không thể ghi đè lựa chọn ưu tiên của người dùng. Cử chỉ điều hướng không sử dụng các nút cho quay lại, trang chủ và tổng quan, thay vào đó hiển thị nút điều khiển cử chỉ đơn cho thành phần tương tác. Người dùng tương tác bằng cách vuốt từ bên trái hoặc cạnh bên phải của màn hình để quay lại và tiến lên và ngược lại từ cuối màn hình màn hình chính. Thao tác vuốt lên và giữ sẽ mở ra phần tổng quan.
Thao tác bằng cử chỉ là một mẫu điều hướng dễ mở rộng hơn để thiết kế trên thiết bị di động và màn hình lớn hơn. Để cung cấp trải nghiệm người dùng tốt nhất, hãy tính đến thao tác bằng cử chỉ bằng cách:
- Hỗ trợ nội dung tràn viền.
- Tránh thêm hoạt động tương tác hoặc đích chạm trong phần lồng ghép thao tác bằng cử chỉ.
Hãy đọc về cách triển khai thao tác bằng cử chỉ.
Thao tác bằng 3 nút
Cách thao tác bằng 3 nút gồm có 3 nút quay lại, nút màn hình chính và nút tổng quan.
Các biến thể khác của thanh điều hướng
Tuỳ thuộc vào phiên bản Android và thiết bị, các cấu hình khác của thanh điều hướng có thể khả dụng cho người dùng của bạn. Ví dụ: thao tác bằng hai nút cung cấp hai nút quay lại và màn hình chính.
Đặt kiểu điều hướng
Ví dụ sau đây cho thấy cách triển khai một kiểu điều hướng.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android xử lý toàn bộ biện pháp bảo vệ hình ảnh của giao diện người dùng bằng cử chỉ chế độ thao tác hoặc trong chế độ nút.
Chế độ thao tác bằng cử chỉ: Hệ thống áp dụng tính năng điều chỉnh màu động theo nội dung của thanh hệ thống thay đổi màu dựa trên nội dung phía sau họ. Trong ví dụ sau, ô điều khiển trên thanh điều hướng sẽ đổi thành màu tối nếu đặt hình ảnh lên phía trên nội dung sáng và ngược lại.
Hình 13: Điều chỉnh màu động Chế độ nút: Hệ thống áp dụng một màn chắn trong suốt phía sau hệ thống thanh (đối với API cấp 29 trở lên) hoặc thanh hệ thống trong suốt (đối với cấp API 28 trở xuống).
Hình 14: Điều chỉnh màu động, trong đó các thanh hệ thống đổi màu dựa trên nội dung phía sau
Bàn phím và điều hướng
Mỗi loại điều hướng sẽ phản ứng theo cách thích hợp với bàn phím ảo để
cho phép người dùng thực hiện các thao tác như đóng hoặc thậm chí thay đổi
loại bàn phím. Để đảm bảo quá trình chuyển đổi bàn phím diễn ra suôn sẻ, để đảm bảo quá trình
hiệu ứng chuyển đổi đồng bộ hoá quá trình chuyển đổi của ứng dụng bằng thao tác trượt bằng bàn phím
lên và xuống từ cuối màn hình, sử dụng
WindowInsetsAnimationCompat.
Chế độ hiển thị tối đa
Bạn có thể ẩn các thanh hệ thống khi cần xem toàn màn hình, ví dụ: khi người dùng đang xem phim. Người dùng vẫn có thể nhấn để hiển thị thanh hệ thống và giao diện người dùng để điều hướng hoặc tương tác với các chế độ điều khiển hệ thống. Tìm hiểu thêm về cách thiết kế cho chế độ toàn màn hình hoặc đọc về cách ẩn thanh hệ thống cho chế độ hiển thị tối đa.