Window Size Class — nó là gì, các lớp kích thước và phát triển

Window Size Class là gì?

Window Size Class là API nền tảng Android được bao gồm trong thư viện Jetpack WindowManager, phân loại không gian cửa sổ ứng dụng khả dụng thành ba loại. Không giống như cách tiếp cận truyền thống với bộ định tính tài nguyên (small/large/xlarge), Window Size Class cung cấp một tập hợp các giá trị riêng biệt mà nhà phát triển có thể dựa vào khi thiết kế giao diện.

API xuất hiện trong Android 7.0 Nougat như một phần của hỗ trợ chế độ đa cửa sổ, nhưng việc áp dụng tích cực bắt đầu với Jetpack WindowManager 1.1 (2022). Google khuyến nghị Window Size Class là công cụ chính để xây dựng bố cục thích ứng thay vì kiểm tra chiều rộng màn hình qua Display.getSize().

Việc phân loại dựa trên chiều rộng cửa sổ bằng dp, không phải kích thước vật lý hay mật độ điểm ảnh. Điều này có nghĩa là hai thiết bị có độ phân giải khác nhau nhưng cùng chiều rộng dp sẽ nhận cùng một lớp — giao diện sẽ giống hệt nhau một cách có thể dự đoán.

Ba lớp kích thước cửa sổ Android

Compact — lớp cho cửa sổ có chiều rộng đến 600 dp. Điện thoại ở chế độ dọc, hầu hết điện thoại gập (Galaxy Z Flip) ở trạng thái gập. Giao diện được xây dựng một cột, điều hướng qua Bottom Navigation.

Medium — lớp cho cửa sổ có chiều rộng 600–840 dp. Máy tính bảng ở chế độ dọc, điện thoại ở chế độ ngang, thiết bị gập ở trạng thái nửa mở. Giao diện sử dụng hai cột — ví dụ, danh sách bên trái và chi tiết bên phải. Navigation Rail thay thế Bottom Navigation.

Expanded — lớp cho cửa sổ có chiều rộng từ 840 dp. Máy tính bảng ở chế độ ngang, cửa sổ máy tính để bàn, thiết bị gập ở trạng thái mở hoàn toàn. Giao diện có thể sử dụng ba hoặc nhiều panel, Permanent Navigation Drawer, panel công cụ.

Trong Material Design 3, các thành phần thích ứng được xác định cho mỗi lớp: Navigation Rail cho Medium, Navigation Drawer cho Expanded, Bottom Navigation cho Compact. Nhà phát triển không cần chọn breakpoints — chúng đã được API xác định sẵn.

Cách Window Size Class hoạt động

Window Size Class được tính toán dựa trên chiều rộng hiện tại của cửa sổ ứng dụng bằng dp, có tính đến các thành phần hệ thống — thanh trạng thái, thanh điều hướng, chia màn hình trong chế độ Split Screen. API được kích hoạt khi cấu hình cửa sổ thay đổi: xoay thiết bị, vào chế độ đa cửa sổ, mở thiết bị gập.

Để lấy lớp, sử dụng lớp WindowSizeClass từ thư viện androidx.window. Nhà phát triển đăng ký Flow (Kotlin) hoặc LiveData (Java) tự động cập nhật lớp mỗi khi kích thước cửa sổ thay đổi — không cần xử lý thủ công onConfigurationChanged.

Việc phân loại diễn ra trong ba bước. Đầu tiên — đo chiều rộng cửa sổ hiện tại bằng pixel. Thứ hai — chuyển đổi sang dp qua DisplayMetrics.density. Thứ ba — so sánh giá trị thu được với ngưỡng: dưới 600 dp — Compact, 600–840 — Medium, từ 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact width
    WindowWidthSizeClass.MEDIUM  -> // medium width
    WindowWidthSizeClass.EXPANDED -> // expanded width
}

Ngoài chiều rộng (windowWidthSizeClass), API cung cấp lớp cho chiều cao cửa sổ (windowHeightSizeClass) — hữu ích cho hướng ngang và cửa sổ máy tính để bàn.

Window Size Class trong Jetpack Compose

Trong Jetpack Compose, Window Size Class được sử dụng qua hàm currentWindowAdaptiveInfo(), trả về WindowAdaptiveInfo với các lớp chiều rộng và chiều cao. Hàm này không chỉ tính đến kích thước cửa sổ mà còn loại đầu vào (bàn phím, chuột, cảm ứng) — qua WindowPosture và WindowLayoutInfo.

Một kịch bản điển hình là chuyển đổi giữa các bố cục tùy theo lớp. Ví dụ, trên Compact hiển thị BottomSheet với lựa chọn, trên Medium — panel bên, trên Expanded — Navigation Drawer cố định.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

Trong Material Design 3, các thành phần NavigationSuiteScaffold tự động thích ứng với Window Size Class — nhà phát triển không cần viết logic điều kiện.

Window Size Class và Material Design 3

Material Design 3 (Material You) được tích hợp hoàn toàn với Window Size Class. Hệ thống bố cục thích ứng trong Material 3 xác định thành phần điều hướng nào sẽ sử dụng cho mỗi lớp: BottomNavigation cho Compact, NavigationRail cho Medium, NavigationDrawer cho Expanded.

Sự tích hợp này hoạt động ở cấp độ Adaptive API, kết hợp Window Size Class với các tín hiệu khác — FoldState (thiết bị gập) và WindowPosture (vị trí màn hình). Adaptive API có sẵn qua thư viện material3-adaptive.

Material 3 cung cấp bốn thành phần thích ứng cấp cao: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold và AdaptiveSheet. Mỗi thành phần thay đổi hành vi tùy theo Window Size Class mà không cần cấu hình thêm.

Lợi ích của bố cục thích ứng

Sử dụng Window Size Class mang lại ba lợi ích chính trong phát triển di động. Thứ nhất — khả năng dự đoán: thay vì hàng trăm tổ hợp kích thước màn hình, nhà phát triển làm việc với ba lớp. Điều này giảm triệt để số lượng kịch bản kiểm thử và lỗi liên quan đến bố cục.

Thứ hai — tự động thích ứng với chế độ đa cửa sổ. Khi người dùng vào Split Screen, chiều rộng cửa sổ thay đổi — Window Size Class tính toán lại ngay lập tức và giao diện thích ứng. Không có API này, ứng dụng trong màn hình chia đôi hiển thị phiên bản giao diện điện thoại bị thu nhỏ.

Thứ ba — nhất quán với Material Design 3. Google đã xây dựng Window Size Class vào hệ thống thành phần thích ứng, do đó các giao diện xây dựng trên Material 3 tự động tuân theo khuyến nghị thiết kế màn hình lớn của Google mà không cần thêm công sức.