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.
Bố cục xác định cấu trúc trực quan để người dùng tương tác với ứng dụng của bạn, chẳng hạn như trong một hoạt động. Android cung cấp một loạt các thư viện, điểm bắt đầu chuẩn và kỹ thuật để hiển thị và định vị nội dung.
Tôn trọng các vùng an toàn của thiết bị Honor, bao gồm các phần của giao diện người dùng như vết cắt trên màn hình, phần lồng ghép tràn viền, màn hình tràn viền, bàn phím phần mềm và thanh hệ thống. Cung cấp bố cục linh hoạt để người dùng tương tác với bàn phím.
Cảnh báo: Hãy cẩn thận khi bàn phím che nội dung.
Công thái học về tương tác
Duy trì các hoạt động tương tác thiết yếu (chẳng hạn như thao tác điều hướng chính) trong một vùng màn hình có thể truy cập. Nút hành động nổi (FAB) cung cấp một điểm tương tác nổi bật và dễ tiếp cận
Nhóm ngăn chặn
Sử dụng tính năng ngăn chặn để nhóm nội dung có liên quan nhằm hướng dẫn người dùng thực hiện các thao tác và xem nội dung. Thẻ sử dụng tính năng tạo vách ngăn rõ ràng để nhóm nội dung với các thao tác liên quan.
Căn chỉnh
Đảm bảo căn chỉnh nhất quán giữa nội dung và các thành phần giao diện người dùng tương tự.
check_circle
Nên
Thiết lập khoảng cách nhất quán giữa các phần tử tương tự.
cancel
Không nên
Làm gián đoạn khả năng đọc bằng cách tạo khoảng cách không nhất quán giữa các phần tử tương tự, điều này có thể khiến thiết kế trông lộn xộn.
Hướng bố cục
Đừng chỉ sử dụng chế độ dọc hoặc bố cục lý tưởng: Hãy cân nhắc các tỷ lệ khung hình, lớp kích thước và độ phân giải khác nhau mà người dùng có thể gặp phải.
Tương tác cơ bản
Đừng làm người dùng choáng ngợp với quá nhiều thao tác trên mỗi khung hiển thị.
Chú thích các thông số kỹ thuật về bố cục
Khi tạo bố cục tuỳ chỉnh, hãy chú thích cách nội dung sẽ nằm trong bố cục bằng cách sử dụng các thuật ngữ về căn chỉnh, quy tắc ràng buộc hoặc trọng lực. Đưa ra cách hình ảnh phản hồi vùng chứa để hiển thị đúng cách.
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,["A layout defines the visual structure for a user to interface with your app,\nsuch as in an activity. Android provides a range of libraries, canonical\nstarting points, and techniques to display and position content.\n\nGet Started\n\nStart designing Android layouts by learning [app anatomy](/develop/ui/compose/layouts/adaptive/app-anatomy) then how to\n[structure your app's content](/develop/ui/compose/layouts/adaptive/content-structure).\n\nTakeaways \n**Device safe areas**\n\n\nHonor device safe areas, which includes parts of the UI such as display\ncutouts, edge-to-edge insets, edge displays, software keyboards, and system\nbars. Provide a flexible layout for users to\ninteract with the keyboard.\nWarning: Be careful when covering content with the keyboard.\nAlas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. \n**Interaction ergonomics**\n\n\nKeep essential interactions, like primary navigation, in a reachable screen\narea. Floating action buttons (FABs) provide a\nprominent and reachable interaction point \n**Containment groups**\n\n\nUse containment to group related content to guide the user through content and\nactions. Cards using explicit containment to group content with related actions.\n\n**Alignment**\n\nProvide consistent alignment between similar content and UI elements.\n\n\u003cbr /\u003e\n\ncheck_circle\n\nDo \nEstablish consistent spacing between like elements. \ncancel\n\nDon't \nDisrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. \n**Layout orientation**\n\n\nDon't stick to portrait or an idealized layout: Consider different aspect\nratios, size classes, and resolutions that users may encounter.\n\n\n**Essential interactions**\n\n\nDon't overwhelm your user with too many actions per view. \n**Notate layout specs**\n\n\nWhen building custom layouts, notate how content should sit within the layout\nusing alignment, constraints, or gravity terms. Include how images should\nrespond to their container to display properly.\n\n\u003cbr /\u003e"]]
