Lưới và đơn vị

Các pixel độc lập với mật độ (dp) và pixel có thể mở rộng (sp) là các yếu tố cần thiết cho việc 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 loại mật độ màn hình, lớp kích thước, hệ số hình dạng và tỷ lệ khung hình tạo nên các thiết bị Android.

Cướp lại bóng

  • Nếu sử dụng lưới cơ sở, hãy sử dụng phép đo 4 và 8.
  • Ký hiệu thông số theo dp và sp, thay vì pixel.
  • Xuất đồ hoạ bitmap/đường quét cho tất cả các bộ chứa.
  • Thiết kế với tư duy thích ứng, lưu ý đến các lớp kích thước, độ phân giải và tỷ lệ khung hình khác nhau.
  • 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 theo tỷ lệ để có kích thước đồng nhất trên mọi màn hình. Chúng 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ó thể mở rộng (sp): Pixel có thể 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 mà người dùng đặt trong ứng dụng Cài đặt trên thiết bị Android.
Hình 1: Ký hiệu dp so với sp

Điểm khác biệt chính giữa các đơn vị đo lường này là các pixel có thể 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 cho tính năng hỗ trợ tiếp cận sẽ thấy kích thước phông chữ khớp với các lựa chọn ưu tiên về kích thước văn bản của họ. Hãy xem cách thay đổi cỡ chữ trong Compose.

Android dùng các đơn vị này để giúp mở rộng quy mô và dịch trên nhiều loại thiết bị cũng như độ phân giải.

Bộ chứa mật độ

Màn hình có mật độ điểm ảnh cao có nhiều pixel trên mỗi inch hơn so với màn hình có độ phân giải thấp. Do đó, các thành phần trên giao diện người dùng có cùng kích thước pixel sẽ hiển thị lớn hơn trên màn hình có mật độ điểm ảnh thấp và nhỏ hơn trên màn hình có mật độ điểm ảnh cao. Đây là lý do bạn không nên khai báo các phép đo bằng pixel.

Android nhóm các phạm vi mật độ màn hình vào "bộ chứa" và sử dụng chúng để phân phối nhóm thành phần tối ưu cho thiết bị của bạn. Các bộ chứa mật độ thường dùng nhất là mdpi, hdpi, xhdpi, xxhdpixxxhdpi (nodpianydpi tham chiếu đến một bộ chứa không điều chỉnh theo tỷ lệ theo độ phân giải của thiết bị, thường dùng cho các vectơ vẽ được) mỗi bộ chứa tương ứng với một tệp tài nguyên của ứng dụng.

Hình 2: Dưa vàng cho tiệc tùng với mật độ tương ứ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

Lưới đường cơ sở

Việc xây dựng với một lưới bên dưới 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.

Video 1: Hiển thị lưới 8 dp, làm nổi bật khoảng tăng 8 dp

Các phần tử nhỏ hơn như biểu tượng, loại và một số phần tử trong các thành phần được căn chỉnh phù hợp nhất với lưới 4 dp.

Hình 3: Lưới 8 dp phù hợp với hầu hết các thành phần trên giao diện người dùng, trong khi lưới 4 dp sẽ phù hợp hơn với các phần tử nhỏ hơn, chẳng hạn như biểu tượng

Lưới cột

Các cột xây dựng một cấu trúc lưới để cung cấp định nghĩa theo chiều dọc cho một bố cục bằng cách chia nội dung trong vùng nội dung. Nội dung được đặt ở những vùng màn hình có chứa cột. Căn chỉnh với một lưới bên dưới để căn chỉnh nội dung, nhưng cần giữ kích thước linh hoạt. Tìm hiểu kiến thức cơ bản về cách thiết lập lưới cột và áp dụng nội dung trong bài viết Kiến thức cơ bản về bố cục.

Hình 4: Lưới bốn cột

Hãy xem trang Bố cục chuẩn của Material 3 để biết thông tin chi tiết về cách tạo bố cục linh hoạt trên các hệ số hình dạng.

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ố định, giúp bạn thiết kế, phát triển và kiểm thử các bố cục thích ứng và thích ứng cho ứng dụ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. Vui lòng đọc thêm về Các lớp kích thước cửa sổ.

Tỷ lệ khung hình

Tỷ lệ khung hình là tỷ lệ chiều rộng so với chiều cao của một phần tử. 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 đây trên giao diện người dùng:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3