Window Size Class — vad är det, storleksklasser och utveckling

Vad är Window Size Class?

Window Size Class är ett API på Android-plattformen, en del av Jetpack WindowManager-biblioteket, som klassificerar det tillgängliga utrymmet i applikationsfönstret i tre kategorier. Till skillnad från det traditionella tillvägagångssättet med resurskvantifierare (small/large/xlarge) ger Window Size Class en diskret uppsättning värden som utvecklaren kan lita på när gränssnittet utformas.

API:et dök upp i Android 7.0 Nougat som en del av stödet för flerfönsterläge, men aktiv implementering började med Jetpack WindowManager 1.1 (2022). Google rekommenderar Window Size Class som det främsta verktyget för att bygga adaptiva layouter istället för att kontrollera skärmbredden via Display.getSize().

Klassificeringen baseras på fönsterbredden i dp, inte på fysisk storlek eller pixeltäthet. Detta innebär att två enheter med olika upplösning men samma bredd i dp får samma klass — gränssnittet kommer att vara förutsägbart identiskt.

Tre fönsterstorleksklasser i Android

Compact — klass för fönster med bredd upp till 600 dp. Telefon i porträttläge, de flesta vikbara telefoner (Galaxy Z Flip) i stängt tillstånd. Gränssnittet byggs i en kolumn, navigering via Bottom Navigation.

Medium — klass för fönster med bredd 600–840 dp. Surfplatta i porträtt, telefon i landskap, vikbar enhet i halvöppet tillstånd. Gränssnittet använder två kolumner — till exempel lista till vänster och detaljer till höger. Navigation Rail ersätter Bottom Navigation.

Expanded — klass för fönster med bredd från 840 dp. Surfplatta i landskap, desktopfönster, vikbar enhet i utfällt tillstånd. Gränssnittet kan använda tre eller fler paneler, Permanent Navigation Drawer, verktygspaneler.

I Material Design 3 definieras adaptiva komponenter för varje klass: Navigation Rail för Medium, Navigation Drawer för Expanded, Bottom Navigation för Compact. Utvecklaren behöver inte välja breakpoints — de är redan inställda av API:et.

Hur Window Size Class fungerar

Window Size Class beräknas baserat på den aktuella bredden på applikationsfönstret i dp med hänsyn till systemelement — statusfält, navigeringspanel, skärmdelning i Split Screen. API:et reagerar på förändringar i fönsterkonfigurationen: rotation av enheten, inträde i flerfönsterläge, utfällning av den vikbara enheten.

För att få klassen används klassen WindowSizeClass från biblioteket androidx.window. Utvecklaren prenumererar på Flow (Kotlin) eller LiveData (Java), som automatiskt uppdaterar klassen vid varje ändring av fönsterstorleken — utan manuell hantering av onConfigurationChanged.

Klassificering sker i tre steg. Första — mätning av den aktuella fönsterbredden i pixlar. Andra — konvertering till dp via DisplayMetrics.density. Tredje — jämförelse av det erhållna värdet med tröskelvärden: mindre än 600 dp — Compact, 600–840 — Medium, från 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // kompakt bredd
    WindowWidthSizeClass.MEDIUM  -> // medelbredd
    WindowWidthSizeClass.EXPANDED -> // utökad bredd
}

Förutom bredd (windowWidthSizeClass) tillhandahåller API:et en klass för fönsterhöjd (windowHeightSizeClass) — användbart för liggande orientering och desktopfönster.

Window Size Class i Jetpack Compose

I Jetpack Compose används Window Size Class via funktionen currentWindowAdaptiveInfo(), som returnerar WindowAdaptiveInfo med bredd- och höjdklasser. Denna funktion tar inte bara hänsyn till fönsterstorleken utan även till inmatningstypen (tangentbord, mus, touch) — via WindowPosture och WindowLayoutInfo.

Typiskt scenario — växling mellan layouter beroende på klass. Till exempel på Compact visas ett BottomSheet med val, på Medium — en sidopanel, på Expanded — en permanent Navigation Drawer.

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

I Material Design 3 anpassar sig NavigationSuiteScaffold-komponenterna automatiskt till Window Size Class — utvecklaren behöver inte skriva villkorlig logik.

Window Size Class och Material Design 3

Material Design 3 (Material You) är helt integrerat med Window Size Class. Systemet adaptive layout i Material 3 bestämmer vilken navigeringskomponent som ska användas i varje klass: BottomNavigation för Compact, NavigationRail för Medium, NavigationDrawer för Expanded.

Denna integration fungerar på nivån av Adaptive API, som kombinerar Window Size Class med andra signaler — FoldState (vikbar enhet) och WindowPosture (skärmposition). Adaptive API är tillgängligt via biblioteket material3-adaptive.

Material 3 tillhandahåller fyra adaptiva komponenter på hög nivå: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold och AdaptiveSheet. Var och en av dem ändrar sitt beteende beroende på Window Size Class utan ytterligare konfiguration.

Fördelar med adaptiva layouter

Användning av Window Size Class ger tre viktiga fördelar inom mobil utveckling. Första — förutsägbarhet: istället för hundratals kombinationer av skärmstorlekar arbetar utvecklaren med tre klasser. Detta minskar dramatiskt antalet testscenarier och buggar relaterade till layout.

Andra — automatisk anpassning till flerfönsterläge. När användaren går in i Split Screen ändras fönsterbredden — Window Size Class beräknas omedelbart om och gränssnittet anpassas. Utan detta API visar applikationen på en delad skärm en trunkerad version av telefonens gränssnitt.

Tredje — konsekvens med Material Design 3. Google har inbyggt Window Size Class i systemet med adaptiva komponenter, så gränssnitt byggda på Material 3 följer automatiskt Googles rekommendationer för design på stora skärmar utan extra arbete.