Xây dựng một nhịp điệu và nhịp độ linh hoạt bằng các phương pháp cấu trúc và ngăn chặn cho nội dung của bạn.
1. Cấu trúc cơ bản
Để 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 giãn cách ở cạnh trái và cạnh 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 điều chỉnh để 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 hoặc phần lồng ghép được chèn ở bước này. Phần lồng ghép thanh hệ thống giúp ngăn các thao tác quan trọng rơi vào dưới thanh hệ thống. Hãy xem bài viết 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á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 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ử.
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ữ được 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 theo nhu cầu của kích thước màn hình tại một số điểm, đồng thời cho phép nội dung cũng được điều chỉnh tỷ lệ. Tránh sử dụng lưới cột quá chi tiết, vì lưới cơ sở được dùng để 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 hàng đi kèm vì lưới này có thể hạn chế việc mở rộng 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 về khoảng đệm sẽ mang lại tính nhất quán về mặt hình ảnh cần thiết.
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 cấu trúc căn chỉnh và khoảng cách nhất quán.
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 khoảng trắng và các phần tử thấy được cùng nhau để tạo một nhóm nội dung trực quan. 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ó 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.
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 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 bao hàm ngầm ẩn để bao hàm tiêu đề và bản sao chính. Lưới cột được dùng để căn chỉnh và tạo nhóm. Các điểm nổi bật được thể hiện rõ ràng trong thẻ. Sử dụng hệ thống biểu tượng và hệ thống phân cấp kiểu chữ để tách biệt trực quan hơn.
3. Định vị 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, giúp bạn đặt các phần tử đó một cách thích hợp, bao gồm cả trọng lực, khoảng cách và tỷ lệ.
Gravity 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ề việc định vị các đố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), cũng như cuối cùng và bên phải (1).
4. Điều chỉnh tỷ lệ 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ệ.
Việc lưu ý cách hình ảnh xuất hiện trong các vùng chứa của chúng khi điều chỉnh tỷ lệ và vị trí là rất quan trọng để đảm bảo hình ảnh xuất hiện theo cách bạn muốn bất kể bối 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, 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 phần tử có sẵn các hoạt động tương tác, thao tác cuộn và định vị bằng các ô hoặc cấu trúc. 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, chẳng hạn như nút hành động nổi (FAB) chứa các hành động 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ể dùng để căn chỉnh và đặt vị trí thành phần con cháu.
Nên
Không nên
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 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.