Używanie klas rozmiarów okien

Klasy rozmiarów okien to zestaw opartych na opiniach punktów przerwania widocznego obszaru, które pomagają projektować, tworzyć i testować elastyczne/adaptacyjne układy. Punkty przerwania łączą prostotę układu z elastycznością optymalizacji aplikacji pod kątem unikalnych przypadków.

Klasy rozmiaru okna dzielą obszar wyświetlania dostępny dla aplikacji na kompaktowy, średni, rozszerzony, duży i bardzo duży. Dostępna szerokość i wysokość są klasyfikowane osobno, więc w każdym momencie aplikacja ma 2 klasy rozmiaru okna – jedną dla szerokości i jedną dla wysokości. Dostępna szerokość jest zwykle ważniejsza niż dostępna wysokość ze względu na powszechność przewijania w pionie, więc klasa rozmiaru okna szerokości jest prawdopodobnie bardziej istotna dla interfejsu aplikacji.

Rysunek 1. Reprezentacje klas rozmiarów okien na podstawie szerokości.
Rysunek 2. Ilustracje klas rozmiarów okien opartych na wysokości.

Jak widać na rysunkach, punkty przerwania pozwalają nadal myśleć o układach w kategoriach urządzeń i konfiguracji. Każdy punkt podziału klasy rozmiaru reprezentuje większość typowych scenariuszy urządzeń, co może być przydatnym punktem odniesienia podczas projektowania układów opartych na punktach podziału.

Klasa rozmiaru Punkt przerwania Reprezentacja urządzenia
Szerokość w trybie kompaktowym width < 600dp 99,96% telefonów w trybie pionowym
Średnia szerokość 600 dp ≤ szerokość < 840 dp 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 840dp ≤ szerokość < 1200dp 97,22% tabletów w orientacji poziomej,

większość dużych, rozłożonych wewnętrznych wyświetlaczy w orientacji poziomej ma co najmniej rozszerzoną szerokość
Duża szerokość 1200 dp ≤ szerokość < 1600 dp Duże wyświetlacze tabletów
Bardzo duża szerokość szerokość ≥ 1600 dp Reklamy displayowe na komputery
Wysokość po złożeniu height < 480dp 99,78% telefonów w orientacji poziomej
Średnia wysokość 480 dp ≤ wysokość < 900 dp 96,56% tabletów w orientacji poziomej,

97,59% telefonów w orientacji pionowej
Wysokość po rozwinięciu height ≥ 900dp 94,25% tabletów w orientacji pionowej

Chociaż wizualizacja klas rozmiarów jako urządzeń fizycznych może być przydatna, klasy rozmiarów okien nie są określane przez rozmiar ekranu urządzenia. Klasy rozmiaru okna nie są przeznaczone do logiki typu isTablet. Klasy rozmiaru okna są określane na podstawie rozmiaru okna dostępnego dla aplikacji, niezależnie od typu urządzenia, na którym jest ona uruchomiona. Ma to 2 ważne konsekwencje:

  • Urządzenia fizyczne nie gwarantują określonej klasy rozmiaru okna. Przestrzeń ekranu dostępna dla aplikacji może różnić się od rozmiaru ekranu urządzenia z wielu powodów. Na urządzeniach mobilnych tryb podzielonego ekranu może dzielić ekran między 2 aplikacje. W ChromeOS aplikacje na Androida mogą być wyświetlane w oknach typu desktop, których rozmiar można dowolnie zmieniać. Urządzenia składane mogą mieć 2 ekrany o różnych rozmiarach, do których można uzyskać dostęp osobno, składając lub rozkładając urządzenie.

  • Klasa rozmiaru okna może się zmieniać w trakcie działania aplikacji. Podczas działania aplikacji zmiana orientacji urządzenia, wielozadaniowość i składanie/rozkładanie mogą zmieniać ilość dostępnego miejsca na ekranie. W rezultacie klasa rozmiaru okna jest dynamiczna, a interfejs aplikacji powinien się odpowiednio dostosowywać.

Klasy rozmiarów okien odpowiadają punktom przerwania „kompaktowy”, „średni” i „rozszerzony” w wytycznych dotyczących układu Material Design. Dodaliśmy też duże i bardzo duże punkty przerwania, aby lepiej kierować reklamy na komputery i wyświetlacze podłączone do internetu.

Używaj klas rozmiaru okna, aby podejmować decyzje dotyczące układu aplikacji na wysokim poziomie, np. decydować, czy używać określonego układu kanonicznego, aby wykorzystać dodatkową przestrzeń na ekranie.

使用 androidx.compose.material3.adaptive 库的 currentWindowAdaptiveInfo() 顶级函数计算当前 WindowSizeClass。该函数会返回一个 WindowAdaptiveInfo 实例，其中包含 windowSizeClass。如需支持大型和超大型断点，请向函数调用添加设置为 true 的 supportLargeAndXLargeWidth 参数。以下示例展示了如何计算窗口大小类别，并在窗口大小类别发生变化时随时接收更新：

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

使用窗口大小类别管理布局

通过窗口大小类别，您可以将应用布局更改为显示空间 更改，例如当设备折叠或展开时， 设备屏幕方向发生变化，或者应用窗口在多窗口模式下被调整大小 模式。

通过传递窗口大小，将用于处理显示屏大小变化的逻辑本地化 像任何其他应用状态一样，将类作为状态向下传递到嵌套可组合项：

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true).windowSizeClass
) {
    // Decide whether to show the top app bar based on window size class.
    val showTopAppBar = windowSizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND)

    // MyScreen logic is based on the showTopAppBar boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}
AdaptiveLayoutSnippets.kt

Testowanie klas rozmiarów okien

Wprowadzając zmiany w układzie, testuj jego działanie we wszystkich rozmiarach okna, zwłaszcza w przypadku szerokości punktów przerwania dla układu kompaktowego, średniego i rozszerzonego.

Jeśli masz już układ dla kompaktowych ekranów, najpierw zoptymalizuj go pod kątem klasy rozmiaru o większej szerokości, ponieważ zapewnia ona najwięcej miejsca na dodatkowe treści i zmiany interfejsu. Następnie zdecyduj, który układ będzie odpowiedni dla klasy rozmiaru o średniej szerokości. Możesz też dodać specjalny układ.

Dalsze kroki

Więcej informacji o tym, jak używać klas rozmiaru okna do tworzenia elastycznych układów, znajdziesz w tych artykułach:

Więcej informacji o tym, co sprawia, że aplikacja jest świetna na wszystkich urządzeniach i ekranach o różnych rozmiarach, znajdziesz w tych artykułach:

Wstecz
Obsługa różnych rozmiarów wyświetlaczy
Dalej
Obsługa trybu wielu okien