Начало работы с адаптивными приложениями

Сейчас в мире используется более 300 миллионов устройств Android с большим экраном, включая планшеты, складные устройства, Googlebook, устройства с ChromeOS, автомобильные дисплеи и телевизоры, и их число постоянно растет. Чтобы обеспечить оптимальное удобство использования на растущем количестве и разнообразии устройств с большим экраном, а также на стандартных телефонах, создавайте адаптивные приложения.

Что такое адаптивные приложения?

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

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

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

Адаптивные приложения отлично выглядят и работают на любом устройстве в любой конфигурации.

Зачем создавать адаптивные интерфейсы?

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

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

Google Play

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

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

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

Создавайте адаптивные приложения, чтобы повысить их видимость в Google Play и увеличить количество устройств, на которые их можно скачать.

С чего начать

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

Чтобы создать адаптивное приложение, которое поддерживает все размеры и конфигурации экранов, сделайте следующее:

• Как использовать классы размеров окон для выбора макета
• Создание приложений с помощью библиотеки Compose Material 3 Adaptive
• Поддержка других способов ввода помимо сенсорного
• Тестирование на всех типах устройств

android skills add adaptive

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

Размеры окна приложения могут различаться на разных устройствах или на одном и том же устройстве, если оно складное, даже когда приложение открыто в полноэкранном режиме. Соотношение сторон зависит от ориентации устройства. В многооконном режиме размер окна приложения, соотношение сторон и ориентация могут отличаться от параметров экрана устройства.

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

Классы размеров окон делят окна приложений на компактные, средние и расширенные в зависимости от ширины или высоты окна.

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

Панели контента

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

Однако на экранах устройств, которые достаточно велики для поддержки класса размера окна с шириной в раскрытом виде, одновременно могут отображаться несколько экранов действий. Панель – более точный термин для обозначения области, в которой показывается контент отдельных действий.

Классы размеров окон позволяют определить, сколько панелей контента показывать в макетах с несколькими панелями, как указано в Material Design.

По панелям можно перемещаться. На компактных и средних экранах приложения отображают одну панель, поэтому при переходе к любому месту назначения отображается одна панель.

На экранах увеличенного размера приложения могут показывать связанный контент на нескольких панелях, например в макете со списком и подробными сведениями. При переходе к любой из панелей отображается двухпанельный макет. Если размер окна меняется на компактный или средний, адаптивные приложения показывают только одну панель – список или подробные сведения.

Compose Material 3 Adaptive

Jetpack Compose – это современный декларативный подход к созданию адаптивных приложений, который позволяет не дублировать файлы макетов и не тратить время на их поддержку.

Библиотека Compose Material 3 Adaptive содержит composable-функции, которые управляют классами размеров окон, компонентами навигации, макетами с несколькими панелями, а также положением складных устройств и расположением шарниров. Например:

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

• Библиотека Jetpack androidx.compose.material3 позволяет пользователям писать стилусом в любом компоненте TextField.

• Помощник по быстрым клавишам. Показывает пользователям быстрые клавиши для платформы Android и приложений. Опубликуйте быстрые клавиши приложения в помощнике по быстрым клавишам, переопределив обратный вызов окна onProvideKeyboardShortcuts().

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

Как тестировать адаптивные приложения

Протестируйте разные размеры экрана и окна, а также разные конфигурации устройств. Используйте скриншоты на стороне хоста и предварительный просмотр Compose, чтобы проверить макеты приложения. Запускайте приложение на эмуляторах Android Studio и удаленных устройствах Android, размещенных в центрах обработки данных Google.

Рекомендации по обеспечению качества приложений для больших экранов

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

Несколько конфигураций

Интерфейс DeviceConfigurationOverride в Compose 1.7 и более поздних версиях позволяет переопределять различные аспекты конфигурации устройства. API локально имитирует различные конфигурации устройств для любого контента, который вы хотите протестировать. Например, вы можете протестировать несколько произвольных размеров пользовательского интерфейса за один запуск набора тестов на одном устройстве или эмуляторе.

Функция расширения DeviceConfigurationOverride.then() позволяет одновременно тестировать несколько параметров конфигурации, таких как размер шрифта, локаль, тема и размер макета.

Скриншоты на стороне хоста

Тесты скриншотов на стороне хоста – это быстрый и масштабируемый способ проверить внешний вид макетов приложения. Используйте скриншоты на стороне хоста, чтобы протестировать интерфейс на экранах разных размеров.

Дополнительную информацию можно найти в статье Тестирование скриншотов предварительного просмотра Compose.

Предварительные версии Compose

Предварительный просмотр Compose позволяет проверить пользовательский интерфейс приложения в режиме дизайна Android Studio. В предварительных версиях используются аннотации, такие как @PreviewScreenSizes, @PreviewFontScale и @PreviewLightDark, которые позволяют просматривать составной контент в различных конфигурациях. Вы даже можете взаимодействовать с ними.

Android Studio также выделяет в предварительных версиях распространенные проблемы с удобством использования, например слишком широкие кнопки или текстовые поля.

Подробнее о предварительном просмотре интерфейса с помощью composable-функций…

Эмуляторы

В Android Studio есть разные эмуляторы для тестирования макетов разных размеров:

• Эмулятор с изменяемым размером. Эмулирует телефон, планшет или складное устройство и позволяет переключаться между ними на лету.
• Эмулятор Pixel Fold: эмулирует складной телефон Pixel Fold с большим экраном.
• Эмулятор Pixel Tablet. Эмулирует планшет Pixel Tablet с большим экраном.
• Эмулятор компьютера. Позволяет тестировать окна произвольной формы, наведение указателя мыши и сочетания клавиш.

Удаленное устройство для стриминга

Безопасно подключайтесь к удаленным устройствам Android, размещенным в центрах обработки данных Google, и запускайте свое приложение на новейших устройствах Pixel и Samsung. Устанавливайте и отлаживайте приложения, выполняйте команды ADB, поворачивайте и складывайте устройства, чтобы убедиться, что ваше приложение работает правильно на различных реальных устройствах.

Стриминг с удаленных устройств интегрирован в Android Studio. Подробнее о стриминге устройств Android на базе Firebase…

Дополнительные ресурсы

• Презентация на Google I/O: Создание адаптивных приложений для Android