Pixel không phụ thuộc vào mật độ (dp) và pixel có khả năng mở rộng (sp) là những yếu tố cần thiết để xây dựng bố cục và trình bày phông chữ phản hồi đồng nhất với nhiều mật độ màn hình, lớp kích thước, kiểu dáng và tỷ lệ khung hình tạo nên thiết bị Android.
Những điểm cần nhớ
- Nếu sử dụng lưới cơ sở, hãy tuân thủ các số đo 4 và 8.
- Ghi chú thông số kỹ thuật bằng dp và sp thay vì pixel.
- Xuất đồ hoạ bitmap (raster) cho tất cả các nhóm.
- Thiết kế theo tư duy thích ứng với nhiều lớp kích thước, độ phân giải và tỷ lệ khung hình.
- Pixel không phụ thuộc vào mật độ (dp): pixel không phụ thuộc vào mật độ là các đơn vị linh hoạt có thể điều chỉnh tỷ lệ để có kích thước đồng nhất trên mọi màn hình. Các đơn vị này dựa trên mật độ vật lý của màn hình. Các đơn vị này tương ứng với màn hình 160 dpi (số điểm trên mỗi inch), trong đó 1 dp gần bằng với 1 px.
- Pixel có khả năng mở rộng (sp): Pixel có khả năng mở rộng có chức năng tương tự như dp nhưng dành cho phông chữ. Giá trị mặc định của sp giống với giá trị mặc định của dp. Hệ thống Android tính toán kích thước phông chữ thực tế cần sử dụng dựa trên thiết bị và lựa chọn ưu tiên của người dùng được đặt trong phần cài đặt của thiết bị.
Điểm khác biệt chính giữa các đơn vị đo lường này là pixel có khả năng mở rộng sẽ giữ nguyên chế độ cài đặt phông chữ của người dùng. Những người dùng có chế độ cài đặt văn bản lớn hơn để hỗ trợ khả năng tiếp cận sẽ thấy kích thước phông chữ phù hợp với lựa chọn ưu tiên về kích thước văn bản của họ. Xem cách thay đổi kích thước phông chữ trong Compose.
Android sử dụng các đơn vị này để giúp điều chỉnh tỷ lệ và dịch trên nhiều thiết bị và độ phân giải.
Nhóm mật độ
Màn hình có mật độ cao có nhiều pixel trên mỗi inch hơn màn hình có mật độ thấp. Do đó, các thành phần giao diện người dùng có cùng kích thước pixel sẽ xuất hiện lớn hơn trên màn hình có mật độ thấp và nhỏ hơn trên màn hình có mật độ cao. Đây là lý do bạn không nên khai báo số đo bằng pixel.
Android nhóm các dải mật độ màn hình thành "nhóm" và sử dụng các nhóm này để cung cấp bộ tài sản tối ưu cho thiết bị của bạn. Các nhóm mật độ thường dùng nhất là mdpi, hdpi, xhdpi, xxhdpi, và xxxhdpi (nodpi và
anydpi đề cập đến một nhóm không điều chỉnh tỷ lệ theo độ phân giải của thiết bị, thường
dùng cho các đối tượng vẽ vectơ), mỗi nhóm tương ứng với một tệp tài nguyên của ứng dụng.
Cách tính dp:
dp = (chiều rộng tính bằng pixel * 160) / mật độ màn hình
Lưới cơ sở
Việc xây dựng bằng lưới cơ bản giúp tạo khoảng cách và căn chỉnh nhất quán trên giao diện người dùng. Giao diện người dùng Android sử dụng lưới 8 dp cho bố cục, thành phần và khoảng cách.
Các thành phần nhỏ hơn như biểu tượng, kiểu chữ và một số thành phần trong các thành phần sẽ được căn chỉnh tốt nhất theo lưới 4 dp.
Lưới bố cục
Lưới là xương sống của mọi bố cục. Hãy cân nhắc đến hệ phân cấp, số lượng và thậm chí cả thông báo của nội dung.
Lưới phân cấp
Lưới phân cấp được tạo dựa trên hệ phân cấp hoặc tầm quan trọng của nội dung. Hãy nghĩ đến bố cục của một tờ báo: một tin bài nhất quán ở đầu trang chiếm phần lớn bố cục, trong khi một cột nhỏ hơn hiển thị các bài viết trước đó.
Khi điều chỉnh trên các kích thước màn hình, bố cục phân cấp có thể tự động điều chỉnh, đổi kích thước và hiển thị các ô lưới.
Lưới mô-đun
Lưới mô-đun được thiết lập theo các cột và hàng nhất quán, tạo hệ thống lưới hình chữ nhật để căn chỉnh nội dung. Lưới mô-đun hoạt động hiệu quả đối với nội dung có tầm quan trọng và kích thước tương tự, chẳng hạn như thư viện thẻ.
Lưới mô-đun thích ứng có thể thêm nhiều ô lưới và nội dung trong đó có thể khớp hoặc gói vào các ô lưới khác nhau. Các ô lưới có thể giữ nguyên kích thước hoặc đổi kích thước tuỳ theo nhu cầu của nội dung.
Lưới cột
Các cột xây dựng cấu trúc lưới để cung cấp định nghĩa dọc cho bố cục bằng cách chia nội dung trong vùng nội dung. Nội dung được đặt trong các vùng của màn hình có chứa cột. Căn chỉnh theo lưới cơ bản để căn chỉnh nội dung, nhưng phải giữ kích thước linh hoạt.
Tìm hiểu những điều cơ bản về cách thiết lập lưới cột và áp dụng nội dung trong Kiến thức cơ bản về bố cục. Lưới cột có thể phù hợp với nhiều kiểu dáng bằng cách thay đổi kích thước cột và số cột theo 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 tỷ lệ.
Lớp kích thước
Lớp kích thước cửa sổ là một tập hợp các điểm ngắt khung nhìn có ý kiến giúp bạn thiết kế, phát triển và thử nghiệm các bố cục ứng dụng thích ứng và thích ứng. Android chia các lớp kích thước cửa sổ thành 3: Nhỏ gọn, Trung bình và Mở rộng. Đọc thêm về Lớp kích thước cửa sổ.
Tỷ lệ khung hình
Tỷ lệ khung hình là tỷ lệ giữa chiều rộng và chiều cao của một thành phần. Tỷ lệ khung hình được viết dưới dạng chiều rộng:chiều cao.
Để duy trì tính nhất quán trong bố cục, hãy sử dụng tỷ lệ khung hình nhất quán trên các thành phần như hình ảnh, bề mặt và kích thước màn hình.
Bạn nên sử dụng các tỷ lệ khung hình sau trên giao diện người dùng:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3