Klasy rozmiaru okna

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.

Rysunek 1. Reprezentacje klas rozmiaru okna oparte na szerokości.
Rysunek 2. Reprezentacje klas rozmiaru okna zależnego od wysokości.

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
AdaptiveLayoutSnippets.kt

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,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

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:

Aby dowiedzieć się, co sprawia, że aplikacja jest odpowiednia na każde urządzenie i ekran, zobacz:

Wstecz
Obsługa różnych rozmiarów ekranu
Dalej
Obsługa trybu wielu okien