Tạo bố cục tiện ích hiệu quả bằng cách xác định nội dung cốt lõi trước. Bố cục của bạn sẽ quyết định cách thông tin và các phần tử tương tác được sắp xếp trong tiện ích. Android cung cấp một số bố cục dựng sẵn cho các tiện ích thanh công cụ, văn bản, danh sách và kiểu lưới để đơn giản hoá quy trình này.
Văn bản
Bố cục văn bản là lựa chọn lý tưởng để hiển thị thông tin ngắn gọn. Bạn có thể thêm hình ảnh cùng với văn bản để tăng tính hấp dẫn về mặt thị giác cho tiện ích.
Lý tưởng cho tiêu đề, nội dung cập nhật trạng thái, nội dung mô tả ngắn hoặc bất kỳ trường hợp nào mà một dòng văn bản truyền tải thông điệp một cách hiệu quả.
Thêm hình ảnh để tăng hiệu ứng thị giác. Để biết thêm thông tin, hãy xem phần Điểm ngắt để tìm hiểu cách điều chỉnh bố cục này cho phù hợp với nhiều kích thước màn hình.
Thanh công cụ
Sử dụng bố cục thanh công cụ để cung cấp cho người dùng quyền truy cập nhanh vào các tác vụ thường dùng trong ứng dụng của bạn, trong một bố cục linh hoạt có thể điều chỉnh theo kích thước tiện ích.
Bố cục thanh công cụ tìm kiếm được thiết kế có chủ đích để thu hút sự chú ý vào hoạt động tìm kiếm như một hành động chính trong thanh công cụ. Các nút tiện dụng khác có thể giúp bạn truy cập nhanh vào các chức năng thường dùng.
Thanh công cụ có thương hiệu của ứng dụng, theo sau là các nút cho những tác vụ thường dùng nhất, phù hợp với các chế độ cài đặt có thể bật/tắt hoặc đường liên kết đến tác vụ. Khi đổi kích thước, bạn có thể ẩn các lựa chọn ít dùng để ưu tiên các thao tác phổ biến hơn. Sử dụng Điểm ngắt để thêm một nút có thể nhấn mới với kích thước tối thiểu là 48 dp khi có đủ không gian.
Danh sách
Sử dụng bố cục danh sách để sắp xếp nhiều mục theo một định dạng rõ ràng, dễ quét. Đây là lựa chọn lý tưởng cho tiêu đề tin tức, danh sách việc cần làm hoặc tin nhắn. Sắp xếp nội dung thành một danh sách có cấu trúc và dễ quét. Chọn giữa bản trình bày có hoặc không có vùng chứa dựa trên nhu cầu về nội dung của bạn.
Danh sách văn bản và hình ảnh có thể quét là lựa chọn phù hợp để giới thiệu nhiều loại nội dung, chẳng hạn như tiêu đề tin tức, danh sách phát có ảnh bìa đĩa nhạc hoặc tin nhắn.
Bố cục danh sách kiểm tra rất phù hợp để hiển thị các nhiệm vụ, cung cấp mục tiêu nhấn rõ ràng để người dùng nhanh chóng đánh dấu các mục là đã hoàn thành.
Cung cấp nhóm điều khiển trực quan bằng danh sách thao tác, trong đó trạng thái bật/tắt trực quan cung cấp ý kiến phản hồi ngay lập tức về trạng thái của các mục.
Bố cục này rất phù hợp để giới thiệu hình ảnh tràn viền sống động trên Android 17 trở lên. Bố cục này sử dụng tính năng cuộn nhanh để đảm bảo mỗi phần tử con đều căn chỉnh hoàn hảo với chiều cao của vùng chứa tiện ích.
Lưới
Trình bày hình ảnh trong một lưới nhỏ gọn, linh hoạt, có hình ảnh phong phú và nhãn không bắt buộc. Sử dụng các cột và hàng thích ứng với nhiều kích thước màn hình.
Tạo lưới chỉ có hình ảnh để tạo thư viện hình ảnh có thể cuộn và có tác động trực quan. Các hàng và cột sẽ tự động điều chỉnh cho phù hợp với nhiều kích thước màn hình để có bản trình bày tối ưu.
Bạn cũng có thể kết hợp nhãn và nội dung mô tả bằng văn bản để làm phong phú nội dung trong lưới hình ảnh bằng thông tin và bối cảnh bổ sung.
Mã mẫu
Bảng sau đây liên kết từng bố cục chuẩn với chế độ triển khai Jetpack Glance tương ứng trong kho lưu trữ mẫu nền tảng Android trên GitHub.
| Bố cục chuẩn | Danh mục bố cục | Tệp triển khai mẫu |
|---|---|---|
| Chỉ có văn bản | Văn bản | LongTextAppWidget.kt |
| Văn bản và hình ảnh | Văn bản | TextWithImageAppWidget.kt |
| Thanh công cụ tìm kiếm | Thanh công cụ | SearchToolBarAppWidget.kt |
| Thanh công cụ (Chuẩn) | Thanh công cụ | ToolBarAppWidget.kt |
| Danh sách văn bản và hình ảnh | Danh sách | ImageTextListAppWidget.kt |
| Danh sách kiểm tra | Danh sách | CheckListAppWidget.kt |
| Danh sách thao tác | Danh sách | ActionListAppWidget.kt |
| Thao tác cuộn nhanh tràn viền | Danh sách | FullBleedImageAppWidget.kt |
| Chỉ hình ảnh | Lưới | ImageGridAppWidget.kt |
| Hình ảnh và văn bản | Lưới | ImageGridAppWidget.kt |