Klasy rozmiaru okna to zbiór określonych punktów przerwania widocznego obszaru, projektowania, opracowywania i testowania układów elastycznych i adaptacyjnych. Bilans punktów przerwania prostota układu i elastyczność pozwalającą optymalizować aplikację pod kątem unikalnych przypadków.
Klasy rozmiaru okna kategoryzują obszar wyświetlania dostępny dla Twojej aplikacji według compact, medium lub expanded (rozwinięty). Sklasyfikowana jest dostępna szerokość i wysokość oddzielnie, więc w każdej chwili okno aplikacji może mieć 2 rozmiary klasy – jedną dla szerokości, a drugą dla wysokości. Dostępna szerokość jest zwykle większa jest ważniejsza niż dostępna wysokość ze względu na powszechność przewijania w pionie. klasa szerokości okna jest prawdopodobnie bardziej odpowiednia dla interfejsu Twojej aplikacji.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_width.png?authuser=9&hl=pl)
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/window-size-classes/window_size_classes_height.png?authuser=9&hl=pl)
Jak widać na ilustracjach, punkty przerwania pozwalają myśleć dalej. o układach w kontekście urządzeń i konfiguracji. Punkt przerwania każdej klasy rozmiaru stanowi większość typowych scenariuszy dotyczących urządzeń, co może być pomocne. gdy zastanawiasz się nad strukturą punktu przerwania, układy.
Klasa rozmiaru | Punkt przerwania | Reprezentacja urządzenia |
---|---|---|
Mała szerokość | szerokość < 600dp | 99,96% telefonów w orientacji pionowej |
Średnia szerokość | 600 dp ≤ szerokość < 840dp | 93,73% tabletów w orientacji pionowej,
większość dużych rozłożonych ekranów wewnętrznych w orientacji pionowej |
Szerokość po rozwinięciu | szerokość ≥ 840 dp | 97,22% tabletów w orientacji poziomej
większość dużych, rozłożonych ekranów wewnętrznych w orientacji poziomej |
Mała wysokość | wysokość < 480dp | 99,78% telefonów w orientacji poziomej |
Średni wzrost | 480 dp ≤ wysokość < 900dp | 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 |
Wizualizacja klas rozmiarów jako urządzeń fizycznych może być przydatna, jednak rozmiar okna klasy nie są wyraźnie określone przez rozmiar ekranu urządzenia. Okno klas rozmiarów nie jest traktowana jako logika typu isTablet. Okno klasy rozmiarów są określane na podstawie rozmiaru okna dostępnego dla aplikacji niezależnie od typu urządzenia, na którym działa aplikacja. Mają one 2 ważne konsekwencje:
Urządzenia fizyczne nie gwarantują konkretnej klasy rozmiaru okna. ilość miejsca na ekranie dostępna dla aplikacji może się różnić od rozmiaru ekranu z różnych powodów. Na urządzeniach mobilnych tryb podzielonego ekranu dzielą ekran między 2 aplikacje. W ChromeOS aplikacje na Androida mogą mogą być wyświetlane w oknach o swobodnej atmosferze, które można dowolnie zmieniać. Urządzenia składane mogą mieć 2 ekrany o różnych rozmiarach. otwierając lub rozkładając urządzenie.
Klasa rozmiaru okna może się zmieniać przez cały okres istnienia aplikacji. Gdy aplikacja jest uruchomiona, zmiany orientacji urządzenia, wielozadaniowość rozłożenie może zmienić ilość dostępnego miejsca na ekranie. Jako klasa rozmiaru okna jest dynamiczna, a interfejs aplikacji powinien odpowiednio się zmienia.
Klasy rozmiaru okna są mapowane na punkty przerwania kompaktowego, średniego i rozwiniętego Układ Material Design wskazówek. używać klas rozmiaru okna do podejmowania ogólnych decyzji dotyczących układu aplikacji, np. podjęcie decyzji o użyciu konkretnego układu kanonicznego, by wykorzystać dodatkowego miejsca na ekranie.
Oblicz bieżącą wartość WindowSizeClass
za pomocą
currentWindowAdaptiveInfo()
funkcja najwyższego poziomu
Biblioteka androidx.compose.material3.adaptive
. Funkcja zwraca
wystąpienie elementu WindowAdaptiveInfo
, które zawiera windowSizeClass
.
przykład pokazuje, jak obliczyć klasę rozmiaru okna i otrzymać
jest aktualizowany po zmianie klasy rozmiaru okna:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Zarządzanie układami z klasami rozmiaru okna
Klasy rozmiaru okna umożliwiają zmianę układu aplikacji jako obszaru wyświetlania dostępnych dla aplikacji, np. gdy urządzenie się składa lub otwiera, zmiany orientacji urządzenia lub rozmiar okna aplikacji w trybie wielu okien. i trybu uzyskiwania zgody.
Zlokalizuj logikę obsługi zmian rozmiaru interfejsu przez przekazanie rozmiaru okna do zagnieżdżonych funkcji kompozycyjnych, tak jak każdy inny stan aplikacji:
@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, /* ... */ ) }
Klasy rozmiaru okna testowego
Gdy wprowadzasz zmiany w układzie, testuj jego zachowanie na oknach wszystkich rozmiarów, zwłaszcza przy małych, średnich i rozwiniętych punktach przerwania.
Jeśli masz już układ na kompaktowe ekrany, najpierw zoptymalizuj układ w przypadku klasy rozmiaru po rozwinięciu, ponieważ ta klasa zapewnia najwięcej miejsca o dodatkowe zmiany w treści i interfejsie. Następnie zdecyduj, jaki układ klasę średniej szerokości; warto rozważyć dodanie specyficznego układu.
Dalsze kroki
Dowiedz się więcej o tym, jak używać klas rozmiaru okna do tworzenia elastycznych/adaptacyjnych układy, zapoznaj się z tymi informacjami:
Układy oparte na funkcji tworzenia wiadomości: obsługa różnych rozmiarów ekranu
w przypadku układów opartych na widokach: elastyczne/adaptacyjne projektowanie z widokami;
Aby dowiedzieć się, co sprawia, że aplikacja jest odpowiednia na każde urządzenie i ekran, zobacz: