Сегодня используется более 300 миллионов устройств Android с большим экраном, включая планшеты, складные устройства, устройства ChromeOS, автомобильные дисплеи и телевизоры, и их количество постоянно увеличивается. Чтобы обеспечить оптимальное взаимодействие с пользователем на растущем количестве и разнообразии устройств с большим экраном, а также на стандартных телефонах, создавайте адаптивные приложения.
Что такое адаптивные приложения?
Адаптивные приложения меняют макеты в зависимости от изменений отображения приложения, в первую очередь размера окна приложения. Но адаптивные приложения также учитывают изменения положения складных устройств, например положение столешницы или книги, а также изменения плотности экрана и размера шрифта.
Вместо того, чтобы просто растягивать или сжимать элементы пользовательского интерфейса в ответ на разные размеры окон, адаптивные приложения заменяют компоненты макета и показывают или скрывают контент. Например, на стандартных телефонах адаптивное приложение может отображать нижнюю панель навигации, а на больших экранах — навигационную панель. На больших экранах адаптивные приложения отображают больше контента, например, в виде двухпанельного подробного списка; на маленьких экранах меньше контента, либо списка, либо деталей.
В быстро угасающем прошлом, ориентированном на телефон, приложения работали в полноэкранном режиме. Сегодня приложения работают в многооконном режиме в окнах произвольного размера, независимо от размера экрана устройства. Пользователи могут изменить размер окна в любое время. Поэтому даже на одном типе устройств приложения должны быть адаптивными.
Адаптивные приложения отлично выглядят и хорошо работают на любом устройстве в любой конфигурации.
Зачем создавать адаптивные пользовательские интерфейсы?
Пользователи ожидают, что ваше приложение будет безупречно работать на всех их устройствах и предоставит расширенные возможности на больших экранах. Пользователи выполняют многозадачность в многооконном режиме для улучшения работы приложений и повышения производительности.
Приложения, ограниченные однозадачностью на стандартных телефонах, упускают из виду расширяющуюся базу пользователей с разнообразными возможностями.
Гугл Плей
Google Play предоставляет коллекции приложений и рекомендации для планшетов и складных устройств, которые позволяют пользователям находить высококачественные приложения.
Play оценивает приложения и игры, оптимизированные для больших экранов, выше, чем неоптимизированные приложения. Рейтинг основан на рекомендациях по обеспечению качества приложений для больших экранов . Более высокий рейтинг повышает видимость, позволяя пользователям нескольких устройств видеть рейтинги и обзоры на больших экранах на своих телефонах.
Приложения, которые не соответствуют стандартам качества большого экрана Play Store, отображают предупреждение на странице сведений о приложении. Предупреждение сообщает пользователям, что приложение может не работать должным образом на их устройствах с большим экраном.
Создавайте адаптивные приложения, чтобы расширить возможности поиска в Google Play и максимально увеличить количество устройств, которые смогут загрузить ваше приложение.
С чего начать
Подумайте об адаптивном дизайне на всех этапах разработки приложения, от планирования до развертывания. Сообщите графическим дизайнерам об адаптивном дизайне. Разработайте свое приложение адаптивным, и вы создадите управляемое, расширяемое и готовое к будущим форм-факторам и оконным режимам.
Чтобы создать адаптивное приложение, поддерживающее все размеры и конфигурации дисплея, выполните следующие действия:
- Используйте классы размеров окон для принятия решений по планировке.
- Создайте с помощью адаптивной библиотеки Compose Material 3.
- Поддержка ввода без прикосновения
- Тестируйте на всех типах устройств
Классы размеров окон
Размеры окна приложения могут различаться на разных устройствах (или на одном и том же устройстве в случае складных устройств), даже если приложение работает в полноэкранном режиме. Различные ориентации устройства создают разные соотношения сторон. В многооконном режиме размер окна приложения, соотношение сторон и ориентация могут отличаться от размера экрана устройства.
Адаптивные приложения упрощают и обобщают проблему определения и управления размером окна, соотношением сторон и ориентацией, рассматривая только окно приложения при отрисовке макетов, что также работает, когда окно приложения является полноэкранным.
Классы размеров окон классифицируют окна приложений как компактные , средние или расширенные в зависимости от ширины или высоты окна.
Вычислите WindowSizeClass вашего приложения с помощью функции верхнего уровня currentWindowAdaptiveInfo() адаптивной библиотеки Compose Material 3 . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . Ваше приложение получает обновления всякий раз, когда изменяется класс размера окна:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Панели содержимого
Макет действия иногда называют экраном . Например, ваше приложение может иметь главный экран, экран списка и экран сведений об элементе. Терминология подразумевает, что каждое действие заполняет экран устройства.
Однако на экранах устройств, которые достаточно велики для поддержки класса размеров окна с увеличенной шириной, одновременно может отображаться несколько экранов активности. Панель — это более точный термин для отображения содержимого отдельных действий.
Классы размеров окон позволяют вам определить, сколько панелей содержимого отображать в многопанельных макетах, как указано в Material Design .
Панели доступны для навигации. В классах с компактными и средними размерами окон приложения отображают одну панель; и поэтому при навигации к любому пункту назначения отображается одна панель.
В классе размеров расширенного окна приложения могут отображать связанный контент на нескольких панелях, например в виде подробного списка. При переходе на любую из панелей отображается двухпанельный макет. Если размер окна изменяется на компактный или средний, адаптивные приложения отображают только одну панель — пункт назначения навигации — список или подробные сведения.
Compose Material 3 Адаптивный
Jetpack Compose — это современный декларативный подход к созданию адаптивных приложений без дублирования и обслуживания нескольких файлов макета.
Библиотека Compose Material 3 Adaptive содержит составные элементы, которые управляют классами размеров окон, компонентами навигации, многопанельными макетами, а также складными положениями и расположением петель, например:
NavigationSuiteScaffold: автоматически переключается между панелью навигации и направляющей в зависимости от класса размера окна приложения и положения устройства.ListDetailPaneScaffold: реализует канонический макет с подробностями списка .Адаптирует макет к размеру окна приложения. Представляет список и сведения об элементе списка на соседних панелях в классе расширенного размера окна, но только список или сведения о классах компактных и средних размеров окон.
SupportingPaneScaffold: реализует канонический макет вспомогательной панели .Представляет основную панель содержимого и вспомогательную панель в классе расширенного размера окна, но только основную панель содержимого в классах компактных и средних размеров окон.
Библиотека Compose Material 3 Adaptive — обязательная зависимость для разработки адаптивных приложений.
Конфигурация и непрерывность
Адаптивные приложения сохраняют непрерывность при изменении конфигурации.
Изменение конфигурации происходит при изменении размера окна приложения, изменении положения складного устройства или изменении плотности экрана или шрифта.
По умолчанию изменения конфигурации воссоздают активность приложения, и все состояния активности теряются. Чтобы обеспечить непрерывность, адаптивные приложения сохраняют состояние в методе действия onSaveInstanceState() или во ViewModel .
Поза
Адаптивные приложения реагируют на изменения положения складных устройств. Позы включают позу стола и книгу.
Интерфейс WindowInfoTracker в Jetpack WindowManager позволяет получить список объектов DisplayFeature для устройства. Среди функций дисплея — FoldingFeature.State , который указывает, полностью или наполовину открыто устройство.
Библиотека Compose Material 3 Adaptive предоставляет функцию верхнего уровня currentWindowAdaptiveInfo() , которая возвращает экземпляр WindowAdaptiveInfo содержащий windowPosture .
Ввод без касания
Пользователи часто подключают внешние клавиатуры, трекпады, мыши и стилусы к устройствам с большим экраном. Периферийные устройства повышают производительность пользователя, точность ввода, индивидуальное самовыражение и доступность. Большинство устройств ChromeOS оснащены встроенными клавиатурами и трекпадами.
Адаптивные приложения поддерживают внешние устройства ввода, но большую часть работы за вас делает платформа Android:
Jetpack Compose 1.7 и более поздних версий: навигация по вкладкам клавиатуры, а также щелчки мышью или трекпадом, выбор и прокрутка поддерживаются по умолчанию.
Библиотека Jetpack
androidx.compose.material3: позволяет пользователям писать в любой компонентTextFieldс помощью стилуса.Помощник по сочетаниям клавиш : делает пользователям доступными сочетания клавиш для платформы Android и приложений. Опубликуйте сочетания клавиш вашего приложения в Помощнике по сочетаниям клавиш, переопределив обратный вызов окна
onProvideKeyboardShortcuts().
Чтобы полностью поддерживать форм-факторы всех размеров, адаптивные приложения поддерживают ввод всех типов.
Как тестировать адаптивные приложения
Протестируйте разные размеры экрана и окон , а также разные конфигурации устройств. Используйте снимки экрана на стороне хоста и предварительные просмотры Compose, чтобы проверить макеты приложений. Запускайте свое приложение на эмуляторах Android Studio и удаленных устройствах Android, размещенных в центрах обработки данных Google.
Рекомендации по обеспечению качества приложений для большого экрана
Рекомендации по обеспечению качества приложений для большого экрана гарантируют, что ваше адаптивное приложение будет хорошо работать на планшетах, складных устройствах и устройствах ChromeOS. Рекомендации включают тесты, которые позволяют проверить функциональность приложения на критически важных этапах взаимодействия с пользователем. Хотя рекомендации ориентированы на большие экраны, они совместимы со всеми размерами экранов.
Несколько конфигураций
Интерфейс DeviceConfigurationOverride в Compose 1.7 и более поздних версиях позволяет переопределить различные аспекты конфигурации устройства. API моделирует различные конфигурации устройств локализованным способом для любого составного контента, который вы хотите протестировать. Например, вы можете протестировать несколько произвольных размеров пользовательского интерфейса за один запуск набора тестов на одном устройстве или эмуляторе.
С помощью функции расширения DeviceConfigurationOverride.then() вы можете одновременно тестировать несколько параметров конфигурации, таких как размер шрифта, языковой стандарт, тема и размер макета.
Скриншоты на стороне хоста
Скриншот-тесты на стороне хоста — это быстрый и масштабируемый способ проверки внешнего вида макетов вашего приложения. Используйте снимки экрана на стороне хоста, чтобы протестировать свой пользовательский интерфейс на экранах различных размеров.
Дополнительные сведения см. в разделе Тестирование создания скриншотов предварительного просмотра .
Создание превью
Предварительный просмотр компоновки позволяет вам проверить пользовательский интерфейс вашего приложения в представлении дизайна Android Studio. В предварительном просмотре используются аннотации, такие как @PreviewScreenSizes , @PreviewFontScale и @PreviewLightDark , чтобы вы могли видеть составной контент в различных конфигурациях. Вы даже можете взаимодействовать с превью.
Android Studio также выделяет общие проблемы с удобством использования в предварительном просмотре, такие как слишком широкие кнопки или текстовые поля.
Дополнительные сведения см. в разделе Предварительный просмотр пользовательского интерфейса с помощью составных предпросмотров .
Эмуляторы
Android Studio предлагает множество эмуляторов для тестирования макетов разных размеров:
- Эмулятор изменяемого размера: эмулирует телефон, планшет или складное устройство и позволяет переключаться между ними на лету.
- Эмулятор Pixel Fold: эмулирует складной телефон Pixel Fold с большим экраном.
- Эмулятор Pixel Tablet: эмулирует устройство с большим экраном Pixel Tablet.
- Эмулятор рабочего стола: позволяет тестировать окна произвольной формы, наведение мыши и сочетания клавиш.
Потоковая передача с удаленного устройства
Безопасно подключайтесь к удаленным устройствам Android, размещенным в центрах обработки данных Google, и запускайте свое приложение на новейших устройствах Pixel и Samsung. Устанавливайте и отлаживайте приложения, запускайте команды ADB, поворачивайте и складывайте устройства, чтобы ваше приложение хорошо работало на различных реальных устройствах.
Потоковая передача с удаленного устройства интегрирована в Android Studio. Дополнительную информацию см. в разделе «Потоковая передача данных с устройств Android на базе Firebase» .
Дополнительные ресурсы
- Презентация ввода-вывода: создание адаптивных приложений для Android
Сегодня используется более 300 миллионов устройств Android с большим экраном, включая планшеты, складные устройства, устройства ChromeOS, автомобильные дисплеи и телевизоры, и их количество постоянно увеличивается. Чтобы обеспечить оптимальное взаимодействие с пользователем на растущем количестве и разнообразии устройств с большим экраном, а также на стандартных телефонах, создавайте адаптивные приложения.
Что такое адаптивные приложения?
Адаптивные приложения меняют макеты в зависимости от изменений отображения приложения, в первую очередь размера окна приложения. Но адаптивные приложения также учитывают изменения положения складных устройств, например положение столешницы или книги, а также изменения плотности экрана и размера шрифта.
Вместо того, чтобы просто растягивать или сжимать элементы пользовательского интерфейса в ответ на разные размеры окон, адаптивные приложения заменяют компоненты макета и показывают или скрывают контент. Например, на стандартных телефонах адаптивное приложение может отображать нижнюю панель навигации, а на больших экранах — навигационную панель. На больших экранах адаптивные приложения отображают больше контента, например, в виде двухпанельного подробного списка; на маленьких экранах меньше контента, либо списка, либо деталей.
В быстро угасающем прошлом, ориентированном на телефон, приложения работали в полноэкранном режиме. Сегодня приложения работают в многооконном режиме в окнах произвольного размера, независимо от размера экрана устройства. Пользователи могут изменить размер окна в любое время. Таким образом, даже на одном типе устройств приложения должны быть адаптивными.
Адаптивные приложения отлично выглядят и хорошо работают на любом устройстве в любой конфигурации.
Зачем создавать адаптивные пользовательские интерфейсы?
Пользователи ожидают, что ваше приложение будет безупречно работать на всех их устройствах и предоставит расширенные возможности на больших экранах. Пользователи выполняют многозадачность в многооконном режиме для улучшения работы приложений и повышения производительности.
Приложения, ограниченные однозадачностью на стандартных телефонах, упускают из виду расширяющуюся базу пользователей с разнообразными возможностями.
Гугл Плей
Google Play предоставляет коллекции приложений и рекомендации для планшетов и складных устройств, которые позволяют пользователям находить высококачественные приложения.
Play оценивает приложения и игры, оптимизированные для больших экранов, выше, чем неоптимизированные приложения. Рейтинг основан на рекомендациях по обеспечению качества приложений для больших экранов . Более высокий рейтинг повышает видимость, позволяя пользователям нескольких устройств видеть рейтинги и обзоры на больших экранах на своих телефонах.
Приложения, которые не соответствуют стандартам качества большого экрана Play Store, отображают предупреждение на странице сведений о приложении. Предупреждение сообщает пользователям, что приложение может не работать должным образом на их устройствах с большим экраном.
Создавайте адаптивные приложения, чтобы расширить возможности поиска в Google Play и максимально увеличить количество устройств, которые смогут загрузить ваше приложение.
С чего начать
Подумайте об адаптивном дизайне на всех этапах разработки приложения, от планирования до развертывания. Сообщите графическим дизайнерам об адаптивном дизайне. Разработайте свое приложение адаптивным, и вы создадите управляемое, расширяемое и готовое к будущим форм-факторам и оконным режимам.
Чтобы создать адаптивное приложение, поддерживающее все размеры и конфигурации дисплея, выполните следующие действия:
- Используйте классы размеров окон для принятия решений по планировке.
- Создайте с помощью адаптивной библиотеки Compose Material 3.
- Поддержка ввода без прикосновения
- Тестируйте на всех типах устройств
Классы размеров окон
Размеры окна приложения могут различаться на разных устройствах (или на одном и том же устройстве в случае складных устройств), даже если приложение работает в полноэкранном режиме. Различные ориентации устройства создают разные соотношения сторон. В многооконном режиме размер окна приложения, соотношение сторон и ориентация могут отличаться от размера экрана устройства.
Адаптивные приложения упрощают и обобщают проблему определения и управления размером окна, соотношением сторон и ориентацией, рассматривая только окно приложения при отрисовке макетов, что также работает, когда окно приложения является полноэкранным.
Классы размеров окон классифицируют окна приложений как компактные , средние или расширенные в зависимости от ширины или высоты окна.
Вычислите WindowSizeClass вашего приложения с помощью функции верхнего уровня currentWindowAdaptiveInfo() адаптивной библиотеки Compose Material 3 . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . Ваше приложение получает обновления всякий раз, когда изменяется класс размера окна:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Панели содержимого
Макет действия иногда называют экраном . Например, ваше приложение может иметь главный экран, экран списка и экран сведений об элементе. Терминология подразумевает, что каждое действие заполняет экран устройства.
Однако на экранах устройств, которые достаточно велики для поддержки класса размеров окна с увеличенной шириной, одновременно может отображаться несколько экранов активности. Панель — это более точный термин для отображения содержимого отдельных действий.
Классы размеров окон позволяют вам определить, сколько панелей содержимого отображать в многопанельных макетах, как указано в Material Design .
Панели доступны для навигации. В классах компактных и средних размеров окон приложения отображают одну панель; и поэтому при навигации к любому пункту назначения отображается одна панель.
В классе размеров расширенного окна приложения могут отображать связанный контент на нескольких панелях, например в виде подробного списка. При переходе на любую из панелей отображается двухпанельный макет. Если размер окна изменяется на компактный или средний, адаптивные приложения отображают только одну панель — пункт назначения навигации — список или подробные сведения.
Compose Material 3 Адаптивный
Jetpack Compose — это современный декларативный подход к созданию адаптивных приложений без дублирования и обслуживания нескольких файлов макета.
Библиотека Compose Material 3 Adaptive содержит составные элементы, которые управляют классами размеров окон, компонентами навигации, многопанельными макетами, а также складными положениями и расположением петель, например:
NavigationSuiteScaffold: автоматически переключается между панелью навигации и направляющей в зависимости от класса размера окна приложения и положения устройства.ListDetailPaneScaffold: реализует канонический макет с подробностями списка .Адаптирует макет к размеру окна приложения. Представляет список и сведения об элементе списка на соседних панелях в классе расширенного размера окна, но только список или сведения о классах компактных и средних размеров окон.
SupportingPaneScaffold: реализует канонический макет вспомогательной панели .Представляет основную панель содержимого и вспомогательную панель в классе расширенного размера окна, но только основную панель содержимого в классах компактных и средних размеров окон.
Библиотека Compose Material 3 Adaptive — обязательная зависимость для разработки адаптивных приложений.
Конфигурация и непрерывность
Адаптивные приложения сохраняют непрерывность при изменении конфигурации.
Изменение конфигурации происходит при изменении размера окна приложения, изменении положения складного устройства или изменении плотности экрана или шрифта.
По умолчанию изменения конфигурации воссоздают активность приложения, и все состояния активности теряются. Чтобы обеспечить непрерывность, адаптивные приложения сохраняют состояние в методе действия onSaveInstanceState() или во ViewModel .
Поза
Адаптивные приложения реагируют на изменения положения складных устройств. Позы включают позу стола и книгу.
Интерфейс WindowInfoTracker в Jetpack WindowManager позволяет получить список объектов DisplayFeature для устройства. Среди функций дисплея — FoldingFeature.State , который указывает, полностью или наполовину открыто устройство.
Библиотека Compose Material 3 Adaptive предоставляет функцию верхнего уровня currentWindowAdaptiveInfo() , которая возвращает экземпляр WindowAdaptiveInfo содержащий windowPosture .
Ввод без касания
Пользователи часто подключают внешние клавиатуры, трекпады, мыши и стилусы к устройствам с большим экраном. Периферийные устройства повышают производительность пользователя, точность ввода, индивидуальное самовыражение и доступность. Большинство устройств ChromeOS оснащены встроенными клавиатурами и трекпадами.
Адаптивные приложения поддерживают внешние устройства ввода, но большую часть работы за вас делает платформа Android:
Jetpack Compose 1.7 и более поздних версий: навигация по вкладкам клавиатуры, а также щелчки мышью или трекпадом, выбор и прокрутка поддерживаются по умолчанию.
Библиотека Jetpack
androidx.compose.material3: позволяет пользователям писать в любой компонентTextFieldс помощью стилуса.Помощник по сочетаниям клавиш : делает пользователям доступными сочетания клавиш для платформы Android и приложений. Опубликуйте сочетания клавиш вашего приложения в Помощнике по сочетаниям клавиш, переопределив обратный вызов окна
onProvideKeyboardShortcuts().
Чтобы полностью поддерживать форм-факторы всех размеров, адаптивные приложения поддерживают ввод всех типов.
Как тестировать адаптивные приложения
Протестируйте разные размеры экрана и окон , а также разные конфигурации устройств. Используйте снимки экрана на стороне хоста и предварительные просмотры Compose, чтобы проверить макеты приложений. Запускайте свое приложение на эмуляторах Android Studio и удаленных устройствах Android, размещенных в центрах обработки данных Google.
Рекомендации по обеспечению качества приложений для большого экрана
Рекомендации по обеспечению качества приложений для большого экрана гарантируют, что ваше адаптивное приложение будет хорошо работать на планшетах, складных устройствах и устройствах ChromeOS. Рекомендации включают тесты, которые позволяют проверить функциональность приложения на критически важных этапах взаимодействия с пользователем. Хотя рекомендации ориентированы на большие экраны, они совместимы со всеми размерами экранов.
Несколько конфигураций
Интерфейс DeviceConfigurationOverride в Compose 1.7 и более поздних версиях позволяет переопределить различные аспекты конфигурации устройства. API моделирует различные конфигурации устройств локализованным способом для любого составного контента, который вы хотите протестировать. Например, вы можете протестировать несколько произвольных размеров пользовательского интерфейса за один запуск набора тестов на одном устройстве или эмуляторе.
С помощью функции расширения DeviceConfigurationOverride.then() вы можете одновременно тестировать несколько параметров конфигурации, таких как размер шрифта, языковой стандарт, тема и размер макета.
Скриншоты на стороне хоста
Скриншот-тесты на стороне хоста — это быстрый и масштабируемый способ проверки внешнего вида макетов вашего приложения. Используйте снимки экрана на стороне хоста, чтобы протестировать свой пользовательский интерфейс на экранах различных размеров.
Дополнительные сведения см. в разделе Тестирование создания скриншотов предварительного просмотра .
Создание превью
Предварительный просмотр компоновки позволяет вам проверить пользовательский интерфейс вашего приложения в представлении дизайна Android Studio. В предварительном просмотре используются аннотации, такие как @PreviewScreenSizes , @PreviewFontScale и @PreviewLightDark , чтобы вы могли видеть составной контент в различных конфигурациях. Вы даже можете взаимодействовать с превью.
Android Studio также выделяет общие проблемы с удобством использования в предварительном просмотре, такие как слишком широкие кнопки или текстовые поля.
Дополнительные сведения см. в разделе Предварительный просмотр пользовательского интерфейса с помощью составных предпросмотров .
Эмуляторы
Android Studio предлагает множество эмуляторов для тестирования макетов разных размеров:
- Эмулятор изменяемого размера: эмулирует телефон, планшет или складное устройство и позволяет переключаться между ними на лету.
- Эмулятор Pixel Fold: эмулирует складной телефон Pixel Fold с большим экраном.
- Эмулятор Pixel Tablet: эмулирует устройство с большим экраном Pixel Tablet.
- Эмулятор рабочего стола: позволяет тестировать окна произвольной формы, наведение мыши и сочетания клавиш.
Потоковая передача с удаленного устройства
Безопасно подключайтесь к удаленным устройствам Android, размещенным в центрах обработки данных Google, и запускайте свое приложение на новейших устройствах Pixel и Samsung. Устанавливайте и отлаживайте приложения, запускайте команды ADB, поворачивайте и складывайте устройства, чтобы ваше приложение хорошо работало на различных реальных устройствах.
Потоковая передача с удаленных устройств интегрирована в Android Studio. Дополнительную информацию см. в разделе «Потоковая передача данных с устройств Android на базе Firebase» .
Дополнительные ресурсы
- Презентация ввода-вывода: создание адаптивных приложений для Android
Сегодня используется более 300 миллионов устройств Android с большим экраном, включая планшеты, складные устройства, устройства ChromeOS, автомобильные дисплеи и телевизоры, и их количество постоянно увеличивается. Чтобы обеспечить оптимальное взаимодействие с пользователем на растущем количестве и разнообразии устройств с большим экраном, а также на стандартных телефонах, создавайте адаптивные приложения.
Что такое адаптивные приложения?
Адаптивные приложения меняют макеты в зависимости от изменений отображения приложения, в первую очередь размера окна приложения. Но адаптивные приложения также учитывают изменения положения складных устройств, например положение столешницы или книги, а также изменения плотности экрана и размера шрифта.
Вместо того, чтобы просто растягивать или сжимать элементы пользовательского интерфейса в зависимости от размера окна, адаптивные приложения заменяют компоненты макета и показывают или скрывают контент. Например, на стандартных телефонах адаптивное приложение может отображать нижнюю панель навигации, а на больших экранах — навигационную панель. На больших экранах адаптивные приложения отображают больше контента, например, в виде двухпанельного подробного списка; на маленьких экранах меньше контента, либо списка, либо деталей.
В быстро угасающем прошлом, ориентированном на телефон, приложения работали в полноэкранном режиме. Сегодня приложения работают в многооконном режиме в окнах произвольного размера, независимо от размера экрана устройства. Пользователи могут изменить размер окна в любое время. Поэтому даже на одном типе устройств приложения должны быть адаптивными.
Адаптивные приложения отлично выглядят и хорошо работают на любом устройстве в любой конфигурации.
Зачем создавать адаптивные пользовательские интерфейсы?
Пользователи ожидают, что ваше приложение будет безупречно работать на всех их устройствах и предоставит расширенные возможности на больших экранах. Пользователи выполняют многозадачность в многооконном режиме для улучшения работы приложений и повышения производительности.
Приложения, ограниченные однозадачностью на стандартных телефонах, упускают из виду расширяющуюся базу пользователей с разнообразными возможностями.
Гугл Плей
Google Play предоставляет коллекции приложений и рекомендации для планшетов и складных устройств, которые позволяют пользователям находить высококачественные приложения.
Play оценивает приложения и игры, оптимизированные для больших экранов, выше, чем неоптимизированные приложения. Рейтинг основан на рекомендациях по обеспечению качества приложений для больших экранов . Более высокий рейтинг повышает видимость, позволяя пользователям нескольких устройств видеть рейтинги и обзоры на больших экранах на своих телефонах.
Приложения, которые не соответствуют стандартам качества большого экрана Play Store, отображают предупреждение на странице сведений о приложении. Предупреждение сообщает пользователям, что приложение может не работать должным образом на их устройствах с большим экраном.
Создавайте адаптивные приложения, чтобы расширить возможности поиска в Google Play и максимально увеличить количество устройств, которые смогут загрузить ваше приложение.
С чего начать
Подумайте об адаптивном дизайне на всех этапах разработки приложения, от планирования до развертывания. Сообщите графическим дизайнерам об адаптивном дизайне. Разработайте свое приложение адаптивным, и вы создадите управляемое, расширяемое и готовое к будущим форм-факторам и оконным режимам.
Чтобы создать адаптивное приложение, поддерживающее все размеры и конфигурации дисплея, выполните следующие действия:
- Используйте классы размеров окон для принятия решений по компоновке
- Создайте с помощью адаптивной библиотеки Compose Material 3.
- Поддержка ввода без прикосновения
- Тестируйте на всех типах устройств
Классы размеров окон
Размеры окна приложения могут различаться на разных устройствах (или на одном и том же устройстве в случае складных устройств), даже если приложение работает в полноэкранном режиме. Различные ориентации устройства создают разные соотношения сторон. В многооконном режиме размер окна приложения, соотношение сторон и ориентация могут отличаться от размера экрана устройства.
Адаптивные приложения упрощают и обобщают проблему определения и управления размером окна, соотношением сторон и ориентацией, рассматривая только окно приложения при отрисовке макетов, что также работает, когда окно приложения является полноэкранным.
Классы размеров окон классифицируют окна приложений как компактные , средние или расширенные в зависимости от ширины или высоты окна.
Вычислите WindowSizeClass вашего приложения с помощью функции верхнего уровня currentWindowAdaptiveInfo() адаптивной библиотеки Compose Material 3 . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . Ваше приложение получает обновления всякий раз, когда изменяется класс размера окна:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Панели содержимого
Макет действия иногда называют экраном . Например, ваше приложение может иметь главный экран, экран списка и экран сведений об элементе. Терминология подразумевает, что каждое действие заполняет экран устройства.
Однако на экранах устройств, которые достаточно велики для поддержки класса размеров окна с увеличенной шириной, одновременно может отображаться несколько экранов активности. Панель — это более точный термин для отображения содержимого отдельных действий.
Классы размеров окон позволяют вам определить, сколько панелей содержимого отображать в многопанельных макетах, как указано в Material Design .
Панели доступны для навигации. В классах с компактными и средними размерами окон приложения отображают одну панель; и поэтому при навигации к любому пункту назначения отображается одна панель.
В классе размеров расширенного окна приложения могут отображать связанный контент на нескольких панелях, например в виде подробного списка. При переходе на любую из панелей отображается двухпанельный макет. Если размер окна изменяется на компактный или средний, адаптивные приложения отображают только одну панель — пункт назначения навигации — список или подробные сведения.
Compose Material 3 Адаптивный
Jetpack Compose — это современный декларативный подход к созданию адаптивных приложений без дублирования и обслуживания нескольких файлов макета.
Библиотека Compose Material 3 Adaptive содержит составные элементы, которые управляют классами размеров окон, компонентами навигации, многопанельными макетами, а также складными положениями и расположением петель, например:
NavigationSuiteScaffold: автоматически переключается между панелью навигации и направляющей в зависимости от класса размера окна приложения и положения устройства.ListDetailPaneScaffold: реализует канонический макет с подробностями списка .Адаптирует макет к размеру окна приложения. Представляет список и сведения об элементе списка на соседних панелях в классе расширенного размера окна, но только список или сведения о классах компактных и средних размеров окон.
SupportingPaneScaffold: реализует канонический макет вспомогательной панели .Представляет основную панель содержимого и вспомогательную панель в классе расширенного размера окна, но только основную панель содержимого в классах компактных и средних размеров окон.
Адаптивная библиотека Compose Material 3 является обязательной зависимостью для разработки адаптивных приложений.
Конфигурация и непрерывность
Адаптивные приложения сохраняют непрерывность во время изменений конфигурации.
Изменение конфигурации происходит при изменении окна приложения, осанка складных изменений или плотность экрана или изменения шрифта.
По умолчанию изменения конфигурации воссоздают активность приложения, и все состояние деятельности теряется. Для поддержания непрерывности адаптивные приложения сохраняют состояние в методе деятельности onSaveInstanceState() или в ViewModel .
Поза
Адаптивные приложения реагируют на изменения в положении складных устройств. Позы включают настольную и книжную осанку.
Интерфейс WindowInfoTracker в JetPack Windowmanager позволяет получить список объектов DisplayFeature для устройства. Среди функций дисплея - FoldingFeature.State , что указывает, является ли устройство полностью или наполовину открыто.
Адаптивная библиотека Compose Material 3 обеспечивает функцию топового уровня currentWindowAdaptiveInfo() , которая возвращает экземпляр WindowAdaptiveInfo содержащей windowPosture .
Ввод за пределы прикосновения
Пользователи часто подключают внешние клавиатуры, трекпады, мыши и стилусы с большими экранными устройствами. Периферийные устройства повышают производительность пользователей, точность ввода, личное выражение и доступность. Большинство устройств Chromeos поставляются со встроенными клавиатурами и трекпадами.
Адаптивные приложения поддерживают устройства внешнего ввода, но большая часть работы выполнена для вас Android Framework:
JetPack Compose 1.7 и выше: навигация по клавиатуре, а по умолчанию поддерживаются навигация по клавиатуре, а также мышь или трекпад.
JetPack
androidx.compose.material3Библиотека: позволяет пользователям писать в любой компонентTextFieldиспользуя стилус.Комплект клавиатуры Helper : делает Android платформу и сочетания клавишных приложений обнаруженными пользователями. Опубликуйте сочетание клавиш вашего приложения в Helper stoppers, переоценив обратный вызов окна
onProvideKeyboardShortcuts().
Чтобы полностью поддерживать форм -факторы всех размеров, адаптивные приложения поддерживают ввод всех типов.
Как проверить адаптивные приложения
Проверьте разные размеры экрана и окна и различные конфигурации устройства. Используйте скриншоты хоста и составьте предварительные просмотра для проверки макетов приложения. Запустите свое приложение на эмуляторах Android Studio и удаленных устройствах Android, размещенных в центрах обработки данных Google.
Рекомендации по качеству приложения с большим экраном
Рекомендации по качеству приложения с большим экраном гарантируют, что ваше адаптивное приложение хорошо работает на планшетах, складных устройствах и устройствах ChromeoS. Руководящие принципы включают тесты, которые позволяют вам проверить функциональность приложений для критических поездок пользователей. Хотя руководящие принципы сосредоточены на больших экранах, они совместимы со всеми размерами экрана.
Несколько конфигураций
Интерфейс DeviceConfigurationOverride в Compose 1.7 и выше позволяет переопределять различные аспекты конфигурации устройства. API имитирует различные конфигурации устройства локализованным способом для любого композиционного контента, который вы хотите протестировать. Например, вы можете протестировать несколько произвольных размеров пользовательского интерфейса в одном заезде вашего тестового набора на одном устройстве или эмуляторе.
С помощью функции расширения DeviceConfigurationOverride.then() вы можете проверить несколько параметров конфигурации, таких как размер шрифта, локаль, тема и размер макета, все одновременно.
Скриншоты на стороне хоста
Тесты экрана на стороне хоста представляют собой быстрый и масштабируемый способ проверки визуального внешнего вида макетов вашего приложения. Используйте скриншоты на стороне хоста, чтобы проверить свой пользовательский интерфейс для различных размеров дисплея.
Для получения дополнительной информации см. Compose Preview Screenshot Testing .
Составьте предварительные просмотра
Составьте предварительные просмотра, позволяйте вам проверить пользовательский интерфейс вашего приложения в дизайне Android Studio. Предварительные просмотра используют аннотации, такие как @PreviewScreenSizes , @PreviewFontScale и @PreviewLightDark , чтобы позволить вам увидеть композиционный контент в различных конфигурациях. Вы даже можете взаимодействовать с предварительными просмотрами.
Android Studio также выделяет общие проблемы с юзабилити в предварительных просмотрах, такие как кнопки или текстовые полки, которые слишком широки.
Для получения дополнительной информации см. Предварительный просмотр вашего пользовательского интерфейса с помощью композиционных предварительных просмотров .
Эмуляторы
Android Studio предлагает различные эмуляторы для тестирования различных размеров макета:
- Пометяемый эмулятор: эмулирует телефон, планшет или складываемое устройство и позволяет переключаться между ними на лету
- Пиксельный складной эмулятор: эмулирует большой складной телефон Pixel Fold
- Пиксельный планшет эмулятор: эмулирует устройство с большим экраном Pixel
- Эмулятор рабочего стола: включает тестирование окна в свободной форме, прокат мыши и сочетания клавиш
Потоковая передача удаленного устройства
Безопасно подключайтесь к удаленным устройствам Android, размещенным в центрах обработки данных Google, и запустите ваше приложение на последних устройствах Pixel и Samsung. Установите и отлаживает приложения, запустите команды ADB и поверните и складывайте устройства, чтобы убедиться, что ваше приложение хорошо работает на различных реальных устройствах.
Потоковая передача удаленного устройства интегрирована в Android Studio. Для получения дополнительной информации см. Потоковую потоковую передачу устройства Android, питание от Firebase .
Дополнительные ресурсы
- Презентация ввода/вывода: создание адаптивных приложений для Android
Сегодня используются более 300 миллионов больших экранных устройств Android, включая планшеты, складные устройства, устройства Chromeos, автомобильные дисплеи и телевизоры, причем больше постоянно появляется. Чтобы обеспечить оптимальный пользовательский опыт на растущее число и разнообразие больших экранов , а также на стандартных телефонах - создания адаптивных приложений.
Что такое адаптивные приложения?
Адаптивные приложения изменяют макеты на основе изменений на дисплее приложения, в первую очередь размером окна приложения. Но адаптивные приложения также приспосабливаются к изменениям в положении складных устройств, таких как настольная или книжная осанка, а также изменения в плотности экрана и размере шрифта.
Вместо того, чтобы просто растягивать или сокращать элементы пользовательского интерфейса в ответ на разные размеры окна, адаптивные приложения заменяют компоненты макета и показывают или скрывают контент. Например, на стандартных телефонах адаптивное приложение может отображать нижнюю навигационную панель, но на больших экранах, навигационной рельсы. На больших экранах адаптивные приложения отображают больше контента, такого как двухсторонний макет Detail; На небольших экранах, меньше контента, либо списка, либо детали.
В прошлом пострадавшего, ориентированного на телефонные, приложения работали за полным экраном. Сегодня приложения запускаются в режиме с несколькими Window в произвольно размером Windows, независимо от размера экрана устройства. Пользователи могут изменить размер окна в любое время. Таким образом, даже на одном типе устройства приложения должны быть адаптивными.
Адаптивные приложения выглядят великолепно и хорошо работают на любом устройстве в любой конфигурации.
Зачем строить адаптивные интерфейсы?
Пользователи ожидают, что ваше приложение будет безупречно функционировать на всех своих устройствах и предоставит расширенные возможности на больших экранах. Пользователи многозадачно в режиме с несколькими окнами для улучшенного опыта приложений и повышения производительности.
Приложения, ограниченные однозначными задачами на стандартных телефонах, упускают расширяющуюся пользовательскую базу различных возможностей.
Гугл Плей
Google Play предоставляет планшетные и складные коллекции и рекомендации приложений, которые позволяют пользователям обнаруживать высококачественные приложения.
Воспроизведение приложений и игр, оптимизированных для больших экранов выше, это нептимизированные приложения. Ранжирование основано на крупных рекомендациях по качеству приложения . Более высокий рейтинг повышает обнаруженность, позволяя пользователям с несколькими падежкой видеть большие специфические оценки и обзоры на своих телефонах.
Приложения, которые не соответствуют большим стандартам качества качества Play Store, отображают предупреждение на странице сведений о приложениях. Предупреждение советует пользователям, что приложение может плохо работать на своих больших экранных устройствах.
Создайте адаптивные приложения, чтобы расширить обнаружение в Google Play и максимизировать количество устройств, которые могут загрузить ваше приложение.
Как начать
Подумайте об адаптивном дизайне на всех этапах разработки приложений от планирования до развертывания. Информировать графические дизайнеры о адаптивном дизайне. Разработайте ваше приложение, чтобы быть адаптивным, и вы создадите приложение, которое управляемое, расширяемое и готовое к будущим форм -факторам и режимам окон.
Чтобы создать адаптивное приложение, которое поддерживает все размеры отображения и конфигурации, сделайте следующее:
- Используйте классы размера окна для принятия решений макета
- Постройте с помощью адаптивной библиотеки Compose Material 3
- Поддержка ввода за пределы прикосновения
- Проверьте на всех типах устройств
Классы размера окна
Размеры окна приложения могут отличаться на разных устройствах - или на одном и том же устройстве в случае сгибаемых - даже когда приложение является полным экраном. Различные ориентации устройства создают разные соотношения сторон. В режиме с несколькими ветрами размер окна приложения, соотношение сторон и ориентация могут отличаться от экрана устройства.
Адаптивные приложения упрощают и обобщают проблему определения и управления размером окна, соотношением сторон и ориентации, рассматривая только окно приложения при рендеринге, что также работает, когда окно приложения является полным экраном.
Классы размера окна классифицируют окна приложений как компактные , средние или расширенные на основе ширины или высоты окна.
Вычислите WindowSizeClass вашего приложения, используя функцию высшего уровня currentWindowAdaptiveInfo() адаптивной библиотеки Compose Material 3 . Функция возвращает экземпляр WindowAdaptiveInfo , который содержит windowSizeClass . Ваше приложение получает обновления, когда меняется класс размера окна:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Контентные панели
Макет деятельности иногда называют экраном . Например, в вашем приложении может быть домашний экран, экран списка и экран детализации элемента. Терминология подразумевает, что каждая деятельность заполняет экран устройства.
Тем не менее, на экранах устройств, которые достаточно большие, чтобы поддержать расширенный класс размера ширины, несколько экранов активности могут быть на экране одновременно. Панель - более точный термин для контент -дисплеев отдельных действий.
Классы размера окна позволяют определить, сколько панировки контента можно отобразить в многопанках, как указано в дизайне материала .
Панели судоходны. На компактных и средних классах размера окна приложения отображают одну панель; Итак, навигация по любому назначению отображает одну панель.
В расширенном классе размера окна приложения могут отображать связанный контент в нескольких панелях, таких как макет списка. Навигация по панели отображает двухэтапную макет. Если размер окна меняется на компактный или средний, адаптивные приложения показывают только одну панель, навигационное место, либо список, либо детали.
Составьте материал 3 адаптивные
JetPack Compose - это современный, декларативный подход к созданию адаптивных приложений без дублирования и технического обслуживания множества файлов макета.
Адаптивная библиотека Compose Material 3 содержит композиции, которые управляют классами размера окна, навигационными компонентами, многофункциональными макетами и складными позами и местоположением шарниров, например:
NavigationSuiteScaffold: автоматически переключается между навигационной панелью и навигационной рельсом в зависимости от класса окна приложения и положения устройства.ListDetailPaneScaffold: реализует канонический макет списка-detail .Адаптирует макет к размеру окна приложения. Представлен список и деталь элемента списка в боковых панелях на расширенном классе размера окна, но только в списке или детали на компактных и средних классах размера окна.
SupportingPaneScaffold: реализует каноническую компоновку вспомогательной панели .Представляет основную панель содержимого и вспомогательный панель на расширенном классе размера окна, но только на основной панели контента на компактных и средних классах размера окна.
Адаптивная библиотека Compose Material 3 является обязательной зависимостью для разработки адаптивных приложений.
Конфигурация и непрерывность
Адаптивные приложения сохраняют непрерывность во время изменений конфигурации.
Изменение конфигурации происходит при изменении окна приложения, осанка складных изменений или плотность экрана или изменения шрифта.
По умолчанию изменения конфигурации воссоздают активность приложения, и все состояние деятельности теряется. Для поддержания непрерывности адаптивные приложения сохраняют состояние в методе деятельности onSaveInstanceState() или в ViewModel .
Поза
Адаптивные приложения реагируют на изменения в положении складных устройств. Позы включают настольную и книжную осанку.
Интерфейс WindowInfoTracker в JetPack Windowmanager позволяет получить список объектов DisplayFeature для устройства. Среди функций дисплея - FoldingFeature.State , что указывает, является ли устройство полностью или наполовину открыто.
Адаптивная библиотека Compose Material 3 обеспечивает функцию топового уровня currentWindowAdaptiveInfo() , которая возвращает экземпляр WindowAdaptiveInfo содержащей windowPosture .
Ввод за пределы прикосновения
Пользователи часто подключают внешние клавиатуры, трекпады, мыши и стилусы с большими экранными устройствами. Периферийные устройства повышают производительность пользователей, точность ввода, личное выражение и доступность. Большинство устройств Chromeos поставляются со встроенными клавиатурами и трекпадами.
Адаптивные приложения поддерживают устройства внешнего ввода, но большая часть работы выполнена для вас Android Framework:
JetPack Compose 1.7 и выше: навигация по клавиатуре, а по умолчанию поддерживаются навигация по клавиатуре, а также мышь или трекпад.
JetPack
androidx.compose.material3Библиотека: позволяет пользователям писать в любой компонентTextFieldиспользуя стилус.Комплект клавиатуры Helper : делает Android платформу и сочетания клавишных приложений обнаруженными пользователями. Опубликуйте сочетание клавиш вашего приложения в Helper stoppers, переоценив обратный вызов окна
onProvideKeyboardShortcuts().
Чтобы полностью поддерживать форм -факторы всех размеров, адаптивные приложения поддерживают ввод всех типов.
Как проверить адаптивные приложения
Проверьте разные размеры экрана и окна и различные конфигурации устройства. Используйте скриншоты хоста и составьте предварительные просмотра для проверки макетов приложения. Запустите свое приложение на эмуляторах Android Studio и удаленных устройствах Android, размещенных в центрах обработки данных Google.
Рекомендации по качеству приложения с большим экраном
Рекомендации по качеству приложения с большим экраном гарантируют, что ваше адаптивное приложение хорошо работает на планшетах, складных устройствах и устройствах ChromeoS. Руководящие принципы включают тесты, которые позволяют вам проверить функциональность приложений для критических поездок пользователей. Хотя руководящие принципы сосредоточены на больших экранах, они совместимы со всеми размерами экрана.
Несколько конфигураций
Интерфейс DeviceConfigurationOverride в Compose 1.7 и выше позволяет переопределять различные аспекты конфигурации устройства. API имитирует различные конфигурации устройства локализованным способом для любого композиционного контента, который вы хотите протестировать. Например, вы можете протестировать несколько произвольных размеров пользовательского интерфейса в одном заезде вашего тестового набора на одном устройстве или эмуляторе.
С помощью функции расширения DeviceConfigurationOverride.then() вы можете проверить несколько параметров конфигурации, таких как размер шрифта, локаль, тема и размер макета, все одновременно.
Скриншоты на стороне хоста
Тесты экрана на стороне хоста представляют собой быстрый и масштабируемый способ проверки визуального внешнего вида макетов вашего приложения. Используйте скриншоты на стороне хоста, чтобы проверить свой пользовательский интерфейс для различных размеров дисплея.
Для получения дополнительной информации см. Compose Preview Screenshot Testing .
Составьте предварительные просмотра
Составьте предварительные просмотра, позволяйте вам проверить пользовательский интерфейс вашего приложения в дизайне Android Studio. Предварительные просмотра используют аннотации, такие как @PreviewScreenSizes , @PreviewFontScale и @PreviewLightDark , чтобы позволить вам увидеть композиционный контент в различных конфигурациях. Вы даже можете взаимодействовать с предварительными просмотрами.
Android Studio также выделяет общие проблемы с юзабилити в предварительных просмотрах, такие как кнопки или текстовые поля, которые слишком широки.
Для получения дополнительной информации см. Предварительный просмотр вашего пользовательского интерфейса с помощью композиционных предварительных просмотров .
Эмуляторы
Android Studio предлагает различные эмуляторы для тестирования различных размеров макета:
- Пометяемый эмулятор: эмулирует телефон, планшет или складываемое устройство и позволяет переключаться между ними на лету
- Пиксельный складной эмулятор: эмулирует большой складной телефон Pixel Fold
- Пиксельный планшет эмулятор: эмулирует устройство с большим экраном Pixel
- Эмулятор рабочего стола: включает тестирование окна в свободной форме, прокат мыши и сочетания клавиш
Потоковая передача удаленного устройства
Безопасно подключайтесь к удаленным устройствам Android, размещенным в центрах обработки данных Google, и запустите ваше приложение на последних устройствах Pixel и Samsung. Установите и отлаживает приложения, запустите команды ADB и поверните и складывайте устройства, чтобы убедиться, что ваше приложение хорошо работает на различных реальных устройствах.
Потоковая передача удаленного устройства интегрирована в Android Studio. Для получения дополнительной информации см. Потоковую потоковую передачу устройства Android, питание от Firebase .
Дополнительные ресурсы
- Презентация ввода/вывода: создание адаптивных приложений для Android