Сегодня используется более 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