Window Size Class — co to je, třídy velikostí a vývoj

Co je Window Size Class?

Window Size Class je API platformy Android, součást knihovny Jetpack WindowManager, která klasifikuje dostupný prostor okna aplikace do tří kategorií. Na rozdíl od tradičního přístupu s kvantifikátory zdrojů (small/large/xlarge) poskytuje Window Size Class diskrétní sadu hodnot, na které se může vývojář spolehnout při navrhování rozhraní.

API se objevilo v Android 7.0 Nougat jako součást podpory režimu více oken, ale aktivní zavádění začalo s Jetpack WindowManager 1.1 (2022). Google doporučuje Window Size Class jako hlavní nástroj pro vytváření adaptivních rozvržení místo kontroly šířky obrazovky pomocí Display.getSize().

Klasifikace je založena na šířce okna v dp, nikoli na fyzické velikosti nebo hustotě pixelů. To znamená, že dvě zařízení s různým rozlišením, ale stejnou šířkou v dp, obdrží stejnou třídu — rozhraní bude předvídatelně stejné.

Tři třídy velikosti oken Android

Compact — třída pro okna o šířce do 600 dp. Telefon v režimu na výšku, většina skládacích telefonů (Galaxy Z Flip) v zavřeném stavu. Rozhraní je postaveno v jednom sloupci, navigace pomocí Bottom Navigation.

Medium — třída pro okna o šířce 600–840 dp. Tablet na výšku, telefon na šířku, skládací zařízení v polootevřeném stavu. Rozhraní používá dva sloupce — například seznam vlevo a detaily vpravo. Navigation Rail nahrazuje Bottom Navigation.

Expanded — třída pro okna o šířce od 840 dp. Tablet na šířku, desktopové okno, skládací zařízení v rozloženém stavu. Rozhraní může používat tři a více panelů, Permanent Navigation Drawer, panely nástrojů.

V Material Design 3 jsou pro každou třídu definovány adaptivní komponenty: Navigation Rail pro Medium, Navigation Drawer pro Expanded, Bottom Navigation pro Compact. Vývojář nemusí vybírat breakpoints — jsou již nastaveny API.

Jak funguje Window Size Class

Window Size Class se vypočítává na základě aktuální šířky okna aplikace v dp s ohledem na systémové prvky — stavový řádek, navigační panel, rozdělení obrazovky v Split Screen. API reaguje na změnu konfigurace okna: otočení zařízení, vstup do režimu více oken, rozložení skládacího zařízení.

Pro získání třídy se používá třída WindowSizeClass z knihovny androidx.window. Vývojář se přihlásí k odběru Flow (Kotlin) nebo LiveData (Java), který automaticky aktualizuje třídu při každé změně velikosti okna — bez ručního zpracování onConfigurationChanged.

Klasifikace probíhá ve třech krocích. První — měření aktuální šířky okna v pixelech. Druhý — převod na dp pomocí DisplayMetrics.density. Třetí — porovnání získané hodnoty s prahy: méně než 600 dp — Compact, 600–840 — Medium, od 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // kompaktní šířka
    WindowWidthSizeClass.MEDIUM  -> // střední šířka
    WindowWidthSizeClass.EXPANDED -> // rozšířená šířka
}

Kromě šířky (windowWidthSizeClass) API poskytuje třídu pro výšku okna (windowHeightSizeClass) — užitečné pro orientaci na šířku a desktopová okna.

Window Size Class v Jetpack Compose

V Jetpack Compose se Window Size Class používá pomocí funkce currentWindowAdaptiveInfo(), která vrací WindowAdaptiveInfo s třídami šířky a výšky. Tato funkce bere v úvahu nejen velikost okna, ale také typ vstupu (klávesnice, myš, dotyk) — prostřednictvím WindowPosture a WindowLayoutInfo.

Typický scénář — přepínání mezi rozvrženími v závislosti na třídě. Například na Compact se zobrazuje BottomSheet s výběrem, na Medium — boční panel, na Expanded — trvalý Navigation Drawer.

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

V Material Design 3 se komponenty NavigationSuiteScaffold automaticky přizpůsobují Window Size Class — vývojář nemusí psát podmíněnou logiku.

Window Size Class a Material Design 3

Material Design 3 (Material You) je plně integrován s Window Size Class. Systém adaptive layout v Material 3 určuje, který navigační komponent použít v každé třídě: BottomNavigation pro Compact, NavigationRail pro Medium, NavigationDrawer pro Expanded.

Tato integrace funguje na úrovni Adaptive API, které kombinuje Window Size Class s dalšími signály — FoldState (skládací zařízení) a WindowPosture (poloha obrazovky). Adaptive API je k dispozici prostřednictvím knihovny material3-adaptive.

Material 3 poskytuje čtyři adaptivní komponenty vysoké úrovně: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold a AdaptiveSheet. Každá z nich mění své chování v závislosti na Window Size Class bez další konfigurace.

Výhody adaptivních rozvržení

Použití Window Size Class poskytuje tři klíčové výhody v mobilním vývoji. První — předvídatelnost: místo stovek kombinací velikostí obrazovky pracuje vývojář se třemi třídami. To radikálně snižuje počet testovacích scénářů a chyb souvisejících s rozvržením.

Druhá — automatická adaptace na režim více oken. Když uživatel vstoupí do Split Screen, šířka okna se změní — Window Size Class se okamžitě přepočítá a rozhraní se přizpůsobí. Bez tohoto API zobrazuje aplikace na rozdělené obrazovce oříznutou verzi rozhraní pro telefon.

Třetí — konzistence s Material Design 3. Google zabudoval Window Size Class do systému adaptivních komponent, takže rozhraní postavená na Material 3 automaticky následují doporučení Google pro design velkých obrazovek bez další práce.