Адаптивный дизайн — это практика разработки макетов, которые адаптируются к конкретным контрольным точкам и устройствам.
Для эффективной реализации адаптивной компоновки:
Сначала определите ширину окна устройства, чтобы внести изменения в макет, а затем скорректируйте высоту. Поддерживаются различные размеры экранов .
В Android используются концепции адаптивного дизайна, аналогичные веб-разработке, с применением гибких сеток и изображений для создания макетов, эффективно адаптирующихся к контексту.
Обеспечьте адаптивность макетов к различным размерам с помощью следующих методов: переформатирование, отображение, изменение представления.
Избегайте блокировки приложения только в портретном режиме. Это приводит к появлению черных полос по краям экрана при изменении размера приложения.
Не
Рекомендации по адаптации макетов к увеличенным размерам экрана см. в руководстве для разработчиков «Поддержка различных размеров экрана» в Compose и на странице «Применение макета M3». Также вы можете ознакомиться с канонической галереей макетов для больших экранов Android, чтобы найти вдохновение и примеры реализации макетов для больших экранов.
Мыслите адаптивно
Адаптивность должна быть приоритетом при разработке вашего приложения. Мобильный рынок Android постоянно развивается, поэтому нельзя рассматривать мобильные устройства только как телефоны. Вместо этого он должен включать в себя все: от телефонов и складных устройств до планшетов и всего, что между ними.
Хотя некоторые функции и сценарии использования могут быть нецелесообразны на экранах любого размера или форм-фактора, адаптивный дизайн предоставляет пользователям больше свободы в вопросах эргономики, удобства использования и качества приложения.
Методы и качество
Начать можно с разработки ключевых экранов (чтобы передать основные концепции вашего приложения), используя размеры классов в качестве контрольных точек, которые будут служить ориентирами для остальной части приложения. Эти «главные» экраны могут подчеркнуть отличительные адаптивные качества и особенности форм-фактора. Или же можно разработать контент с учетом адаптивности на базовом уровне, указав, как контент должен быть ограничен, расширяться или перестраиваться.
В этом примере навигация и контент перестраиваются, адаптируются и масштабируются для более эргономичной навигации. Сетка макета расширяется из вертикально ориентированной в многоколоночную. Адресная строка в панели приложения и фильтры перестраиваются и адаптируются под размер сетки макета.
Делать
Не
Делать
Делать
Не
Убедитесь, что поля ввода и кнопки не растянуты.
Думайте в терминах изоляции и окон.
Используйте концепцию вложенности панелей для группировки контента в адаптивных макетах. Например, в качестве примера используется экран с подробной информацией, одна панель которого может отображаться в макете «список-подробности».
В компактных размерах следует придерживаться однопанельной компоновки.
В среднем можно использовать компоновку с 1–2 панелями.
В больших и очень больших окнах можно использовать многопанельную компоновку.
Используйте встроенные и визуальные контейнеры для группировки элементов. Панели могут перемещаться, скрываться, расширяться, ограничиваться или всплывать. Использование панелей упрощает проектирование для всех мобильных устройств.
Хотя панели не являются обязательными на больших экранах, для большей гибкости следует рассматривать размещение контента в группах.
Позвольте элементам смещаться и перестраиваться, сосредоточившись на том, как элементы адаптируются к сетке. Учитывайте вертикальное изменение элементов и сочетайте его с ограничениями и изменениями в представлении.
Учитывайте масштаб и объем представленной информации.
Небольшая сетка видеороликов на телефоне становится тесной и перегруженной на планшете. Обновите масштаб элементов пользовательского интерфейса в зависимости от размера экрана, плотности и ввода.
Высококачественное приложение должно соответствовать различным критериям качества, предъявляемым к основным приложениям и приложениям для больших экранов .
Более подробную информацию о компоновке можно найти на странице Material Design 3 (M3) «Понимание компоновки» .
Воспользуйтесь преимуществами уникальных форм-факторов.
Не забывайте также о меньших размерах экранов и различных соотношениях сторон, поскольку телефоны Android выпускаются в разных размерах, а складные устройства могут иметь небольшой внешний экран для отображения вашего приложения.
Для элементов управления, например, в медиаплеерах, разрешите элементам управления перестраиваться, а содержимому — отображаться.
Чтобы помочь пользователю адаптироваться, используйте якорный элемент, например, большую кнопку воспроизведения, вокруг которой будет отображаться контент, а главное изображение станет фоном на обложке.
Помимо классов по размеру
Хотя размер окна является распространенным фактором для адаптивного дизайна, ваше приложение также должно быть готово к тому, что пользователи будут подключать мониторы и устройства ввода, просматривать контент на разных расстояниях и изменять положение своего устройства. Проверить эти изменения можно с помощью API mediaQuery , который позволяет добавить нюансы при проектировании того, как ваше приложение адаптирует определенные элементы пользовательского интерфейса к конкретным сценариям использования. Адаптируйте дизайн вашего приложения на уровне компонентов или панелей, а не проектируйте целые экраны для каждого размера, устройства ввода, форм-фактора и положения.
Для получения более подробной информации о взаимодействии с вводом данных, ознакомьтесь с руководствами по взаимодействию с рабочим столом .
Ознакомьтесь с примером использования сервиса Pawparrazzi , разработанного с использованием новейших адаптивных API и рекомендаций по дизайну.
