Khung đáp ứng (AR) thích ứng của Android Auto điều chỉnh bố cục ứng dụng cho phù hợp với mọi kích thước màn hình ô tô.
Giao diện người dùng và các tính năng của ứng dụng, chẳng hạn như hành động duyệt qua nội dung nghe nhìn và phát lại, cũng tự động được điều chỉnh trong Android Auto — những chiếc ô tô tương thích cho các ứng dụng được chiếu từ điện thoại của người dùng.
Xem nhanh
- Bố cục điều chỉnh theo kích thước màn hình tại các điểm ngắt cụ thể
- Áp dụng khoảng đệm với gia số 8dp
- Đặt khoảng đệm 12 dp giữa các thành phần nhỏ hơn một cách thận trọng
Cách bố cục được xác định
Khung AR AR của Android Auto sử dụng cả thiết kế thích ứng và thiết kế đáp ứng:
- Thiết kế đáp ứng (kích thước màn hình chính xác xác định bố cục) được sử dụng cho lề trái và phải
- Dùng thiết kế thích ứng (phạm vi chiều cao và chiều rộng xác định bố cục màn hình) dùng cho bố cục
Bố cục được xác định bằng cách sử dụng các số đo được gọi là điểm ngắt. Điểm ngắt là phép đo chiều cao và chiều rộng màn hình được xác định theo chiến lược, giúp xác định thời điểm hiển thị một bố cục cụ thể. Đối với mỗi phạm vi điểm ngắt, bố cục điều chỉnh cho phù hợp với kích thước màn hình và hướng.
Thích ứng
Thiết kế thích ứng sử dụng các điểm ngắt để xác định bố cục của màn hình. Đối với một loạt kích thước màn hình được xác định (chẳng hạn như những chiều rộng dưới 1280dp), một bố cục cụ thể sẽ hiển thị.
Thích ứng
Thiết kế đáp ứng điều chỉnh bố cục theo tỷ lệ với kích thước màn hình chính xác. Các thành phần có khu vực linh hoạt có thể mở rộng hoặc thu nhỏ thành kích thước thích hợp cho màn hình của mỗi ô tô.Điểm ngắt thích ứng
Android Auto dựa vào các điểm ngắt thích ứng để xác định bố cục màn hình, được tính từ kích thước của cửa sổ ứng dụng, thay vì toàn bộ màn hình.
Lề đáp ứng
Android Auto sử dụng lề thích ứng dựa trên kích thước của toàn bộ màn hình ô tô. Lề trái và phải điều chỉnh theo 12% chiều rộng màn hình và thường chứa các thanh cuộn và nút điều khiển. Không gian còn lại trên màn hình, gọi là canvas ứng dụng, chứa nội dung ứng dụng.
Để có thêm không gian, bạn có thể xóa lề bên phải trên các kích thước màn hình nhỏ hơn. Ứng dụng có thể dùng không gian này làm khu vực phụ để hiển thị thông tin bổ sung.
Lưới bố cục
Bố cục Android Auto căn chỉnh các thành phần giao diện người dùng dọc theo lưới 8dp, với một số thành phần nhỏ hơn căn chỉnh theo lưới 4dp.
Khoảng đệm
Khoảng đệm là khoảng trống giữa các thành phần trên giao diện người dùng. Tỷ lệ khoảng đệm Android Auto được áp dụng theo bội số của 8dp, tối đa là kích thước khoảng đệm 96 dp. Bạn cũng nên thêm khoảng đệm lớn hơn vào bội số của 8dp.
Bảng này liệt kê các giá trị khoảng đệm điển hình xuất hiện trong giao diện người dùng Tự động. Mức tăng kích thước được liệt kê theo thứ tự tăng dần, được đánh dấu bằng các nhãn bắt đầu bằng chữ "P":
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | p7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4 dp | 8 dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
Khoảng đệm cho thành phần nhỏ hơn
Để tạo sự căn chỉnh tốt hơn và cho phép đủ khoảng cách, các thành phần nhỏ hơn có thể sử dụng 12 dp khoảng đệm một cách thận trọng.
Keyline
Keyline là các phép đo sắp xếp giao diện người dùng bằng cách cho thấy vị trí nên đặt các thành phần và thành phần theo chiều ngang trong một bố cục (dọc theo trục x). Các nhãn này được đánh dấu bằng nhãn bắt đầu bằng chữ cái “KL."
Bạn có thể đặt keyline tại bất kỳ vị trí nào trong bố cục. Bạn có thể dùng các thẻ này để cho biết khoảng cách giữa hai cạnh dọc (thành phần, thành phần hoặc chính màn hình). Các thành phần và phần tử căn chỉnh cạnh trái hoặc phải tương ứng với keyline gần nhất.
Đo lường bằng keyline
Keyline thay đổi dựa trên chiều rộng của màn hình, cho phép các thành phần trên giao diện người dùng mở rộng quy mô nhất quán trên nhiều kích thước màn hình.
Các keyline sau đây được đề xuất cho một loạt kích thước màn hình, được biểu thị bằng các nhãn được đánh dấu bằng “KL(n)". Các vị trí này được hiển thị theo thứ tự tăng kích thước keyline:
| KL(n) | Màn hình hẹp (0-600dp) |
Màn hình chuẩn (600-930dp) |
Màn hình rộng (930-1280dp) |
Màn hình siêu rộng (1280dp+) |
|---|---|---|---|---|
| 0.000 | 16dp | 24dp | 24dp | 32dp |
| kL1 | 24dp | 32dp | 32dp | 48dp |
| kL2 | 96dp | 112dp | 112dp | Không áp dụng |
| kL3 | 112dp | 128dp | 128dp | 152dp |
| kL4 | 148dp | 168dp | 168dp | Không áp dụng |