Window Size Class — mi ez, méretosztályok és fejlesztés

Mi az a Window Size Class?

Window Size Class egy API az Android platformon, része a Jetpack WindowManager könyvtárnak, amely az alkalmazásablak rendelkezésre álló terét három kategóriába sorolja. Az erőforrás-kvantifikátorokkal (small/large/xlarge) való hagyományos megközelítéssel ellentétben a Window Size Class diszkrét értékkészletet biztosít, amelyre a fejlesztő támaszkodhat a felület tervezésekor.

Az API az Android 7.0 Nougat-ban jelent meg a többablakos mód támogatásának részeként, de az aktív bevezetés a Jetpack WindowManager 1.1-gyel (2022) kezdődött. A Google a Window Size Class-t ajánlja fő eszközként az adaptív elrendezések építéséhez a képernyőszélesség Display.getSize()-on keresztüli ellenőrzése helyett.

Az osztályozás az ablak dp-ben mért szélességén alapul, nem a fizikai méreten vagy pixelsűrűségen. Ez azt jelenti, hogy két különböző felbontású, de azonos dp szélességű eszköz ugyanazt az osztályt kapja — a felület kiszámíthatóan azonos lesz.

Az Android ablakméret három osztálya

Compact — osztály a legfeljebb 600 dp szélességű ablakokhoz. Telefon portré módban, a legtöbb összecsukható telefon (Galaxy Z Flip) zárt állapotban. A felület egy oszlopba épül, navigáció a Bottom Navigation segítségével.

Medium — osztály a 600–840 dp szélességű ablakokhoz. Táblagép portréban, telefon fekvő módban, összecsukható eszköz félig nyitott állapotban. A felület két oszlopot használ — például lista balra és részletek jobbra. A Navigation Rail felváltja a Bottom Navigation-t.

Expanded — osztály a 840 dp-től széles ablakokhoz. Táblagép fekvő módban, asztali ablak, összecsukható eszköz kinyitott állapotban. A felület három vagy több panelt, Permanent Navigation Drawer-t, eszközpanelt használhat.

A Material Design 3-ban minden osztályhoz adaptív komponensek vannak meghatározva: Navigation Rail a Medium-hoz, Navigation Drawer az Expanded-hez, Bottom Navigation a Compact-hoz. A fejlesztőnek nem kell breakpoints-ot választania — azokat már az API beállította.

Hogyan működik a Window Size Class

A Window Size Class az alkalmazásablak aktuális szélessége alapján számítódik ki dp-ben, figyelembe véve a rendszerelemeket — állapotsor, navigációs panel, képernyőosztás Split Screen-ben. Az API az ablak konfigurációjának változására reagál: az eszköz elforgatása, többablakos módba lépés, összecsukható eszköz kinyitása.

Az osztály lekéréséhez a WindowSizeClass osztályt használjuk a androidx.window könyvtárból. A fejlesztő feliratkozik a Flow-ra (Kotlin) vagy LiveData-ra (Java), amely automatikusan frissíti az osztályt minden ablkméret-változáskor — az onConfigurationChanged kézi kezelése nélkül.

Az osztályozás három lépésben történik. Első — az ablak aktuális szélességének mérése pixelekben. Második — konvertálás dp-be a DisplayMetrics.density segítségével. Harmadik — a kapott érték összehasonlítása a küszöbértékekkel: kevesebb mint 600 dp — Compact, 600–840 — Medium, 840-től — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // kompakt szélesség
    WindowWidthSizeClass.MEDIUM  -> // közepes szélesség
    WindowWidthSizeClass.EXPANDED -> // kiterjesztett szélesség
}

A szélességen (windowWidthSizeClass) kívül az API osztályt biztosít az ablak magasságához is (windowHeightSizeClass) — hasznos fekvő tájoláshoz és asztali ablakokhoz.

Window Size Class Jetpack Compose-ban

A Jetpack Compose-ban a Window Size Class a currentWindowAdaptiveInfo() függvényen keresztül használatos, amely WindowAdaptiveInfo-t ad vissza szélességi és magassági osztályokkal. Ez a függvény nemcsak az ablakméretet, hanem a bevitel típusát is figyelembe veszi (billentyűzet, egér, érintés) — a WindowPosture és WindowLayoutInfo segítségével.

Tipikus forgatókönyv — váltás az elrendezések között az osztálytól függően. Például Compact-on egy BottomSheet jelenik meg választással, Medium-on — egy oldalsó panel, Expanded-en — egy állandó Navigation Drawer.

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

A Material Design 3-ban a NavigationSuiteScaffold komponensek automatikusan alkalmazkodnak a Window Size Class-hoz — a fejlesztőnek nem kell feltételes logikát írnia.

Window Size Class és Material Design 3

Material Design 3 (Material You) teljesen integrált a Window Size Class-szal. Az adaptive layout rendszer a Material 3-ban meghatározza, hogy melyik navigációs komponenst kell használni az egyes osztályokban: BottomNavigation a Compact-hoz, NavigationRail a Medium-hoz, NavigationDrawer az Expanded-hez.

Ez az integráció az Adaptive API szintjén működik, amely a Window Size Class-t más jelekkel kombinálja — FoldState (összecsukható eszköz) és WindowPosture (képernyő helyzete). Az Adaptive API a material3-adaptive könyvtáron keresztül érhető el.

A Material 3 négy magas szintű adaptív komponenst kínál: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold és AdaptiveSheet. Mindegyikük megváltoztatja viselkedését a Window Size Class-tól függően, további konfiguráció nélkül.

Az adaptív elrendezések előnyei

A Window Size Class használata három kulcsfontosságú előnyt nyújt a mobilfejlesztésben. Első — kiszámíthatóság: képernyőméretek százai helyett a fejlesztő három osztállyal dolgozik. Ez drasztikusan csökkenti a tesztforgatókönyvek és az elrendezéssel kapcsolatos hibák számát.

Második — automatikus alkalmazkodás a többablakos módhoz. Amikor a felhasználó belép a Split Screen-be, az ablak szélessége megváltozik — a Window Size Class azonnal újraszámítódik, és a felület alkalmazkodik. Ezen API nélkül az alkalmazás osztott képernyőn a telefonfelület csonka változatát mutatja.

Harmadik — konzisztencia a Material Design 3-mal. A Google beépítette a Window Size Class-t az adaptív komponensek rendszerébe, így a Material 3-ra épülő felületek automatikusan követik a Google nagy képernyős tervezési ajánlásait, további munka nélkül.