Bố cục tiện ích chuẩn

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à loại 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ể cải thiện sức hấp dẫn về mặt thị giác của tiện ích bằng cách thêm hình ảnh cùng với văn bản (không bắt buộc).

Chỉ có văn bản

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ả.

Văn bản và hình ảnh

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.

Thanh công cụ tìm kiếm

Bố cục thanh công cụ tìm kiếm được thiết kế có chủ đích để thu hút sự chú ý đến 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ụ

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 dòng 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

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.

Danh sách kiểm tra

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.

Danh sách thao tác

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 thông tin phản hồi ngay lập tức về trạng thái của các mục.

Hình ảnh tràn lề

Bố cục này lý tưởng để 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 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.

Chỉ hình ảnh

Tạo các thư viện hình ảnh có thể cuộn và có tác động trực quan bằng cách sử dụng lưới chỉ có hình ảnh. 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.

Hình ảnh và văn bản

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 Tệp đối chiếu Hướng dẫn
Bố cục danh sách thao tác
  • Xử lý các thao tác trên mục trong danh sách bằng các lệnh gọi lại thao tác Glance và đảm bảo cập nhật trạng thái đúng cách.
Bố cục danh sách kiểm tra
  • Triển khai tính năng bật/tắt trạng thái hộp đánh dấu bằng cách sử dụng các tham số thao tác hoặc lệnh gọi lại để cập nhật các mục trong bộ sưu tập.
  • Sử dụng lệnh gọi lại thao tác Glance, chẳng hạn như `actionRunCallback`, `ActionCallback(actionParametersOf(...))`, hoặc `actionStartActivity(...)`, cho các tham số `onClick` của tiện ích để xử lý các sự kiện nhấp, chẳng hạn như nhấn vào hộp đánh dấu.
Bố cục thanh công cụ biểu cảm
  • Tránh lỗi nhập `ColorProvider`: nhập `androidx.glance.unit.ColorProvider` và sử dụng `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Sử dụng trực tiếp `GlanceModifier.background(Color)` cho màu nền đồng nhất thay vì `ColorProvider`.
Bố cục lưới hình ảnh
  • Sử dụng màu đồng nhất (`GlanceModifier.background`) hoặc các thành phần hiển thị cục bộ cho các mục hình ảnh, trừ phi bạn đã định cấu hình hoặc yêu cầu thư viện tải hình ảnh.
Bố cục danh sách văn bản hình ảnh
  • Các trường hợp sử dụng phổ biến: nguồn cấp tin tức, danh sách bài viết, nhật ký tập luyện, nguồn cấp tin nhắn và danh sách hình thu nhỏ dọc.
  • Cân bằng chiều cao hàng trong danh sách và việc cắt văn bản khi kết hợp hình thu nhỏ với văn bản chính/phụ.
Bố cục văn bản dài
  • Nếu bạn nhân các giá trị `Dp`, chẳng hạn như `2 * padding`, hãy nhập `androidx.compose.ui.unit.times`.
  • Tuân thủ các quy tắc định kích thước: đảm bảo sử dụng các phương diện từ `dimens.xml` để điều chỉnh tỷ lệ khoảng đệm và kiểu chữ.
Bố cục thanh công cụ tìm kiếm
  • Tránh lỗi nhập `ColorProvider`: nhập `androidx.glance.unit.ColorProvider` và sử dụng `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Sử dụng trực tiếp `GlanceModifier.background(Color)` cho màu nền đồng nhất thay vì ColorProvider.
Bố cục hình ảnh tràn viền / Cuộn nhanh
  • Đặt "verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)" trên LazyColumn để dùng tính năng Cuộn nhanh.
  • Nếu triển khai tính năng cuộn nhanh, bạn cần có Glance 1.3.0-alpha02 trở lên, SDK biên dịch 37 (Baklava) trở lên và Trình bổ trợ Android cho Gradle (AGP) 9.1.0 trở lên.
  • Đặt "override val sizeMode: SizeMode = SizeMode.Exact" trong lớp trình cung cấp tiện ích.
Bố cục thanh công cụ tiêu chuẩn
  • Xem phần Khắc phục sự cố để tránh lỗi nhập "ColorProvider": sử dụng "androidx.glance.color.ColorProvider(dayColor, nightColor)".
  • Sử dụng trực tiếp `GlanceModifier.background(Color)` cho màu nền đồng nhất thay vì `ColorProvider`.
Bố cục văn bản có hình ảnh
  • Tuân theo các quy tắc định cỡ bố cục thích ứng để điều chỉnh văn bản và hình ảnh cạnh nhau hoặc xếp chồng lên nhau dựa trên kích thước tiện ích có sẵn.