Klasy rozmiaru okna

Klasy rozmiaru okna to zestaw sprawdzonych punktów przerwania widocznego obszaru, który pomaga w projektowaniu, tworzeniu i testowaniu układów elastycznych/adaptacyjnych. Punkty przerwania równoważą prosty układ z elastycznością optymalizacji aplikacji pod kątem unikalnych przypadków.

Klasy rozmiaru okna dzielą dostępne dla Twojej aplikacji obszary wyświetlania jako kompaktowe, średnie i rozszerzone. Dostępne szerokości i wysokości są klasyfikowane oddzielnie, więc w każdej chwili aplikacja ma 2 klasy rozmiaru okna – jedną dla szerokości i wysokości. Dostępna szerokość jest zwykle ważniejsza niż dostępna wysokość ze względu na wszechobecność przewijania w pionie – klasa „width” (szerokość okna) prawdopodobnie lepiej pasuje do interfejsu aplikacji.

Rysunek 1. Klasy rozmiaru okna oparte na szerokości.
Rysunek 2. Klasy rozmiaru okna oparte na wysokości.

Jak widać na rysunkach, punkty przerwania pozwalają dalej myśleć o układzie urządzeń i konfiguracji. Każdy punkt przerwania klasy rozmiaru odpowiada większości typowych scenariuszy z urządzeniami, co może być punktem odniesienia przy konstruowaniu układów opartych na tych punktach.

Klasa rozmiaru Punkt przerwania Reprezentacja urządzenia
Kompaktowa szerokość szerokość < 600 dp 99,96% telefonów w orientacji pionowej
Średnia szerokość 600 dp ≤ szerokość < 840 dp 93,73% tabletów jest w orientacji pionowej.

najbardziej duże po rozłożeniu wewnętrzne wyświetlacze w orientacji pionowej

Szerokość po rozwinięciu szerokość ≥ 840 dp 97,22% tabletów w orientacji poziomej.

najbardziej duże po rozłożeniu wewnętrzne wyświetlacze w orientacji poziomej

Kompaktowa wysokość wysokość < 480 dp 99,78% telefonów wyświetla się w orientacji poziomej
Średni wzrost 480 dp ≤ wysokość < 900 dp 96,56% tabletów w orientacji poziomej.

97,59% telefonów w orientacji pionowej

Wysokość po rozwinięciu wysokość ≥ 900 dp 94,25% tabletów w orientacji pionowej

Chociaż wizualizowanie klas rozmiarów jako urządzeń fizycznych może być przydatne, klasy rozmiaru okna nie są bezpośrednio określane przez rozmiar ekranu urządzenia. Klasy rozmiaru okna nie są przeznaczone dla logiki typu isTablet. Klasy rozmiaru okna są natomiast określane na podstawie rozmiaru okna dostępnego dla aplikacji niezależnie od typu urządzenia, na którym działa aplikacja, co ma 2 ważne konsekwencje:

  • Urządzenia fizyczne nie gwarantują określonej klasy rozmiaru okna. Miejsce na ekranie dostępne dla aplikacji może z wielu powodów różnić się od rozmiaru ekranu urządzenia. Na urządzeniach mobilnych tryb podzielonego ekranu może partycjonować ekran między 2 aplikacjami. W ChromeOS aplikacje na Androida mogą wyświetlać się w swobodnych oknach, których rozmiar można dowolnie zmieniać. Urządzenia składane mogą mieć 2 ekrany w różnych rozmiarach. Dostęp można uzyskać po złożeniu lub rozłożeniu urządzenia.

  • Klasa rozmiaru okna może zmieniać się przez cały czas używania aplikacji. Ilość dostępnego miejsca na ekranie może zmieniać się przez cały czas używania aplikacji, wykonywanie wielu zadań jednocześnie oraz wykonywanie innych zadań na urządzeniu. W efekcie klasa rozmiaru okna jest dynamiczna, a interfejs aplikacji powinien odpowiednio się dostosowywać.

Klasy rozmiaru okna są mapowane na kompaktowe, średnie i rozwinięte punkty przerwania zgodnie z wskazówkami dotyczącymi układu Material Design. Używaj klas rozmiaru okna, aby podejmować ogólne decyzje dotyczące układu aplikacji, np. określać, czy użyć określonego układu kanonicznego, aby wykorzystać dodatkowe miejsce na ekranie.

You can compute the current WindowSizeClass using the currentWindowAdaptiveInfo top‑level function of the androidx.compose.material3.adaptive library. The following example shows how to calculate the window size class and receive updates whenever the window size class changes:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Manage layouts with window size classes

Window size classes enable you to change your app layout as the display space available to your app changes, for example, when a device folds or unfolds, the device orientation changes, or the app window is resized in multi‑window mode.

Localize the logic for handling display size changes by passing window size classes down as state to nested composables just like any other app state:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
    // Perform logic on the size class to decide whether to show the top app bar.
    val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT

    // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}

Testowe klasy rozmiaru okna

Wprowadzając zmiany układu, przetestuj jego działanie we wszystkich rozmiarach okien, zwłaszcza przy małej, średniej i rozwiniętej szerokości punktów przerwania.

Jeśli masz już układ dostosowany do kompaktowych ekranów, najpierw zoptymalizuj układ pod kątem klasy rozmiaru rozwiniętej szerokości, ponieważ ta klasa zapewnia najwięcej miejsca na dodatkowe treści i zmiany interfejsu. Następnie zdecyduj, jaki układ będzie odpowiedni dla klasy średniej szerokości i zastanów się nad dodaniem specjalistycznego układu.

Dalsze kroki

Więcej informacji o używaniu klas rozmiaru okna do tworzenia układów elastycznych lub adaptacyjnych znajdziesz w tych artykułach:

Więcej informacji o zaletach aplikacji na wszystkich urządzeniach i ekranach znajdziesz w tych artykułach: