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