Window Size Class — ce este, clase de dimensiuni și dezvoltare

Ce este Window Size Class?

Window Size Class este o API a platformei Android, parte a bibliotecii Jetpack WindowManager, care clasifică spațiul disponibil al ferestrei aplicației în trei categorii. Spre deosebire de abordarea tradițională cu cuantificatori de resurse (small/large/xlarge), Window Size Class oferă un set discret de valori pe care dezvoltatorul se poate baza atunci când proiectează interfața.

API a apărut în Android 7.0 Nougat ca parte a suportului pentru modul multi-fereastră, dar implementarea activă a început cu Jetpack WindowManager 1.1 (2022). Google recomandă Window Size Class ca instrument principal pentru construirea layout-urilor adaptive în locul verificării lățimii ecranului prin Display.getSize().

Clasificarea se bazează pe lățimea ferestrei în dp, nu pe dimensiunea fizică sau densitatea pixelilor. Aceasta înseamnă că două dispozitive cu rezoluții diferite, dar aceeași lățime în dp vor primi aceeași clasă — interfața va fi previzibil identică.

Trei clase de dimensiuni ale ferestrei Android

Compact — clasa pentru ferestre cu lățimea de până la 600 dp. Telefon în modul portret, majoritatea telefoanelor pliabile (Galaxy Z Flip) în stare închisă. Interfața se construiește într-o singură coloană, navigare prin Bottom Navigation.

Medium — clasa pentru ferestre cu lățimea de 600–840 dp. Tabletă în portret, telefon în peisaj, dispozitiv pliabil în stare semi-deschisă. Interfața utilizează două coloane — de exemplu, lista în stânga și detaliile în dreapta. Navigation Rail înlocuiește Bottom Navigation.

Expanded — clasa pentru ferestre cu lățimea de la 840 dp. Tabletă în peisaj, fereastră desktop, dispozitiv pliabil în stare deschisă. Interfața poate utiliza trei sau mai multe panouri, Permanent Navigation Drawer, panouri de instrumente.

În Material Design 3 pentru fiecare clasă sunt definite componente adaptive: Navigation Rail pentru Medium, Navigation Drawer pentru Expanded, Bottom Navigation pentru Compact. Dezvoltatorul nu trebuie să selecteze breakpoints — acestea sunt deja stabilite de API.

Cum funcționează Window Size Class

Window Size Class se calculează pe baza lățimii curente a ferestrei aplicației în dp, ținând cont de elementele sistemului — bara de stare, panoul de navigare, împărțirea ecranului în Split Screen. API reacționează la modificarea configurației ferestrei: rotirea dispozitivului, intrarea în modul multi-fereastră, desfășurarea dispozitivului pliabil.

Pentru obținerea clasei se folosește clasa WindowSizeClass din biblioteca androidx.window. Dezvoltatorul se abonează la Flow (Kotlin) sau LiveData (Java), care actualizează automat clasa la fiecare modificare a dimensiunilor ferestrei — fără gestionarea manuală a onConfigurationChanged.

Clasificarea are loc în trei pași. Primul — măsurarea lățimii curente a ferestrei în pixeli. Al doilea — conversia în dp prin DisplayMetrics.density. Al treilea — compararea valorii obținute cu pragurile: mai puțin de 600 dp — Compact, 600–840 — Medium, de la 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // lățime compactă
    WindowWidthSizeClass.MEDIUM  -> // lățime medie
    WindowWidthSizeClass.EXPANDED -> // lățime extinsă
}

Pe lângă lățime (windowWidthSizeClass), API oferă o clasă pentru înălțimea ferestrei (windowHeightSizeClass) — utilă pentru orientarea peisaj și ferestrele desktop.

Window Size Class în Jetpack Compose

În Jetpack Compose Window Size Class este utilizat prin funcția currentWindowAdaptiveInfo(), care returnează WindowAdaptiveInfo cu clasele de lățime și înălțime. Această funcție ia în considerare nu doar dimensiunea ferestrei, ci și tipul de intrare (tastatură, mouse, tactil) — prin WindowPosture și WindowLayoutInfo.

Scenariul tipic — comutarea între layout-uri în funcție de clasă. De exemplu, pe Compact se afișează un BottomSheet cu selecție, pe Medium — un panou lateral, pe Expanded — un Navigation Drawer permanent.

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

În Material Design 3 componentele NavigationSuiteScaffold se adaptează automat la Window Size Class — dezvoltatorul nu trebuie să scrie logică condițională.

Window Size Class și Material Design 3

Material Design 3 (Material You) este complet integrat cu Window Size Class. Sistemul adaptive layout din Material 3 determină ce componentă de navigare să fie utilizată pentru fiecare clasă: BottomNavigation pentru Compact, NavigationRail pentru Medium, NavigationDrawer pentru Expanded.

Această integrare funcționează la nivelul Adaptive API, care combină Window Size Class cu alte semnale — FoldState (dispozitiv pliabil) și WindowPosture (poziția ecranului). Adaptive API este disponibil prin biblioteca material3-adaptive.

Material 3 oferă patru componente adaptive de nivel înalt: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold și AdaptiveSheet. Fiecare dintre acestea își schimbă comportamentul în funcție de Window Size Class fără configurare suplimentară.

Avantajele layout-urilor adaptive

Utilizarea Window Size Class oferă trei avantaje cheie în dezvoltarea mobilă. Primul — previzibilitatea: în loc de sute de combinații de dimensiuni de ecran, dezvoltatorul lucrează cu trei clase. Aceasta reduce radical numărul de scenarii de testare și erorile legate de layout.

Al doilea — adaptarea automată la modul multi-fereastră. Când utilizatorul intră în Split Screen, lățimea ferestrei se modifică — Window Size Class se recalculează instantaneu, iar interfața se adaptează. Fără această API, aplicația pe ecranul divizat afișează o versiune redusă a interfeței de telefon.

Al treilea — consistența cu Material Design 3. Google a încorporat Window Size Class în sistemul de componente adaptive, astfel încât interfețele construite pe Material 3 urmează automat recomandările Google pentru designul pe ecrane mari, fără muncă suplimentară.