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 -> // компактна ширина
    WindowWidthSizeClass.MEDIUM  -> // средна ширина
    WindowWidthSizeClass.EXPANDED -> // разширена ширина
}

Освен ширина (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 за дизайн на големи екрани без допълнителна работа.