Xây dựng một nhịp điệu và nhịp độ linh hoạt bằng cấu trúc và phương pháp ngăn chặn cho nội dung của bạn. Bắt đầu bằng cách thiết kế các vùng chứa bố cục, sau đó thêm nội dung.
1. Cấu trúc cơ bản: lưới bố cục để hướng dẫn nội dung
Để bắt đầu tạo một cấu trúc vững chắc với các quy tắc nhất quán, hãy thêm lề và cột vào bố cục của bạn.
Lề tạo khoảng cách ở các 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 thu 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à các thao tác trong phần nội dung của ứng dụng phải nằm trong và phù hợp với các lề này.
Bạn cũng có thể đảm bảo các vùng an toàn lồng ghép hoặc phần lồng ghép ở bước này. Phần lồng ghép thanh hệ thống giúp các thao tác quan trọng không bị rơi vào các thanh hệ thống. Bạn nên vẽ nội dung phía sau các thanh hệ thống.
Sử dụng các 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 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 có chứa cột. Các cột này tạo cấu trúc cho bố cục của bạn, mang đến cấu trúc thuận tiện để sắp xếp các phần tử.
Mức độ quan trọng của nội dung hoặc hệ thống phân cấp có thể giúp xác định loại lưới bố cục để mang lại nhiều cấu trúc hơn. Nếu nội dung của bạn có hệ thống phân cấp rõ ràng, thì lưới bố cục phân cấp sẽ phù hợp; ví dụ: bố cục biên tập hoặc màn hình chi tiết có tiêu đề lớn và hình ảnh chính.
Lưới mô-đun phù hợp với nội dung và bố cục có cấu trúc nhưng quan trọng như nhau, chẳng hạn như một thư viện ảnh.
Chọn một lưới cột cho bố cục một chiều, luôn thích ứng hoặc khi bạn cần có tính linh hoạt cao hơn.
Bất kể loại nào, lưới bố cục cũng phải thích ứng với nhiều kích thước và hệ số hình dạng.
Ví dụ này sử dụng một lưới cột để căn chỉnh nội dung với một lưới cơ bản trong khi vẫn giữ được kích thước linh hoạt. Để phù hợp với nhiều kiểu dáng, lưới cột sẽ thay đổi kích thước cột và số lượng cột dựa trên kích thước màn hình, nhờ đó nội dung cũng có thể điều chỉnh tỷ lệ. Tránh sử dụng lưới bố cục quá chi tiết. Thay vào đó, hãy sử dụng lưới cơ sở để cung cấp các đơn vị khoảng cách nhất quán.
Bắt đầu thêm bản sao vào cấu trúc bố cục. Lề bảo vệ nội dung khỏi các cạnh của màn hình. Cột cung cấp một cấu trúc khoảng cách và căn chỉnh nhất quán.
Hoặc sử dụng lưới bố cục phân cấp để giữ cho màn hình chi tiết có trật tự.
Bắt đầu bằng một lưới bố cục nhất quán. Nếu nội dung của bạn yêu cầu, hãy phá vỡ bố cục lưới. Ngay cả khi đó, bạn có thể thấy rằng một lưới khác vẫn phù hợp với nhu cầu của nội dung.
Tìm hiểu thêm về các vùng chứa bố cục, chẳng hạn như trình phân trang và bố cục dòng chảy.
Bản thảo và kiểu xây gạch là các loại lưới bố cục khác.
Bất kể bạn chọn lưới bố cục nào, bạn cũng có thể sử dụng khái niệm về ngăn để nhóm nội dung cho bố cục thích ứng. Ví dụ: ví dụ được dùng là màn hình chi tiết, một ngăn có thể xuất hiện trong bố cục danh sách-chi tiết.
2. Áp dụng tính năng ngăn chặn
Sử dụng tính năng tạo vách ngăn để 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 đồng thời khoảng trắng và các phần tử thấy được để tạo một nhóm trực quan. Vùng chứa là một hình dạng biểu thị một khu vực khép kín. Trong một bố cục duy nhất, bạn có thể nhóm các phần tử có nội dung hoặc chức năng tương tự với nhau và tách chúng khỏi các phần tử khác bằng khoảng trống, kiểu chữ và đường phân chia.
Android sử dụng các hàng, cột và hộp làm khối xây dựng, vì vậy, bạn có thể thiết kế vùng chứa theo cách tương tự. 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 bạn tìm hiểu nội dung.
Tạo vách ngăn ngầm bằng khoảng trắng là để 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 bằng các đối tượng như đường phân chia và thẻ là để nhóm nội dung lại với nhau.
Hình sau đây minh hoạ ví dụ về việc 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 nhóm. Điểm nổi bật được thể hiện rõ ràng trong các thẻ. Sử dụng hệ thống biểu tượng và phân cấp kiểu chữ để tách biệt trực quan hơn.
3. Định vị nội dung
Khi bạn chọn một lưới bố cục và nội dung trong các vùng chứa, Android sẽ có nhiều cách để xử lý các phần tử nội dung và định vị chúng, với các khối xây dựng cơ bản và các đối tượng sửa đổi hoặc vùng chứa bố cục như lưới và flexbox.
Cân nhắc xem nội dung của bạn là một chiều hay hai chiều. Ví dụ: nội dung có thể được trình bày theo chiều ngang, chiều dọc hoặc cả hai hướng.
Như minh hoạ trong hình sau, một bố cục xác thực có thể sử dụng bố cục lưới hai chiều.
Các phần tử trên giao diện người dùng cũng có thể linh hoạt và có thể sắp xếp theo một chiều, chẳng hạn như bộ lọc hoặc thẻ nội dung. Tìm hiểu thêm về flexbox.
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 một băng chuyền hoặc thành phần cuộn ngang với các 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 có thể cuộn bằng các hàng và cột lười.
Căn chỉnh
Tương tự như luồng và chế độ căn chỉnh bố cục tự động, bạn có thể chỉ định cách sắp xếp và căn chỉnh các phần tử trên giao diện người dùng.
Sử dụng AlignmentLine để tạo các dòng căn chỉnh tuỳ chỉnh mà bố cục mẹ có thể dùng để căn chỉnh và đặt vị trí thành phần con cháu.
Nên
Không nên
4. Điều chỉnh tỷ lệ và cắt nội dung
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. Các phần tử có thể giữ nguyên hoặc được điều chỉnh theo tỷ lệ.
Chỉ định cách hình ảnh điều chỉnh tỷ lệ và vị trí trong vùng chứa để đảm bảo hình ảnh hiển thị chính xác trên mọi thiết bị. Nếu không, tiêu điểm chính của hình ảnh có thể bị cắt, hoặc hình ảnh có thể quá nhỏ hoặc quá lớn so với bố cục.
Điều chỉnh cho phù hợp với nhiều tỷ lệ khung hình và hướng thiết bị bằng cách điều chỉnh tỷ lệ và cắt hình ảnh một cách thích hợp. Vì tỷ lệ khung hình có thể khác nhau đáng kể, hãy chỉ định cách nội dung của bạn xử lý những trường hợp này.
Ví dụ: hình ảnh chính có chiều rộng tối đa chiếm toàn bộ màn hình điện thoại ở hướng ngang.
Nên
Không nên
Nếu nội dung phải giữ nguyên tỷ lệ khung hình (như video chỉ có tỷ lệ khung hình dọc), hãy hạn chế tỷ lệ khung hình và cân bằng khoảng trống.
Không nên
Nội dung được ghim
Nhiều thành phần có các hoạt động tương tác, thao tác cuộn và định vị được tích hợp sẵn bằng các vị trí hoặc cấu trúc, chẳng hạn như thanh ứng dụng. Bạn có thể sửa đổi một số phần tử để giữ nguyên thay vì phản ứng với thao tác cuộn, ví dụ: nút hành động nổi (FAB) chứa các hành động quan trọng. Ghim các phần tử để tập trung hơn trong một số trường hợp sử dụng, chẳng hạn như ghim một phương thức nhập văn bản vào bàn phím để ngăn các phương thức nhập bị ẩn.
Đối với nội dung nhập văn bản, chẳng hạn như nhắn tin và xác thực, nội dung nhập sẽ được đính kèm vào bàn phím và chỉ có một tiêu điểm.
Các thành phần trong bố cục
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 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. Tìm hiểu thêm về Thành phần và bố cục Material.