Bố cục xác định cấu trúc hình ảnh để người dùng giao tiếp 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 xuất phát chuẩn và kỹ thuật để hiển thị và định vị nội dung.
Cướp lại bóng
Đảm bảo an toàn cho thiết bị, 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 cạnh nhau, màn hình cạnh, bàn phím phần mềm và thanh hệ thống.
Nên: Cung cấp bố cục linh hoạt để người dùng tương tác với bàn phím.
Video 1: Cung cấp bố cục linh hoạt để người dùng tương tác
Giữ các hoạt động tương tác thiết yếu, chẳng hạn như thao tác chính, trong một khu vực màn hình có thể truy cập.
Hình 1: Các nút hành động nổi (FAB) cung cấp một điểm tương tác nổi bật và có thể truy cập được Sử dụng tính năng vùng chứa để nhóm nội dung liên quan nhằm hướng dẫn người dùng về nội dung và hành động.
Hình 2: Thẻ sử dụng vùng chứa rõ ràng để nhóm nội dung có các hành động liên quan Căn chỉnh sao cho nhất quán giữa nội dung tương tự nhau và các thành phần trên giao diện người dùng.
Không nên: làm gián đoạn khả năng đọc do giãn cách không nhất quán như các phần tử. Việc này có thể khiến các thiết kế trông lộn xộn.
Nên: Thiết lập khoảng cách nhất quán giữa các phần tử giống như nhau.
Hình 3: Đừng làm gián đoạn khả năng đọc Đừng sử dụng bố cục 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.
Đừng làm người dùng bị choáng ngợp vì quá nhiều hành động trên mỗi chế độ xem.
Khi xây dựng bố cục tuỳ chỉnh, hãy chú thích cách nội dung nên nằm trong bố cục bằng cách sử dụng các thuật ngữ căn chỉnh, ràng buộc hoặc trọng lực. Bao gồm cách hình ảnh phản hồi với vùng chứa của chúng để hiển thị đúng cách.
Các phần trên màn hình ứng dụng Android thông thường
Hầu hết ứng dụng Android đều bao gồm các khu vực được gọi là thanh hệ thống, khu vực điều hướng và phần nội dung.
Thanh hệ thống
Thanh trạng thái và thanh điều hướng (gọi chung là thanh hệ thống) hiển thị các thông tin quan trọng như mức pin, thời gian và các cảnh báo thông báo, đồng thời cung cấp hoạt động tương tác trực tiếp với thiết bị từ bất cứ đâu. Đọc thêm về thanh hệ thống.
Thanh hệ thống là một phần không thể thiếu trong giao diện thiết bị. Hãy thêm các thành phần này làm lớp trên cùng của thiết kế để đảm bảo chúng được tính đến trong bố cục màn hình. Nếu không, người dùng có thể cho rằng ý định nhầm là ẩn, bạn sẽ bỏ lỡ việc tạo kiểu và giãn cách có thể bị tắt.
Thêm các thanh làm lớp trên cùng. Sử dụng android:navigationBarColor và android:statusBarColor để áp dụng màu cho thanh hệ thống trong giao diện của ứng dụng.
Khu vực điều hướng
Thành phần Navigation (Điều hướng) thể hiện nhiều thành phần cho phép người dùng di chuyển trong ứng dụng, truy cập vào các thao tác quan trọng hoặc trên nền tảng Android.
Vùng cơ thể
Vùng cơ thể lưu giữ nội dung trên màn hình. Nội dung nội dung bao gồm các nhóm và tham số bố cục bổ sung. Thao tác này phải tiếp tục trong các vùng thanh điều hướng và thanh hệ thống.
Khai báo WindowCompat.setDecorFitsSystemWindows(window, false) cho các phần lồng ghép cạnh nhau.
Để xác định bố cục và mẫu điều hướng thích hợp cho bố cục, bạn nên tìm hiểu cách người dùng tương tác với nội dung và cách họ di chuyển trong cấu trúc thông tin của ứng dụng. Hiểu biết này có thể định hướng thiết kế của bạn tập trung hơn vào người dùng bằng cách tạo giao diện người dùng mà người dùng có thể thao tác.
Thành phần và cấu trúc nội dung
Xây dựng luồng và nhịp điệu linh hoạt bằng cấu trúc và phương thức chứa cho nội dung của bạn.
Cấu trúc cơ sở: sử dụng lề và cột cho lan can trực quan
Để bắt đầu tạo một cấu trúc vững chắc với các lan can nhất quán, hãy thêm lề và cột vào bố cục.
Lề tạo khoảng cách trên cạnh trái và phải của màn hình và nội dung. Giá trị lề tiêu chuẩn để áp dụng cho kích thước thu gọn là 16 dp, nhưng lề phải thích ứng với các màn hình lớn hơn. Hành động và nội dung nội dung của ứng dụng phải nằm trong và phù hợp với những lề này.
Bạn cũng có thể đảm bảo các vùng an toàn hoặc các phần lồng ghép được lồng ghép ở bước này. Các phần lồng ghép thanh hệ thống ngăn các hành động quan trọng nằm trong thanh hệ thống. Xem phần Vẽ nội dung phía sau thanh hệ thống để biết chi tiết.
Sử dụng cột để xây dựng cấu trúc lưới linh hoạt nhằm căn chỉnh một cách nhất quán, cũng như cung cấp định nghĩa theo chiều dọc cho bố cục bằng cách phân chia nội dung trong vùng nội dung. Nội dung sẽ nằm trong các vùng của màn hình chứa cột. Các cột này giúp định cấu trúc cho bố cục của bạn, giúp mang đến cấu trúc thuận tiện để sắp xếp các phần tử.
Sử dụng lưới cột để căn chỉnh nội dung với lưới bên dưới nhưng vẫn giữ nguyên kích thước linh hoạt. Lưới cột có thể phù hợp với nhiều hệ số hình dạng bằng cách thay đổi kích thước cột và số lượng cột nếu cần theo kích thước màn hình ở một số điểm nhất định, đồng thời cho phép điều chỉnh nội dung theo tỷ lệ. Tránh sử dụng lưới cột quá chi tiết vì lưới cơ sở sẽ có tác dụng như sau: cung cấp các đơn vị khoảng cách nhất quán.
Hãy cẩn thận khi thiết lập một lưới gồm các hàng đi kèm vì việc này có thể hạn chế việc điều chỉnh tỷ lệ nội dung theo chiều ngang trên các hướng và hệ số hình dạng. Thông thường, việc thiết lập các quy tắc khoảng đệm sẽ mang lại sự nhất quán cần thiết về hình ảnh.
Sử dụng vùng chứa để nhóm các phần tử một cách trực quan
Vùng chứa đề cập đến việc sử dụng khoảng trắng và các phần tử hiển thị cùng nhau để tạo nhóm hình ảnh. Vùng chứa là một hình dạng đại diện cho một vùng kín. Trong một bố cục duy nhất, bạn có thể nhóm các phần tử có chung nội dung hoặc chức năng tương tự nhau và tách riêng chúng khỏi các phần tử khác bằng cách sử dụng không gian mở, kiểu chữ và đường phân chia.
Bạn có thể nhóm các mục tương tự lại với nhau bằng khoảng trắng hoặc dấu phân chia hiển thị để giúp hướng dẫn người dùng về nội dung.
Vùng chứa ngầm sử dụng khoảng trắng để nhóm nội dung một cách trực quan nhằm tạo ra ranh giới vùng chứa, còn tính năng vùng chứa rõ ràng sử dụng các đối tượng như đường phân chia và thẻ để nhóm nội dung lại với nhau.
Hình sau đây là một ví dụ về cách sử dụng vùng chứa ngầm để chứa tiêu đề và bản sao chính. Lưới cột được dùng để căn chỉnh và tạo nhóm. Điểm nổi bật được trình bày rõ ràng trong thẻ. Dùng biểu tượng và hệ phân cấp kiểu để phân tách hình ảnh rõ ràng hơn.
Vị trí của nội dung
Android có nhiều cách để xử lý các thành phần nội dung trong các vùng chứa tương ứng có thể giúp định vị các thành phần đó một cách thích hợp, chẳng hạn như trọng lực, khoảng cách và tỷ lệ.
Gravity (Trọng lực) là một tiêu chuẩn để đặt một đối tượng trong một vùng chứa có thể lớn hơn đối với các trường hợp sử dụng cụ thể. Hình sau đây cho thấy ví dụ về cách đặt đối tượng bắt đầu và ở giữa (1), trên cùng và giữa theo chiều ngang (2), dưới cùng bên trái (3), kết thúc và bên phải (1).
Mở rộng quy mô
Việc điều chỉnh tỷ lệ là rất quan trọng để phù hợp với nội dung động, hướng thiết bị và kích thước màn hình. Bạn có thể giữ nguyên các phần tử cố định hoặc điều chỉnh theo tỷ lệ.
Việc lưu ý cách hình ảnh hiển thị trong vùng chứa với việc điều chỉnh tỷ lệ và vị trí là rất quan trọng để đảm bảo hình ảnh hiển thị theo cách bạn muốn dù bối cảnh của thiết bị là gì, nếu không thì tiêu điểm chính của hình ảnh có thể bị cắt bớt, hình ảnh có thể quá nhỏ hoặc lớn so với bố cục hay các hiệu ứng không mong muốn khác.
Nội dung không được chú thích có thể xuất hiện khác với những gì bạn mong đợi hoặc mong muốn.
Nội dung được ghim
Nhiều phần tử đã được tích hợp sẵn các tính năng tương tác, cuộn và định vị với các ô hoặc scaffold (giàn giáo). Một số phần tử có thể được sửa đổi để luôn cố định thay vì phản ứng với thao tác cuộn, chẳng hạn như nút hành động nổi (FAB) chứa các thao tác quan trọng.
Căn chỉnh
Sử dụng AlignmentLine để tạo các đường căn chỉnh tuỳ chỉnh mà bố cục mẹ có thể dùng để căn chỉnh và định vị thành phần con.
Không nên: làm gián đoạn khả năng đọc do các khoảng cách không nhất quán như các phần tử, điều này có thể khiến các thiết kế trông lộn xộn.
Nên: Thiết lập khoảng cách nhất quán giữa các phần tử giống như nhau.
Bố cục thành phần
Các thành phần Material 3 cung cấp cấu hình và trạng thái riêng cho hoạt động tương tác và nội dung.
Compose cung cấp các bố cục thuận tiện cho việc kết hợp các thành phần Material vào các mẫu màn hình phổ biến. Các thành phần kết hợp như Scaffold cung cấp ô cho nhiều thành phần và thành phần màn hình khác. Đọc thêm về Thành phần và bố cục Material.
Bố cục và mẫu điều hướng
Nếu ứng dụng của bạn chứa nhiều đích đến để người dùng đi qua, bạn nên sử dụng 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ó các mô hình tư duy cho các cặp ghép này, ứng dụng của bạn sẽ trực quan hơn với họ.
Ghép nối 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ụ được dùng làm mẫu điều hướng chính cho khung hiển thị bố cục mẹ và đích đến điều hướng chính.
Thanh điều hướng có thể chứa 3 đến 5 đích đế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 dải điều hướng cho các màn hình lớn.
Mặc dù ngăn điều hướng có thể chứa 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 do cần phải di chuyển đến thanh trên cùng trên kích thước nhỏ gọn.
Thẻ và thanh ứng dụng ở dưới cùng của Material 3 là các mẫu điều hướng phụ mà bạn có thể sử dụng để bổ sung thành phần điều hướng chính hoặc xuất hiện trên khung hiển thị con.
Thao tác với bố cục
Cung cấp các chế độ kiểm soát để cho phép người dùng thực hiện các thao tác. Một số mẫu phổ biến có thể kể đến như hành động trên thanh trên cùng, nút hành động nổi (FAB) và trình đơn.
Đối với các hành động có tầm quan trọng cao nhất, FAB sẽ cung cấp một nút lớn và nổi bật cho người dùng. Mỗi lần, bạn chỉ cung cấp một thao tác ở cấp độ này. FAB có thể xuất hiện ở nhiều kích thước và ở dạng mở rộng, có nhãn. Sử dụng Scaffold để ghim FAB, đảm bảo FAB luôn hiển thị ngay cả khi cuộn qua.
Bạn có thể đặt hành động phụ ở thanh trên cùng hoặc nếu hành động được nhóm gần nội dung liên quan, trong trang.
Đối với những thao tác khác không cần đến kịp thời hoặc thường xuyên, hãy thêm các thao tác đó vào trình đơn mục bổ sung.
Bố cục chuẩn
Sử dụng bố cục chuẩn làm điểm xuất phát, các cấu trúc sẵn sàng sử dụng giúp bố cục thích ứng với các trường hợp sử dụng phổ biến và kích thước màn hình. Những bố cục này có tính thẩm mỹ và chức năng, đồng thời bắt nguồn từ hướng dẫn của Material 3.
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ằng cách sử dụng các API Jetpack Compose hoặc Khung hiển thị.
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 về mục. Đối với kích thước màn hình thu gọn, chỉ hiển thị chế độ xem danh sách hoặc chi tiết. Hiển thị bộ sưu tập nội dung trong bố cục dựa trên hàng, danh sách tạo thành dạng bố cục phổ biến nhất cho ứng dụng. 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.
Nội dung có thể tĩnh hoặc động.
- Nội dung động là nội dung mà ứng dụng của bạn phân phát một cách nhanh chóng. Đây là nội dung lý tưởng để hiển thị nội dung do người dùng tạo hoặc phản ánh lựa chọn ưu tiên hay hành động của người dùng. Ví dụ: hãy tưởng tượng một ứng dụng ảnh có danh sách có thể cuộn gồm các ảnh do người dùng tạo. Danh sách này là duy nhất cho mỗi người dùng và thay đổi khi người dùng tải thêm hình ảnh lên. Những hình ảnh này là nội dung động.
- Nội dung tĩnh biểu thị nội dung được cố định giá trị trong mã. Bạn chỉ có thể sửa đổi nội dung này bằng cách trực tiếp thay đổi mã của ứng dụng. Ví dụ về nội dung tĩnh là những hình ảnh và văn bản mà mọi người dùng có thể thấy.
Tệp Figma Now in Android cung cấp nhiều ví dụ về bố cục. Ví dụ sau đây cho thấy một tập hợp nội dung một chiều.
Khám phá Danh sách Material 3 để biết thêm hướng dẫn thiết kế về các thành phần và thông số kỹ thuật của danh sách.
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 phần tử nội dung tương đương trong một lưới có thể định cấu hình để giúp bạn xem một lượng lớn nội dung một cách nhanh chóng, thuận tiện. (Xem Nguyên tắc của Material 3 về việc sử dụng thẻ trong một bộ sưu tập.) Nguồn cấp dữ liệu có thể có cấu hình dựa trên danh sách hoặc lưới trên các màn hình nhỏ gọn, thường là trong thẻ hoặc thẻ thông tin. Nội dung có thể là động, nghĩa là nội dung được "được cấp dữ liệu" từ một nguồn động bên ngoài, chẳng hạn như API.
Bố cục lưới bao gồm cả hàng và cột được tạo thành theo các nguyên tắc chứa ngụ ý hoặc rõ ràng. (Xem thành phần chứa trên trang này để biết thêm thông tin.) Bạn có thể áp dụng bố cục lưới một cách cứng nhắc hơn hoặc so le để thay đổi các hàng và cột. Cả hai cần áp dụng khoảng cách và logic nhất quán để tránh gây nhầm lẫn cho người dùng. Khám phá Nguyên tắc của Material 3 về thiết kế nguồn cấp dữ liệu.
Bạn có thể triển khai bố cục nguồn cấp dữ liệu trong Compose bằng Danh sách lazy hoặc lưới lazy, hoặc trong Khung hiển thị có RecyclerView hoặc CardView.
Bố cục ngăn bổ trợ
Khung hiển thị trên thiết bị di động có thể yêu cầu nội dung hoặc các thành phần điều khiển hỗ trợ. Thông thường, ở dạng trang tính hoặc hộp thoại, chúng có thể giúp khung hiển thị chính luôn được lấy tiêu điểm và gọn gàng. Hãy xem hướng dẫn về M3 để sử dụng bố cục chuẩn hoá của ngăn bổ trợ.
Tìm hiểu hướng dẫn về M3 dành cho trang tính dưới cùng.
Bố cục tương đối
Dữ liệu đầu vào, nội dung hoặc các thao tác khác có thể xuất hiện tương đối với nhau hoặc bị hạn chế đối với một vùng chứa mẹ. Bạn có thể tuỳ chỉnh bố cục nhiều hơn, nhưng hãy đảm bảo tuân theo cách nhóm, cột và giãn cách nhất quán.
Bố cục cũng có thể sử dụng kết hợp nhiều loại bố cục. Ví dụ: bạn có thể ghép nối một băng chuyền hoặc cuộn ngang với thẻ dọc. Hoặc bạn có thể trình bày một biểu đồ tuỳ chỉnh với dữ liệu danh sách dọc.
Bạn có thể trình bày nội dung trong các hàng hoặc cột cuộn có hàng tải từng phần và cột tải từng phần.
Tìm hiểu thêm kiến thức cơ bản về bố cục Compose và những thành phần tạo nên thành phần kết hợp.
Xác thực là bố cục tương đối phổ biến, như được minh hoạ trong hình sau.
Một bố cục phổ biến khác là bố cục toàn màn hình, được sử dụng trong chế độ hiển thị tối đa.
Nếu đang làm việc với Khung hiển thị thay vì Compose, bạn có thể sử dụng ConstraintLayout để bố trí khung hiển thị theo mối quan hệ giữa các khung hiển thị đồng cấp và bố cục mẹ, cho phép tạo các bố cục lớn và phức tạp.
ConstraintLayout cho phép bạn tạo toàn bộ bằng cách kéo và thả thay vì chỉnh sửa XML bằng trình chỉnh sửa bố cục. Tìm hiểu thêm về cách tạo giao diện người dùng bằng Layout Editor.
Điều chỉnh bố cục
Thiết kế thích ứng là phương pháp thiết kế bố cục thích ứng với các điểm ngắt và thiết bị cụ thể. Thông thường, chúng tôi xem xét chiều rộng của thiết bị để xác định vị trí mà bố cục cần thay đổi hoặc thích ứng. Cả Web và Android đều sử dụng các khái niệm thiết kế thích ứng, chẳng hạn như lưới và hình ảnh linh hoạt, để tạo bố cục đáp ứng tốt hơn ngữ cảnh.
Để biết nguyên tắc thiết kế về cách điều chỉnh bố cục theo kích thước màn hình mở rộng, hãy đọc hướng dẫn cho nhà phát triển Hỗ trợ nhiều kích thước màn hình trong Compose và trang Áp dụng bố cục của M3. Bạn cũng có thể xem thư viện chính tắc cho màn hình lớn của Android để tìm cảm hứng và triển khai bố cục màn hình lớn.
Mặc dù không phải ứng dụng nào cũng cần hoạt động trên mọi kích thước màn hình, nhưng tính năng này cho phép người dùng tự do hơn về sự gọn nhẹ, khả năng hữu dụng và chất lượng ứng dụng.
- Bạn có thể thiết kế màn hình chính (truyền đạt các khái niệm quan trọng hoặc ứng dụng của bạn) với kích thước lớp làm điểm ngắt để đóng vai trò là nguyên tắc.
- Hoặc thiết kế nội dung để hoạt động có tính phản hồi bằng cách ghi chú cách nội dung cần được hạn chế, mở rộng hoặc chỉnh lại luồng.
Để biết thêm thông tin về bố cục, hãy xem trang Tìm hiểu bố cục trong Material Design 3 (M3).
Chế độ xem web
Chế độ xem web là chế độ xem hiển thị các trang web trong ứng dụng. Trong hầu hết các trường hợp, bạn nên sử dụng một trình duyệt web chuẩn, chẳng hạn như Chrome, để phân phối nội dung cho người dùng. Để tìm hiểu thêm về các trình duyệt web, hãy đọc hướng dẫn về cách gọi trình duyệt bằng ý định.