Классы размеров окон

Классы размеров окна — это набор контрольных точек области просмотра, которые помогают проектировать, разрабатывать и тестировать адаптивные макеты. Точки останова обеспечивают баланс между простотой макета и гибкостью оптимизации вашего приложения для уникальных случаев.

Классы размера окна определяют доступную вашему приложению область отображения: компактную , среднюю , расширенную , большую или очень большую . Доступная ширина и высота классифицируются отдельно, поэтому в любой момент времени у вашего приложения есть два класса размера окна: один для ширины, другой для высоты. Доступная ширина обычно важнее доступной высоты из-за повсеместной вертикальной прокрутки, поэтому класс размера окна «Ширина», вероятно, более релевантен пользовательскому интерфейсу вашего приложения.

Рисунок 1. Представления классов размеров окон по ширине.
Рисунок 2. Представления классов размеров окон по высоте.

Как показано на рисунках, точки останова позволяют продолжить анализ макетов с точки зрения устройств и конфигураций. Каждая точка останова для класса размера представляет собой большинство случаев типичных сценариев использования устройств, что может послужить полезной основой при проектировании макетов с точками останова.

Размерный класс Точка останова Представление устройства
Компактная ширина ширина < 600dp 99,96% телефонов в портретном режиме
Средняя ширина 600dp ≤ ширина < 840dp 93,73% планшетов в портретном режиме,

самые большие развернутые внутренние дисплеи в портретном положении

Расширенная ширина 840dp ≤ ширина < 1200dp 97,22% планшетов в альбомной ориентации,

большинство больших внутренних дисплеев в развернутом виде в альбомной ориентации имеют ширину не менее

Большая ширина 1200dp ≤ ширина < 1600dp Большие планшетные дисплеи
Очень большая ширина ширина ≥ 1600dp Настольные дисплеи
Компактная высота высота < 480dp 99,78% телефонов в горизонтальной ориентации
Средний рост 480dp ≤ высота < 900dp 96,56% планшетов в альбомной ориентации,

97,59% телефонов в портретном режиме

Увеличенная высота высота ≥ 900dp 94,25% планшетов в портретном режиме

Хотя визуализация классов размеров в виде физических устройств может быть полезной, классы размеров окон явно не определяются размером экрана устройства. Классы размеров окон не предназначены для логики типа isTablet . Вместо этого классы размеров окон определяются размером окна, доступным вашему приложению, независимо от типа устройства, на котором оно запущено, что имеет два важных следствия:

  • Физические устройства не гарантируют определённый класс размера окна. Пространство экрана, доступное вашему приложению, может отличаться от размера экрана устройства по многим причинам. На мобильных устройствах режим разделённого экрана может разделить экран между двумя приложениями. В ChromeOS приложения Android могут быть представлены в окнах, подобных окнам настольных компьютеров, размер которых можно произвольно изменять. Складные устройства могут иметь два экрана разного размера, к которым можно получать доступ по отдельности, складывая или раскладывая устройство.

  • Класс размера окна может меняться на протяжении всего жизненного цикла вашего приложения. Во время работы приложения изменение ориентации устройства, многозадачность, а также сворачивание/разворачивание могут изменить объём доступного экранного пространства. Поэтому класс размера окна является динамическим, и пользовательский интерфейс вашего приложения должен адаптироваться соответствующим образом.

Классы размеров окон соответствуют контрольным точкам «компактный», «средний» и «расширенный» в руководстве по компоновке Material Design . Используйте классы размеров окон для принятия высокоуровневых решений по компоновке приложения, например, для определения необходимости использования определённого канонического макета для использования дополнительного пространства на экране.

Compute the current WindowSizeClass using the currentWindowAdaptiveInfo() top‑level function of the androidx.compose.material3.adaptive library. The function returns an instance of WindowAdaptiveInfo, which contains windowSizeClass. The following example shows how to calculate the window size class and receive updates whenever the window size class changes:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

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:

@Composable
fun MyApp(
    windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().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

Тестовые классы размеров окон

При внесении изменений в макет проверяйте поведение макета при всех размерах окна, особенно при компактной, средней и расширенной ширине контрольных точек.

Если у вас уже есть макет для компактных экранов, сначала оптимизируйте его для класса увеличенной ширины, поскольку этот класс предоставляет наибольшее пространство для дополнительного контента и изменений пользовательского интерфейса. Затем определите, какой макет лучше всего подходит для класса средней ширины; рассмотрите возможность добавления специализированного макета.

Следующие шаги

Дополнительную информацию об использовании классов размеров окна для создания адаптивных макетов см. в следующих разделах:

Чтобы узнать больше о том, что делает приложение превосходным на всех устройствах и размерах экрана, см.: