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/đáp ứng. Các điểm ngắt cân bằng giữa tính đơn giản và linh hoạt về bố cục trong việc tối ưu hoá ứng dụng trong các trường hợp riêng biệt.
Các lớp kích thước cửa sổ phân loại khu vực hiển thị có sẵn cho ứng dụng là thu gọn, trung bình hoặc mở rộng. Chiều rộng và chiều cao có sẵn được phân loại riêng biệt, vì vậy, tại bất kỳ thời điểm nào, ứng dụng của bạn sẽ có 2 lớp kích thước cửa sổ – một cho chiều rộng, một cho chiều cao. Chiều rộng có sẵn thường quan trọng hơn chiều cao có sẵn do sự phổ biến của thao tác cuộn theo chiều dọc, vì vậy, lớp kích thước cửa sổ theo chiều rộng có thể phù hợp hơn với giao diện người dùng của ứng dụng.
Như được minh hoạ trong các hình, các điểm ngắt cho phép bạn tiếp tục suy nghĩ về bố cục về mặt thiết bị và cấu hình. Mỗi điểm chuyển đổi đại diện cho một bố cục điển hình của thiết bị. Đây có thể là khung tham chiếu hữu ích trong quá trình thiết kế bố cục dựa trên điểm chuyển đổi.
| Lớp kích thước | Điểm chuyển đổi | Trình bày trên thiết bị |
|---|---|---|
| Chiều rộng thu gọn | chiều rộng < 600dp | 99,96% điện thoại ở chế độ dọc |
| Chiều rộng trung bình | 600dp ≤ chiều rộng < 840dp | 93,73% máy tính bảng ở chế độ dọc
hầu hết màn hình lớn bên trong ở chế độ dọc khi chưa gập |
| Chiều rộng được mở rộng | chiều rộng ≥ 840dp | 97,22% máy tính bảng ở chế độ ngang
hầu hết màn hình lớn bên trong ở chế độ ngang khi chưa gập |
| Chiều cao thu gọn | chiều cao < 480dp | 99,78% điện thoại ở chế độ ngang |
| Chiều cao trung bình | 480dp ≤ chiều cao < 900dp | 96,56% máy tính bảng ở chế độ ngang
97,59% điện thoại ở chế độ dọc |
| Chiều cao mở rộng | chiều cao ≥ 900dp | 94,25% máy tính bảng ở chế độ dọc |
Mặc dù việc trực quan hoá các lớp kích thước dưới dạng thiết bị thực tế có thể hữu ích, nhưng các lớp kích thước cửa sổ không được xác định rõ ràng theo kích thước của màn hình thiết bị. Các lớp kích thước cửa sổ không dành cho logic isTablet-type. Thay vào đó, các lớp kích thước cửa sổ được xác định theo kích thước cửa sổ có sẵn cho ứng dụng của bạn bất kể loại thiết bị mà ứng dụng đang chạy trên đó. Điều này có hai ý nghĩa quan trọng:
Thiết bị thực tế không đảm bảo tương thích với kích thước cửa sổ cụ thể. Không gian màn hình có sẵn cho ứng dụng có thể khác với kích thước màn hình của thiết bị vì nhiều lý do. Trên thiết bị di động, chế độ chia đôi màn hình có thể phân vùng màn hình giữa hai ứng dụng. Trên ChromeOS, các ứng dụng Android có thể được hiển thị dưới dạng cửa sổ tự do có thể thay đổi kích thước tuỳ ý. Bạn có thể gập riêng từng màn hình có kích thước khác nhau bằng cách gập hoặc mở thiết bị.
Lớp kích thước cửa sổ có thể thay đổi trong suốt thời gian hoạt động của ứng dụng. Trong khi ứng dụng đang chạy, việc thay đổi hướng thiết bị, chế độ đa nhiệm, cũng như thao tác gập/mở màn hình có thể thay đổi không gian màn hình hiện có. Do đó, lớp kích thước cửa sổ là động và giao diện người dùng của ứng dụng phải thích ứng tương ứng.
Các lớp kích thước cửa sổ liên kết với điểm ngắt nhỏ gọn, trung bình và mở rộng trong hướng dẫn về bố cục Material Design. Sử dụng các lớp kích thước cửa sổ để đưa ra quyết định tổng thể về bố cục ứng dụng, chẳng hạn như quyết định có sử dụng một bố cục chuẩn hoá cụ thể để tận dụng không gian màn hình bổ sung hay không.
Bạn có thể tính toán WindowSizeClass hiện tại bằng cách sử dụng hàm cấp cao nhất currentWindowAdaptiveInfo của thư viện androidx.compose.material3.adaptive. Ví dụ sau đây cho thấy cách tính toán lớp kích thước cửa sổ và nhận thông tin cập nhật bất cứ khi nào lớp kích thước cửa sổ thay đổi:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Quản lý bố cục bằng các lớp kích thước cửa sổ
Các lớp kích thước cửa sổ cho phép bạn thay đổi bố cục ứng dụng khi không gian hiển thị hiện có cho ứng dụng thay đổi, ví dụ: khi thiết bị gập hoặc mở ra, hướng thiết bị thay đổi hoặc cửa sổ ứng dụng được đổi kích thước ở chế độ nhiều cửa sổ.
Bản địa hoá logic để xử lý các thay đổi về kích thước màn hình bằng cách chuyển các lớp kích thước cửa sổ xuống dưới dạng trạng thái cho các thành phần kết hợp được lồng giống như mọi trạng thái ứng dụng khác:
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
// Perform logic on the size class to decide whether to show the top app bar.
val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT
// MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
MyScreen(
showTopAppBar = showTopAppBar,
/* ... */
)
}
Kiểm thử các lớp kích thước cửa sổ
Khi bạn thay đổi bố cục, hãy kiểm thử hành vi bố cục trên tất cả kích thước cửa sổ, đặc biệt là ở chiều rộng điểm ngắt nhỏ gọn, trung bình và mở rộng.
Nếu bạn có sẵn bố cục cho màn hình thu gọn, trước tiên, hãy tối ưu hoá bố cục cho lớp kích thước chiều rộng mở rộng, vì lớp kích thước này cung cấp nhiều không gian nhất cho nội dung bổ sung và các thay đổi về giao diện người dùng. Sau đó, quyết định bố cục nào phù hợp với lớp kích thước chiều rộng trung bình; cân nhắc thêm một bố cục chuyên biệt.
Các bước tiếp theo
Để tìm hiểu thêm về cách sử dụng các lớp kích thước cửa sổ để tạo bố cục thích ứng/đáp ứng, hãy xem các mục sau:
Đối với bố cục dựa trên Compose: Hỗ trợ nhiều kích thước màn hình
Đối với bố cục dựa trên khung hiển thị: Thiết kế thích ứng/đáp ứng bằng khung hiển thị
Để tìm hiểu thêm về những yếu tố tạo nên sự tuyệt vời của một ứng dụng trên tất cả thiết bị và kích thước màn hình, hãy xem: