Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Nếu ứng dụng của bạn có nhiều đích đến để người dùng di chuyển, bạn nên sử dụng các cặp bố cục và điều hướng thường được các ứng dụng khác sử dụng.
Vì nhiều người dùng đã có mô hình tinh thần cho những cặp này, nên ứng dụng của bạn sẽ trực quan hơn đối với họ.
Các cặp bố cục và thành phần điều hướng
Thanh điều hướng và ngăn điều hướng phương thức được dùng làm mẫu điều hướng chính cho các khung hiển thị bố cục mẹ và đích điều hướng chính.
Thanh điều hướng có thể chứa từ 3 đến 5 điểm đến điều hướng trên cùng một cấp độ phân cấp. Thành phần này chuyển thành thanh điều hướng cho màn hình lớn.
Mặc dù ngăn điều hướng có thể chứa nhiều hơn 5 đích đến điều hướng, nhưng mẫu này không lý tưởng bằng thanh điều hướng.
Điều này là do cần phải chạm vào thanh trên cùng ở kích thước nhỏ gọn.
Thẻ Material 3 và thanh ứng dụng dưới cùng là các mẫu điều hướng phụ mà bạn có thể dùng để bổ sung cho hoạt động điều hướng chính hoặc xuất hiện trên các chế độ xem con.
Ở đây, các thẻ đóng vai trò là một lớp điều hướng phụ để nhóm nội dung ngang hàng.
Thao tác bố cục
Cung cấp các nút điều khiển để người dùng có thể thực hiện các hành động. Các mẫu phổ biến bao gồm các thao tác trên thanh trên cùng, nút hành động nổi (FAB) và trình đơn.
Đối với những hành động có mức độ quan trọng cao nhất, FAB cung cấp một nút lớn và nổi bật cho người dùng. Tại cấp độ này, mỗi lần bạn chỉ được cung cấp một hành động. FAB có thể xuất hiện ở nhiều kích thước và ở dạng mở rộng, bao gồm cả nhãn. Sử dụng Scaffold để ghim một FAB, đảm bảo FAB luôn hiển thị ngay cả khi cuộn.
Nút hành động nổi (FAB) cho phép người dùng nhanh chóng thêm cây vào thư viện cây
Bạn có thể đặt các thao tác phụ trong thanh trên cùng hoặc trong trang nếu các thao tác đó được nhóm gần nội dung có liên quan.
Hình 20: Thao tác cảnh báo trong thanh trên cùng khi hiện chi tiết (bên trái) và biểu tượng tràn nằm trong mục danh sách (bên phải)
Đối với mọi thao tác bổ sung không cần thiết ngay lập tức hoặc thường xuyên, hãy thêm những thao tác đó vào trình đơn mục bổ sung.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-08-28 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-08-28 UTC."],[],[],null,["If your app contains multiple destinations for users to traverse, we recommend\nemploying layout and navigation pairings that are commonly used by other apps.\nBecause many users already possess the mental models for these pairings, your\napp will be more intuitive for them.\n\nLayout and navigation pairings\n\nThe navigation bar and modal navigation drawer are used as primary navigation\npatterns for parent layout views and primary navigation destinations. \n\nThe navigation bar can hold three to five navigation destinations across the\nsame hierarchy level. This component translates to the navigation rail for large\nscreens.\n\n\nAlthough the navigation drawer can hold more than five navigation destinations,\nthe pattern is not as ideal as the navigation bar.\nThis is due to the need to reach to the top bar on compact sizes. \n\n[Material 3 Tabs](https://m3.material.io/components/tabs/overview) and the [bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) are\nsecondary navigation patterns that you can can use to supplement primary\nnavigation or appear on children views.\n\n\nHere, tabs act as a secondary navigation layer to group sibling content.\n\nLayout actions\n\nProvide controls to enable users to accomplish actions. Common patterns include\ntop bar actions, floating action button (FAB), and menus. \n\nFor actions of the highest importance, a [FAB](https://m3.material.io/components/floating-action-button/overview) provides a large\nand prominent button for the user. Provide only one action at a time at this\nlevel. A FAB can appear in multiple sizes and an expanded form, which includes a\nlabel. Use [Scaffold](/jetpack/compose/components/scaffold) to pin a FAB, making sure it's always\nvisible even on scroll by.\n\n\nA floating action button (FAB) that allows the\nuser to quickly add plants to the plant gallery\n\nYou can place secondary actions within the top bar or, if it's grouped near\nrelated content, within the page.\n**Figure 20:** Alert action in the top bar on show detail (left) and overflow icon inline of list item (right)\n\nFor any additional actions that aren't promptly or frequently needed, add those\nactions in an overflow menu."]]
