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

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

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

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

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

Рисунок 1. Адаптивное приложение оптимизирует макет для окон разных размеров.

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

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

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

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

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

Google Play

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

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

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

В описании приложения в магазине Google Play содержится предупреждение: «Возможно, оно не оптимизировано для вашего устройства».
Рисунок 2. Предупреждение о технических недостатках на странице с подробной информацией о приложении.

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

Как начать

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

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

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

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

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

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

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

Изображение оконных проемов компактной, средней и увеличенной ширины.
Рисунок 3. Классы размеров окон в зависимости от ширины экрана.

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Панели содержимого

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

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

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

Экран устройства разделен на панели: одна панель для компактного и среднего размера окна, две панели для расширенного размера окна.
Рисунок 4. Количество панелей содержимого в зависимости от размера окна.

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

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

Рисунок 5. Макет «список-подробности» с панелью списка в качестве навигационной цели.
Рисунок 6. Макет «список-подробности» с панелью подробной информации в качестве навигационной цели.

Композитный материал 3 Адаптивный

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

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

  • NavigationSuiteScaffold : Автоматически переключается между панелью навигации и направляющей в зависимости от размера окна приложения и положения устройства.

  • ListDetailPaneScaffold : Реализует каноническую компоновку "список-детали" .

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

  • SupportingPaneScaffold : Реализует каноническую компоновку вспомогательных панелей .

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

Библиотека Compose Material 3 Adaptive является ключевой зависимостью для разработки адаптивных приложений.

Конфигурация и непрерывность

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

Изменение конфигурации происходит при изменении размера окна приложения, изменении положения складного устройства, а также изменении плотности экрана или шрифта.

По умолчанию изменения конфигурации приводят к повторному созданию активности приложения, и всё состояние активности теряется. Для обеспечения непрерывности адаптивные приложения сохраняют состояние в методе onSaveInstanceState() активности или в ViewModel .

Поза

Адаптивные приложения реагируют на изменения положения складных устройств. К таким положениям относятся положение за столом и положение за книгой.

Складной телефон в настольном режиме, когда нижняя половина экрана располагается на поверхности, а верхняя — вертикально.
Рисунок 7. Складное устройство в настольном положении.

Интерфейс WindowInfoTracker в Jetpack WindowManager позволяет получить список объектов DisplayFeature для устройства. Среди характеристик дисплея есть FoldingFeature.State , который указывает, полностью или наполовину открыто устройство.

Библиотека Compose Material 3 Adaptive предоставляет функцию верхнего уровня currentWindowAdaptiveInfo() , которая возвращает экземпляр WindowAdaptiveInfo , содержащий windowPosture .

Ввод данных помимо касания

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

Адаптивные приложения поддерживают внешние устройства ввода, но большая часть работы выполняется за вас самой платформой Android:

  • Jetpack Compose 1.7 и выше: по умолчанию поддерживаются навигация по вкладкам с помощью клавиатуры, а также щелчки, выделение и прокрутка с помощью мыши или трекпада.

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

  • Keyboard Shortcuts Helper : Позволяет пользователям находить сочетания клавиш для платформы Android и приложений. Опубликуйте сочетания клавиш вашего приложения в Keyboard Shortcuts Helper, переопределив функцию обратного вызова 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: эмулирует устройство с большим экраном Pixel Tablet.
  • Эмулятор рабочего стола: позволяет тестировать работу с окнами в произвольном порядке, наведение курсора мыши и сочетания клавиш.

Удалённая потоковая передача с устройства

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

В Android Studio интегрирована функция потоковой передачи с удаленных устройств. Для получения дополнительной информации см. раздел «Потоковая передача с устройств Android на базе Firebase» .

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