Bố cục chuẩn

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

Nếu bạn đã quen thuộc với bố cục chuẩn của ứng dụng thích ứng nhưng chưa quen biết nên sử dụng API Android nào, hãy chuyển đến phần Phạm vi áp dụng để giúp xác định bố cục phù hợp với các trường hợp sử dụng của ứng dụng.

List-detail

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

• If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
• If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
• If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, file browsers, or any app where the content can be organized as a list of items that reveal additional information.

Implementation

Có thể tạo bố cục danh sách-chi tiết bằng nhiều công nghệ, bao gồm cả Compose, khung hiển thị và tính năng nhúng hoạt động (dành cho các ứng dụng cũ). Xem phần Phạm vi áp dụng để quyết định công nghệ nào phù hợp nhất với ứng dụng của bạn.

Thư viện SlidingPaneLayout được thiết kế để triển khai bố cục danh sách-chi tiết dựa trên khung hiển thị hoặc mảnh.

Trước hết, hãy khai báo SlidingPaneLayout làm thành phần gốc của bố cục XML. Tiếp theo, hãy thêm hai phần tử con (thành phần hiển thị hoặc mảnh) đại diện cho danh sách và nội dung thông tin chi tiết.

Triển khai một phương thức liên lạc để truyền dữ liệu giữa các mảnh hoặc khung hiển thị danh sách-chi tiết. Bạn nên dùng ViewModel nhờ khả năng lưu trữ logic kinh doanh và khả năng tồn tại trước thay đổi về cấu hình.

SlidingPaneLayout tự động xác định liệu sẽ hiện danh sách và thông tin chi tiết cùng lúc hay riêng rẽ. Trong cửa sổ có đủ không gian chiều ngang để chứa được cả hai, danh sách và thông tin chi tiết sẽ xuất hiện cạnh nhau. Trong cửa sổ không đủ không gian, chỉ danh sách hoặc thông tin chi tiết được hiện tuỳ thuộc vào tương tác của người dùng với ứng dụng.

Hãy xem mẫu Chi tiết danh sách bằng ngăn trượt để tham khảo ví dụ về cách triển khai.

Activity embedding

Use activity embedding to enable legacy, multiple-activity apps to display two activities side by side on the same screen or stacked (one overlaying the other). If your app implements the list and detail of a list‑detail layout in separate activities, activity embedding enables you to create a list‑detail layout with minimal or no code refactoring.

Implement activity embedding by specifying a task window split using an XML configuration file. The split defines the primary activity, which initiates the split, and a secondary activity. Specify a minimum display width for the split using the window size class breakpoints. When the display width falls below the minimum breakpoint, the activities are displayed one overlaying the other. For example, if the minimum display width is 600dp, the activities are displayed one overlaying the other on compact displays, but side by side on medium and expanded displays.

Activity embedding is supported on Android 12L (API level 32) and higher, but may also be available on lower API levels if implemented by device manufacturers. When activity embedding is not available on a device, the fallback behavior results in the list activity or the detail activity occupying the entire app window based on user interaction with the app.

For more information, see Activity embedding.

For an example implementation, see the List-detail with activity embedding sample.

Feed

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Implementation

RecyclerView kết xuất hiệu quả số lượng lớn các mục trong một cột. GridLayoutManager bố trí các mục trong lưới, cho phép định cấu hình kích thước và khoảng của mục.

Định cấu hình các cột lưới dựa trên kích thước của khu vực hiển thị có sẵn để đặt chiều rộng tối thiểu cho phép cho các mục.

Có thể ghi đè chiến lược mở rộng mặc định của GridLayoutManager, là một khoảng cho mỗi mục bằng cách tạo SpanSizeLookup tuỳ chỉnh. Điều chỉnh span để làm nổi bật một số mục so với các mục khác.

Trên màn hình có chiều rộng nhỏ gọn mà chỉ đủ không gian cho một cột, hãy sử dụng LinearLayoutManager thay vì GridLayoutManager.

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

Supporting pane

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

• Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
• Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
• Search and reference apps: A query input form with results in a supporting pane

Implementation

Triển khai bố cục ngăn bổ trợ bằng cách sử dụng bố cục trình trợ giúp, chẳng hạn như LinearLayout hoặc ConstraintLayout. Thiết lập các lớp kích thước cửa sổ để chia lượng không gian hiển thị ngang có sẵn cho ứng dụng thành 3 danh mục: nhỏ gọn (< 600dp), trung bình (>= 600dp) và mở rộng (>= 840dp).

Đối với mỗi lớp kích thước cửa sổ, hãy xác định bố cục như sau:

• Thu gọn: Trong thư mục layout của tài nguyên ứng dụng, hãy đặt nội dung hiển thị ngăn bổ trợ bên dưới nội dung chính hoặc bên trong một bảng dưới cùng
• Trung bình: Trong thư mục layout-w600dp, hãy cung cấp nội dung của ngăn bổ trợ để nội dung chính và ngăn bổ trợ xuất hiện cạnh nhau, chia đều không gian hiển thị theo chiều ngang
• Mở rộng: Trong thư mục layout-w840dp, hãy thêm nội dung của ngăn bổ trợ để nội dung chính và ngăn bổ trợ xuất hiện cạnh nhau; tuy nhiên, ngăn bổ trợ chỉ chiếm 30% không gian theo chiều ngang, dành 70% không gian còn lại cho nội dung chính

Hãy sử dụng ViewModel cho hoạt động giao tiếp giữa nội dung chính và ngăn bổ trợ để xem liệu nên sử dụng khung hiển thị, mảnh hay kết hợp cả hai.

Để tham khảo ví dụ về cách triển khai, hãy xem các mẫu sau:

• Ngăn bổ trợ có khung hiển thị
• Ngăn bổ trợ có mảnh

Applicability

The canonical layouts create multifaceted presentations of content for easy access and deep exploration. Use the following flowchart to determine which layout and implementation strategy is best for your app's use cases.

For examples of the canonical layouts implemented in different types of apps, see the large screen gallery.

Additional resources

• Material Design — Canonical layouts