Window Size Class — co to jest, klasy rozmiarów i tworzenie

Czym jest Window Size Class?

Window Size Class to API platformy Android, wchodzące w skład biblioteki Jetpack WindowManager, które klasyfikuje dostępną przestrzeń okna aplikacji według trzech kategorii. W przeciwieństwie do tradycyjnego podejścia z kwantyfikatorami zasobów (small/large/xlarge), Window Size Class dostarcza dyskretny zestaw wartości, na których programista może się oprzeć podczas projektowania interfejsu.

API pojawiło się w Android 7.0 Nougat jako część obsługi trybu wielookienkowego, ale aktywne wdrażanie rozpoczęło się od Jetpack WindowManager 1.1 (2022). Google zaleca Window Size Class jako główne narzędzie do budowy adaptacyjnych układów zamiast sprawdzania szerokości ekranu przez Display.getSize().

Klasyfikacja opiera się na szerokości okna w dp, a nie na fizycznym rozmiarze lub gęstości pikseli. Oznacza to, że dwa urządzenia z różną rozdzielczością, ale taką samą szerokością w dp otrzymają tę samą klasę — interfejs będzie przewidywalnie taki sam.

Trzy klasy rozmiarów okna Android

Compact — klasa dla okien o szerokości do 600 dp. Telefon w trybie pionowym, większość składanych telefonów (Galaxy Z Flip) w złożonym stanie. Interfejs budowany w jednej kolumnie, nawigacja przez Bottom Navigation.

Medium — klasa dla okien o szerokości 600–840 dp. Tablet w pionie, telefon w poziomie, urządzenie składane w półotwartym stanie. Interfejs wykorzystuje dwie kolumny — na przykład lista po lewej i szczegóły po prawej. Navigation Rail zastępuje Bottom Navigation.

Expanded — klasa dla okien o szerokości od 840 dp. Tablet w poziomie, okno desktopowe, urządzenie składane w rozłożonym stanie. Interfejs może wykorzystywać trzy lub więcej paneli, Permanent Navigation Drawer, panele narzędziowe.

W Material Design 3 dla każdej klasy zdefiniowano adaptacyjne komponenty: Navigation Rail dla Medium, Navigation Drawer dla Expanded, Bottom Navigation dla Compact. Programista nie musi dobierać breakpoints — są już określone przez API.

Jak działa Window Size Class

Window Size Class jest obliczany na podstawie bieżącej szerokości okna aplikacji w dp z uwzględnieniem elementów systemowych — paska stanu, panelu nawigacji, podziału ekranu w Split Screen. API reaguje na zmiany konfiguracji okna: obrót urządzenia, wejście w tryb wielookienkowy, rozłożenie składanego urządzenia.

Do uzyskania klasy używana jest klasa WindowSizeClass z biblioteki androidx.window. Programista subskrybuje Flow (Kotlin) lub LiveData (Java), który automatycznie aktualizuje klasę przy każdej zmianie rozmiarów okna — bez ręcznej obsługi onConfigurationChanged.

Klasyfikacja odbywa się w trzech krokach. Pierwszy — pomiar bieżącej szerokości okna w pikselach. Drugi — konwersja na dp przez DisplayMetrics.density. Trzeci — porównanie uzyskanej wartości z progami: poniżej 600 dp — Compact, 600–840 — Medium, od 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // kompaktowa szerokość
    WindowWidthSizeClass.MEDIUM  -> // średnia szerokość
    WindowWidthSizeClass.EXPANDED -> // rozszerzona szerokość
}

Oprócz szerokości (windowWidthSizeClass), API udostępnia klasę dla wysokości okna (windowHeightSizeClass) — przydatną w orientacji poziomej i oknach desktopowych.

Window Size Class w Jetpack Compose

W Jetpack Compose Window Size Class jest używany przez funkcję currentWindowAdaptiveInfo(), która zwraca WindowAdaptiveInfo z klasami szerokości i wysokości. Funkcja ta uwzględnia nie tylko rozmiar okna, ale także typ wprowadzania (klawiatura, mysz, dotyk) — przez WindowPosture i WindowLayoutInfo.

Typowy scenariusz — przełączanie między układami w zależności od klasy. Na przykład w Compact wyświetlany jest BottomSheet z wyborem, w Medium — panel boczny, w Expanded — stały Navigation Drawer.

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

W Material Design 3 komponenty NavigationSuiteScaffold automatycznie dostosowują się do Window Size Class — programista nie musi pisać logiki warunkowej.

Window Size Class i Material Design 3

Material Design 3 (Material You) jest w pełni zintegrowany z Window Size Class. System adaptive layout w Material 3 określa, który komponent nawigacji użyć w każdej klasie: BottomNavigation dla Compact, NavigationRail dla Medium, NavigationDrawer dla Expanded.

Ta integracja działa na poziomie Adaptive API, który łączy Window Size Class z innymi sygnałami — FoldState (urządzenie składane) i WindowPosture (pozycja ekranu). Adaptive API jest dostępne przez bibliotekę material3-adaptive.

Material 3 udostępnia cztery adaptacyjne komponenty najwyższego poziomu: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold i AdaptiveSheet. Każdy z nich zmienia swoje zachowanie w zależności od Window Size Class bez dodatkowej konfiguracji.

Zalety adaptacyjnych układów

Użycie Window Size Class daje trzy kluczowe zalety w programowaniu mobilnym. Pierwsza — przewidywalność: zamiast setek kombinacji rozmiarów ekranu programista pracuje z trzema klasami. To radykalnie zmniejsza liczbę scenariuszy testowych i błędów związanych z układem.

Druga — automatyczna adaptacja do trybu wielookienkowego. Gdy użytkownik wchodzi w Split Screen, szerokość okna zmienia się — Window Size Class natychmiast przelicza się, a interfejs dostosowuje. Bez tego API aplikacja w podzielonym ekranie pokazuje okrojoną wersję interfejsu dla telefonu.

Trzecia — spójność z Material Design 3. Google wbudował Window Size Class w system adaptacyjnych komponentów, więc interfejsy zbudowane na Material 3 automatycznie podążają za zaleceniami Google dotyczącymi projektowania na dużych ekranach bez dodatkowej pracy.