Используйте классы размеров окон

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

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

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

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

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

Класс размера	Точка останова	Представление устройства
Компактная ширина	ширина <600 дп	99,96% телефонов в портретной ориентации
Средняя ширина	600 dp ≤ ширина < 840 dp	93,73% планшетов в портретной ориентации, самые большие внутренние дисплеи в развернутом виде в портретном режиме
Расширенная ширина	ширина ≥ 840 дп	97,22% планшетов в альбомной ориентации, самые большие развернутые внутренние дисплеи в альбомной ориентации
Компактная высота	высота < 480 дп	99,78% телефонов в альбомной ориентации
Средний рост	480dp ≤ высота < 900dp	96,56% планшетов в альбомной ориентации, 97,59% телефонов в портретной ориентации
Расширенная высота	высота ≥ 900 дп	94,25% планшетов в портретной ориентации

Примечание. Большинство приложений могут создать адаптивный пользовательский интерфейс, учитывая только класс размера окна по ширине.

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

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

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

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

Вычислите текущий WindowSizeClass с помощью функции верхнего уровня currentWindowAdaptiveInfo() библиотеки androidx.compose.material3.adaptive . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . В следующем примере показано, как вычислить класс размера окна и получать обновления при каждом изменении класса размера окна:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

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

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

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

@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

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

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

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

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

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

• Для макетов на основе Compose: поддержка различных размеров дисплея.

• Для макетов на основе представлений: адаптивный дизайн с представлениями.

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

• Перенесите свой пользовательский интерфейс на адаптивные макеты
• Качество приложения на большом экране

,

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

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

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

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

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

Класс размера	Точка останова	Представление устройства
Компактная ширина	ширина < 600 дп	99,96% телефонов в портретной ориентации
Средняя ширина	600dp ≤ ширина < 840dp	93,73% планшетов в портретной ориентации, самые большие внутренние дисплеи в развернутом виде в портретном режиме
Расширенная ширина	ширина ≥ 840 дп	97,22% планшетов в альбомной ориентации, самые большие развернутые внутренние дисплеи в альбомной ориентации
Компактная высота	высота < 480 дп	99,78% телефонов в альбомной ориентации
Средний рост	480dp ≤ высота < 900dp	96,56% планшетов в альбомной ориентации, 97,59% телефонов в портретной ориентации
Расширенная высота	высота ≥ 900 дп	94,25% планшетов в портретной ориентации

Примечание. Большинство приложений могут создать адаптивный пользовательский интерфейс, учитывая только класс размера окна по ширине.

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

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

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

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

Вычислите текущий WindowSizeClass с помощью функции верхнего уровня currentWindowAdaptiveInfo() библиотеки androidx.compose.material3.adaptive . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . В следующем примере показано, как вычислить класс размера окна и получать обновления при каждом изменении класса размера окна:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

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

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

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

@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

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

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

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

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

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

• Для макетов на основе Compose: поддержка различных размеров дисплея.

• Для макетов на основе представлений: адаптивный дизайн с представлениями.

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

• Перенесите свой пользовательский интерфейс на адаптивные макеты
• Качество приложения на большом экране