Классы размеров окон — это набор точек останова области просмотра, которые помогают проектировать, разрабатывать и тестировать адаптивные макеты. Точки останова сочетают простоту макета с гибкостью оптимизации вашего приложения для уникальных случаев.
Классы размеров окон классифицируют область отображения, доступную вашему приложению, на компактную , среднюю или расширенную . Доступная ширина и высота классифицируются отдельно, поэтому в любой момент времени ваше приложение имеет два класса размеров окон — один для ширины, другой для высоты. Доступная ширина обычно более важна, чем доступная высота из-за повсеместного распространения вертикальной прокрутки, поэтому класс размера окна ширины, вероятно, более актуален для пользовательского интерфейса вашего приложения.
Как показано на рисунках, точки останова позволяют вам продолжать думать о макетах с точки зрения устройств и конфигураций. Каждая точка останова класса размера представляет собой большинство случаев для типичных сценариев устройства, что может быть полезным ориентиром при проектировании макетов на основе точек останова.
| Класс размера | Точка останова | Представление устройства |
|---|---|---|
| Компактная ширина | ширина <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
Управление макетами с помощью классов размеров окон
Классы размеров окон позволяют изменять макет приложения по мере изменения пространства отображения, доступного для вашего приложения, например, когда устройство складывается или разворачивается, меняется ориентация устройства или изменяется размер окна приложения в многооконном режиме.
Локализуйте логику обработки изменений размера дисплея, передав классы размера окна в качестве состояния вложенным составным объектам, как и любое другое состояние приложения:
@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, /* ... */ ) }
Классы размеров тестовых окон
При внесении изменений в макет проверяйте поведение макета во всех размерах окон, особенно при компактной, средней и расширенной ширине точки останова.
Если у вас есть макет для компактных экранов, сначала оптимизируйте его для класса размеров с расширенной шириной, поскольку этот класс размеров предоставляет больше места для дополнительного контента и изменений пользовательского интерфейса. Затем решите, какой макет имеет смысл для класса размеров средней ширины; рассмотрите возможность добавления специализированного макета.
Следующие шаги
Чтобы узнать больше о том, как использовать классы размеров окон для создания адаптивных макетов, см. следующее:
Для макетов на основе Compose: поддержка различных размеров дисплея.
Для макетов на основе представлений: адаптивный дизайн с представлениями.
Чтобы узнать больше о том, что делает приложение отличным на всех устройствах и размерах экрана, см.:
- Перенесите свой пользовательский интерфейс на адаптивные макеты
- Качество приложения на большом экране
Классы размеров окон — это набор точек останова области просмотра, которые помогают проектировать, разрабатывать и тестировать адаптивные макеты. Точки останова сочетают простоту макета с гибкостью оптимизации вашего приложения для уникальных случаев.
Классы размеров окон классифицируют область отображения, доступную вашему приложению, на компактную , среднюю или расширенную . Доступная ширина и высота классифицируются отдельно, поэтому в любой момент времени ваше приложение имеет два класса размеров окон — один для ширины, другой для высоты. Доступная ширина обычно более важна, чем доступная высота из-за повсеместного распространения вертикальной прокрутки, поэтому класс размера окна ширины, вероятно, более актуален для пользовательского интерфейса вашего приложения.
Как показано на рисунках, точки останова позволяют вам продолжать думать о макетах с точки зрения устройств и конфигураций. Каждая точка останова класса размера представляет собой большинство случаев для типичных сценариев устройства, что может быть полезным ориентиром при проектировании макетов на основе точек останова.
| Класс размера | Точка останова | Представление устройства |
|---|---|---|
| Компактная ширина | ширина < 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
Управление макетами с помощью классов размеров окон
Классы размеров окон позволяют изменять макет приложения по мере изменения пространства отображения, доступного для вашего приложения, например, когда устройство складывается или разворачивается, меняется ориентация устройства или изменяется размер окна приложения в многооконном режиме.
Локализуйте логику обработки изменений размера дисплея, передав классы размера окна в качестве состояния вложенным составным объектам, как и любое другое состояние приложения:
@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, /* ... */ ) }
Классы размеров тестовых окон
При внесении изменений в макет проверяйте поведение макета во всех размерах окон, особенно при компактной, средней и расширенной ширине точки останова.
Если у вас есть макет для компактных экранов, сначала оптимизируйте его для класса размеров с расширенной шириной, поскольку этот класс размеров предоставляет больше места для дополнительного контента и изменений пользовательского интерфейса. Затем решите, какой макет имеет смысл для класса размеров средней ширины; рассмотрите возможность добавления специализированного макета.
Следующие шаги
Чтобы узнать больше о том, как использовать классы размеров окон для создания адаптивных макетов, см. следующее:
Для макетов на основе Compose: поддержка различных размеров дисплея.
Для макетов на основе представлений: адаптивный дизайн с представлениями.
Чтобы узнать больше о том, что делает приложение отличным на всех устройствах и размерах экрана, см.:
- Перенесите свой пользовательский интерфейс на адаптивные макеты
- Качество приложения на большом экране