Window Size Class — що це, класи розмірів та розробка

Що таке Window Size Class?

Window Size Class — це API платформи Android, що входить до бібліотеки Jetpack WindowManager, який класифікує доступний простір вікна застосунку за трьома категоріями. На відміну від традиційного підходу з квантифікаторами ресурсів (small/large/xlarge), Window Size Class дає дискретний набір значень, на які розробник може спиратися при проектуванні інтерфейсу.

API з'явився в Android 7.0 Nougat як частина підтримки багатовіконного режиму, але активне впровадження почалося з Jetpack WindowManager 1.1 (2022). Google рекомендує Window Size Class як основний інструмент для побудови адаптивних макетів замість перевірки ширини екрана через Display.getSize().

Класифікація заснована на ширині вікна в dp, а не на фізичному розмірі або щільності пікселів. Це означає, що два пристрої з різним розділенням, але однаковою шириною в dp отримають однаковий клас — інтерфейс буде передбачувано однаковим.

Три класи розмірів вікна Android

Compact — клас для вікон шириною до 600 dp. Телефон у портретному режимі, більшість розкладачок (Galaxy Z Flip) у складеному стані. Інтерфейс будується в один стовпець, навігація через Bottom Navigation.

Medium — клас для вікон шириною 600–840 dp. Планшет у портреті, телефон в альбомі, складний пристрій у напіврозкритому стані. Інтерфейс використовує два стовпці — наприклад, список зліва та деталі справа. Navigation Rail замінює Bottom Navigation.

Expanded — клас для вікон шириною від 840 dp. Планшет в альбомі, десктопне вікно, складний пристрій у розкладеному вигляді. Інтерфейс може використовувати три і більше панелей, Permanent Navigation Drawer, панелі інструментів.

У Material Design 3 для кожного класу визначені адаптивні компоненти: Navigation Rail для Medium, Navigation Drawer для Expanded, Bottom Navigation для Compact. Розробнику не потрібно підбирати breakpoints — вони вже задані API.

Як працює Window Size Class

Window Size Class обчислюється на основі поточної ширини вікна застосунку в dp з урахуванням системних елементів — рядка стану, панелі навігації, поділу екрана в Split Screen. API спрацьовує при зміні конфігурації вікна: повороті пристрою, вході в багатовіконний режим, розкладанні складного пристрою.

Для отримання класу використовується клас WindowSizeClass з бібліотеки androidx.window. Розробник підписується на Flow (Kotlin) або LiveData (Java), який автоматично оновлює клас при кожній зміні розмірів вікна — без ручної обробки onConfigurationChanged.

Класифікація відбувається в три кроки. Перший — вимірювання поточної ширини вікна в пікселях. Другий — конвертація в dp через DisplayMetrics.density. Третій — порівняння отриманого значення з порогами: менше 600 dp — Compact, 600–840 — Medium, від 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

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

Окрім ширини (windowWidthSizeClass), API надає клас для висоти вікна (windowHeightSizeClass) — корисно для альбомної орієнтації та десктопних вікон.

Window Size Class у Jetpack Compose

У Jetpack Compose Window Size Class використовується через функцію currentWindowAdaptiveInfo(), яка повертає WindowAdaptiveInfo з класами ширини та висоти. Ця функція враховує не тільки розмір вікна, але й тип введення (клавіатура, миша, сенсор) — через WindowPosture та WindowLayoutInfo.

Типовий сценарій — перемикання між лейаутами залежно від класу. Наприклад, на Compact відображається BottomSheet з вибором, на Medium — бічна панель, на Expanded — постійний Navigation Drawer.

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

У Material Design 3 компоненти NavigationSuiteScaffold автоматично підлаштовуються під Window Size Class — розробнику не потрібно писати умовну логіку.

Window Size Class та Material Design 3

Material Design 3 (Material You) повністю інтегрований з Window Size Class. Система adaptive layout у Material 3 визначає, який компонент навігації використовувати на кожному класі: BottomNavigation для Compact, NavigationRail для Medium, NavigationDrawer для Expanded.

Ця інтеграція працює на рівні Adaptive API, який об'єднує Window Size Class з іншими сигналами — FoldState (складний пристрій) та WindowPosture (положення екрана). Adaptive API доступний через бібліотеку material3-adaptive.

Material 3 надає чотири адаптивних компоненти верхнього рівня: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold та AdaptiveSheet. Кожен з них змінює свою поведінку залежно від Window Size Class без додаткового налаштування.

Переваги адаптивних макетів

Використання Window Size Class дає три ключові переваги в мобільній розробці. Перше — передбачуваність: замість сотень комбінацій розмірів екрана розробник працює з трьома класами. Це радикально скорочує кількість тестових сценаріїв та багів, пов'язаних з розміткою.

Друге — автоматична адаптація до багатовіконного режиму. Коли користувач входить у Split Screen, ширина вікна змінюється — Window Size Class миттєво перераховується, та інтерфейс підлаштовується. Без цього API застосунок у розділеному екрані показує урізану версію інтерфейсу для телефону.

Третє — консистентність з Material Design 3. Google вбудував Window Size Class у систему адаптивних компонентів, тому інтерфейси, побудовані на Material 3, автоматично слідують рекомендаціям Google з large screen-дизайну без додаткової роботи.