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

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

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

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

Хотя визуализация классов размеров в виде физических устройств может быть полезной, классы размеров окон явно не определяются размером экрана устройства. Классы размеров окон не предназначены для логики типа 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: поддержка различных размеров дисплеев

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

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

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