Bố cục chuẩn là bố cục linh hoạt, đã được chứng minh, mang lại trải nghiệm người dùng tối ưu trên nhiều kiểu dáng thiết bị.
Bố cục chuẩn hỗ trợ điện thoại có màn hình nhỏ cũng như máy tính bảng, thiết bị có thể gập lại và thiết bị ChromeOS. Bắt nguồn từ hướng dẫn của Material Design, các bố cục này vừa có tính thẩm mỹ vừa hữu ích.
Khung Android bao gồm các thành phần chuyên biệt giúp việc triển khai bố cục trở nên đơn giản và đáng tin cậy.
Bố cục chuẩn tạo giao diện người dùng hấp dẫn, nâng cao năng suất và là nền tảng cho các ứng dụng tuyệt vời.
Chi tiết danh sách
Bố cục danh sách-chi tiết cho phép người dùng khám phá danh sách các mục có thông tin mô tả, nội dung giải thích hoặc thông tin bổ sung khác – thông tin chi tiết về mục.
Bố cục chia cửa sổ ứng dụng thành 2 ngăn cạnh nhau: một ngăn cho danh sách, một ngăn cho thông tin chi tiết. Người dùng chọn các mục trong danh sách để làm hiện thông tin chi tiết của mục đó. Đường liên kết sâu trong thông tin chi tiết sẽ cho thấy nội dung bổ sung trong ngăn chi tiết.
Màn hình có chiều rộng mở rộng (xem phần Sử dụng các lớp kích thước cửa sổ) chứa cả danh sách lẫn thông tin chi tiết cùng một lúc. Thao tác chọn một mục trong danh sách sẽ cập nhật ngăn chi tiết để hiện nội dung liên quan của mục đã chọn.
Màn hình có chiều rộng trung bình và nhỏ gọn cho thấy danh sách hoặc thông tin chi tiết, tuỳ thuộc vào tương tác của người dùng với ứng dụng. Khi chỉ danh sách hiển thị, thao tác chọn một mục trong danh sách sẽ hiển thị thông tin chi tiết thay cho danh sách. Khi chỉ thông tin chi tiết xuất hiện, việc nhấn nút quay lại sẽ làm hiện lại danh sách.
Các thay đổi về cấu hình như thay đổi hướng thiết bị hoặc thay đổi kích thước cửa sổ ứng dụng có thể làm thay đổi lớp kích thước cửa sổ của màn hình. Bố cục danh sách-chi tiết sẽ phản hồi theo đó, giúp duy trì trạng thái ứng dụng:
- Nếu màn hình có chiều rộng mở rộng, đang hiển thị cả ngăn danh sách và thông tin chi tiết, được thu hẹp đến trung bình hoặc nhỏ gọn, thì ngăn thông tin chi tiết vẫn được hiển thị và ngăn danh sách sẽ được ẩn
- Nếu màn hình có chiều rộng trung bình hoặc nhỏ gọn chỉ có ngăn thông tin chi tiết được hiển thị và lớp kích thước cửa sổ được mở ra thành mở rộng, thì danh sách và thông tin chi tiết sẽ cùng hiện ra, còn danh sách cho biết mục tương ứng với nội dung trong ngăn thông tin chi tiết thì được chọn
- Nếu màn hình có chiều rộng trung bình hoặc nhỏ gọn chỉ hiển thị ngăn danh sách và mở rộng thành mở rộng, thì danh sách và ngăn thông tin chi tiết về phần giữ chỗ sẽ hiển thị cùng nhau
Bố cục danh sách-chi tiết rất lý tưởng cho ứng dụng nhắn tin, trình quản lý danh bạ, trình duyệt tệp hoặc bất kỳ ứng dụng nào với nội dung có thể được sắp xếp dưới dạng danh sách các mục để cho thấy thông tin bổ sung.
Triển khai
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 Compose 构建列表详情示例。
Nguồn cấp dữ liệu
Bố cục nguồn cấp dữ liệu sắp xếp các thành phần với nội dung tương đương trong lưới có thể định cấu hình để thuận tiện xem nhanh một lượng lớn nội dung.
Kích thước và vị trí thiết lập mối quan hệ giữa các thành phần nội dung.
Nhóm nội dung được tạo bằng cách tạo ra các thành phần có cùng kích thước và đặt chúng vào cùng chỗ với nhau. Hãy thu hút sự chú ý đến các thành phần bằng cách làm cho chúng lớn hơn các thành phần lân cận.
Thẻ và danh sách là các thành phần phổ biến của bố cục nguồn cấp dữ liệu.
Bố cục nguồn cấp dữ liệu hỗ trợ màn hình ở hầu hết mọi kích thước vì lưới có thể điều chỉnh từ một cột cuộn duy nhất đến một nguồn cấp dữ liệu nội dung gồm nhiều cột có khả năng cuộn.
Nguồn cấp dữ liệu đặc biệt phù hợp với các ứng dụng tin tức và mạng xã hội.
Triển khai
Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。
根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。
对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。
如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。
如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。
Ngăn hỗ trợ
Bố cục ngăn bổ trợ bố trí nội dung ứng dụng vào các khu vực hiển thị chính và phụ.
Khu vực hiển thị chính chiếm phần lớn cửa sổ ứng dụng (thường vào khoảng hai phần ba) và chứa nội dung chính. Khu vực hiển thị phụ là một ngăn chiếm phần còn lại của cửa sổ ứng dụng và trình bày nội dung hỗ trợ nội dung chính.
Bố cục ngăn chi tiết hoạt động tốt trên màn hình có chiều rộng mở rộng (xem phần Sử dụng các lớp kích thước cửa sổ) theo hướng ngang. Màn hình có chiều rộng trung bình hoặc nhỏ gọn hỗ trợ hiển thị cả khu vực hiển thị chính và phụ nếu nội dung có thể thích ứng với không gian hiển thị hẹp hơn hoặc nếu nội dung bổ sung có thể được ẩn từ đầu trong một trang ở bên cạnh hoặc ở dưới cùng mà có thể tiếp cận bằng một chế độ điều khiển như trình đơn hoặc nút.
Bố cục ngăn bổ trợ khác với bố cục danh sách-chi tiết về mối quan hệ giữa nội dung chính và nội dung phụ. Nội dung của ngăn phụ chỉ có ý nghĩa khi so với nội dung chính; ví dụ: cửa sổ công cụ của ngăn chi tiết tự bản thân nó là không liên quan. Tuy nhiên, nội dung bổ sung trong ngăn chi tiết của bố cục danh sách-chi tiết có ý nghĩa ngay cả khi không có nội dung chính, ví dụ: nội dung mô tả về sản phẩm trên trang thông tin sản phẩm.
Các trường hợp sử dụng của ngăn bổ trợ gồm có:
- Ứng dụng cải thiện hiệu suất: Tài liệu hoặc bảng tính đi kèm nhận xét của người đánh giá trong ngăn chi tiết
- Ứng dụng đa phương tiện: Video phát trực tuyến được bổ sung danh sách các video có liên quan trong ngăn chi tiết hoặc nội dung mô tả đĩa nhạc bổ sung cho danh sách phát
- Ứng dụng tìm kiếm và tham chiếu: Biểu mẫu nhập truy vấn với kết quả trong ngăn bổ trợ
Triển khai
Compose 支持窗口大小类别逻辑，借助该逻辑，您可以确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。
提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。
对于较小宽度的显示屏，请将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和较大宽度的显示屏，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度，请在主要内容和辅助内容之间平均分配显示空间。对于较大宽度的显示屏，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。
如需查看示例实现，请参阅使用 Compose 构建辅助窗格示例。
Tài nguyên khác
- Material Design – Bố cục chuẩn