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