Bố cục chuẩn

Bố cục chuẩn là bố cục linh hoạt, đã được chứng minh, mang lại trải nghiệm tối ưu cho người dùng trên nhiều hệ số hình dạng.

Nội dung mô tả các thiết bị màn hình lớn hiển thị bố cục chuẩn.

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, bố cục này vừa có tính thẩm mỹ vừa thiết thực.

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.

Danh sách-chi tiết

Khung xương của bố cục danh sách-chi tiết.

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 của 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 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 thông tin chi tiết để cho thấy nội dung liên quan cho 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 lượt tương tác của người dùng với ứng dụng. Khi chỉ danh sách xuất hiện, thao tác chọn một mục trong danh sách sẽ cho thấy 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ẽ thích ứng 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ỉ có ngăn danh sách xuất hiện và được mở ra thành mở rộng, thì danh sách và ngăn thông tin chi tiết phần giữ chỗ sẽ cùng hiện ra

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 nội dung nghe nhìn tương tác 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.

Hình 1. Ứng dụng nhắn tin cho thấy danh sách cuộc trò chuyện và thông tin chi tiết của cuộc trò chuyện được chọn.

Triển khai

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和“详细信息”窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或“详细信息”窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示“详细信息”窗格时，添加 BackHandler 即可移除“详细信息”窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一个高级可组合项，可简化列表详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和“详细信息”窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

Nguồn cấp dữ liệu

Khung dạng đường viền của bố cục 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 phần tử có cùng kích thước và đặt chúng vào cùng chỗ với nhau. Sự chú ý được thu hút đế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 do lưới có thể điều chỉnh từ một cột cuộn duy nhất đến nguồn cấp dữ liệu nội dung gồm nhiều cột xuất hiện nhờ thao tác 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.

Hình 2. Ứng dụng mạng xã hội hiện các bài đăng trên các thẻ đa dạng kích thước.

Triển khai

Nguồn cấp dữ liệu bao gồm một lượng lớn thành phần nội dung trong một vùng chứa cuộn theo chiều dọc được đặt trong lưới. Danh sách tải từng phần (lazy list) thể hiện hiệu quả một lượng lớn các mục trong cột hoặc hàng. Lưới tải từng phần (lazy grid) kết xuất các mục trong lưới, hỗ trợ cấu hình kích thước và khoảng (span) của mục.

Hãy định cấu hình các cột của bố cục lưới dựa trên phần hiển thị sẵn có để đặt chiều rộng tối thiểu cho phép cho các mục trong lưới. Khi xác định các mục trong lưới, hãy điều chỉnh khoảng cột để làm một số mục nổi bật hơn so với các mục khác.

Đối với phần tiêu đề, đường phân chia hoặc mục khác được thiết kế nhằm chiếm toàn bộ chiều rộng của nguồn cấp dữ liệu, hãy sử dụng maxLineSpan để chiếm toàn bộ chiều rộng của bố cục.

Trên màn hình có chiều rộng nhỏ gọn không đủ không gian để trình bày nhiều cột, LazyVerticalGrid sẽ hoạt động giống như LazyColumn.

Dưới đây là cách triển khai tối thiểu bằng LazyVerticalGrid:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

Yếu tố then chốt của nguồn cấp dữ liệu thích ứng là cấu hình columns. GridCells.Adaptive(minSize = 180.dp) tạo một lưới trong đó mỗi cột có chiều rộng ít nhất là 180.dp. Sau đó, lưới sẽ hiển thị nhiều cột nhất có thể trong không gian có sẵn.

Hãy xem mẫu Nguồn cấp dữ liệu với Compose để tham khảo ví dụ về cách triển khai.

Ngăn hỗ trợ

Khung xương của bố cục ngăn bổ 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à hiển thị nội dung hỗ trợ nội dung chính.

Bố cục ngăn bổ trợ hoạt động tốt trên màn hình có chiều rộng mở rộng (xem 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 có mối quan hệ với nội dung chính; ví dụ: bản thân cửa sổ công cụ của ngăn bổ trợ là không liên quan. Tuy nhiên, nội dung bổ sung trong ngăn thông tin 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ó:

Hình 3. Ứng dụng mua sắm hiển thị nội dung mô tả sản phẩm trong một ngăn bổ trợ.

Triển khai

Compose 支持用于做出如下判断的窗口大小类别逻辑：同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和展开宽度，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一个高级可组合项，可简化辅助窗格布局的实现。该可组合项会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持在窗格之间导航。

以下是最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：可组合项，用于创建导航器来管理窗格可见性（例如，在较小屏幕上隐藏或显示辅助窗格）
  • mainPane：显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

Tài nguyên khác