Сейчас в мире используется более 300 миллионов устройств Android с большим экраном, включая планшеты, складные устройства, Googlebook, устройства с ChromeOS, автомобильные дисплеи и телевизоры, и их число постоянно растет. Чтобы обеспечить оптимальное удобство использования на растущем количестве и разнообразии устройств с большим экраном, а также на стандартных телефонах, создавайте адаптивные приложения.
Что такое адаптивные приложения?
Адаптивные приложения меняют макеты в зависимости от изменений в отображении приложения, в первую очередь от размера окна приложения. Но адаптивные приложения также учитывают изменения в положении складных устройств, например настольный режим или режим книги, а также изменения плотности экрана и размера шрифта.
Вместо того чтобы просто растягивать или сжимать элементы интерфейса в зависимости от размера окна, адаптивные приложения заменяют компоненты макета и показывают или скрывают контент. Например, на стандартных телефонах адаптивное приложение может отображать нижнюю панель навигации, а на больших экранах – боковую. На больших экранах адаптивные приложения показывают больше контента, например макет с двумя панелями, списком и подробными сведениями. На маленьких экранах контента меньше – только список или только подробные сведения.
Раньше приложения обычно запускались в полноэкранном режиме. Сегодня приложения работают в многооконном режиме в окнах произвольного размера, независимо от размера экрана устройства. Пользователи могут изменить размер окна в любое время. Поэтому даже для одного типа устройств приложения должны быть адаптивными.
Адаптивные приложения отлично выглядят и работают на любом устройстве в любой конфигурации.
Зачем создавать адаптивные интерфейсы?
Пользователи ожидают, что ваше приложение будет безупречно работать на всех их устройствах и предоставлять расширенные возможности на больших экранах. Многооконный режим позволяет пользователям работать в нескольких приложениях одновременно, что повышает удобство использования приложения и продуктивность.
Приложения, ограниченные однозадачностью на стандартных телефонах, упускают расширяющуюся пользовательскую базу с разнообразными возможностями.
Google Play
В Google Play есть подборки и рекомендации приложений для планшетов и складных устройств, которые помогают пользователям находить качественные продукты.
В Google Play приложения и игры, оптимизированные для больших экранов, показываются выше, чем неоптимизированные. Рейтинг в Google Play определяется на основе рекомендаций по обеспечению качества приложений для больших экранов. Чем выше рейтинг, тем лучше видимость приложения. Пользователи нескольких устройств смогут увидеть на телефонах оценки и отзывы, относящиеся к большим экранам.
Если приложение не соответствует стандартам качества Google Play для больших экранов, на его странице показывается предупреждение. В предупреждении говорится, что приложение может плохо работать на устройствах с большим экраном.
Создавайте адаптивные приложения, чтобы повысить их видимость в Google Play и увеличить количество устройств, на которые их можно скачать.
С чего начать
Помните об адаптивном дизайне на всех этапах разработки приложения – от планирования до развертывания. Рассказать графическим дизайнерам об адаптивном дизайне Разработайте адаптивное приложение, и вы получите управляемый, расширяемый продукт, готовый к будущим типам устройств и режимам работы с окнами.
Чтобы создать адаптивное приложение, которое поддерживает все размеры и конфигурации экранов, сделайте следующее:
- Как использовать классы размеров окон для выбора макета
- Как создавать приложения с помощью библиотеки Compose Material 3 Adaptive
- Поддержка других способов ввода помимо сенсорного
- Тестирование на всех типах устройств
Навыки работы с Android
Посмотреть на GitHubКак сделать приложение адаптивным
adaptive навык Android, чтобы обновить интерфейс приложения и адаптировать его для разных устройств и экранов Android.android skills add adaptiveКлассы размеров окон
Размеры окна приложения могут различаться на разных устройствах или на одном и том же устройстве, если оно складное, даже когда приложение открыто в полноэкранном режиме. Соотношение сторон зависит от ориентации устройства. В многооконном режиме размер окна приложения, соотношение сторон и ориентация могут отличаться от параметров экрана устройства.
Адаптивные приложения упрощают и обобщают проблему определения и управления размером окна, соотношением сторон и ориентацией, учитывая только окно приложения при рендеринге макетов, что также работает, когда окно приложения находится в полноэкранном режиме.
Классы размеров окон делят окна приложений на компактные, средние и расширенные в зависимости от ширины или высоты окна.
Вычислите WindowSizeClass приложения с помощью функции верхнего уровня currentWindowAdaptiveInfo() из адаптивной библиотеки Compose Material 3. Функция возвращает экземпляр WindowAdaptiveInfo, который содержит windowSizeClass. Ваше приложение
получает обновления всякий раз, когда меняется класс размера окна:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Панели контента
Макет действия иногда называют экраном. Например, в приложении может быть главный экран, экран со списком и экран с подробной информацией об элементе. Терминология подразумевает, что каждое действие заполняет экран устройства.
Однако на экранах устройств, которые достаточно велики для поддержки расширенного класса размера окна, одновременно могут отображаться несколько экранов действий. Панель – более точный термин для обозначения области, в которой показывается контент отдельных действий.
Классы размеров окон позволяют определить, сколько панелей контента показывать в многопанельных макетах, как указано в 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 Preview…
Предварительные версии 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…
Дополнительные ресурсы
- I/O 2026: как сделать интерфейс адаптивным с помощью ИИ-агента Android Studio
- I/O 2024: создание адаптивных приложений для Android