Адаптировать макеты

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

Для эффективной реализации адаптивной компоновки:

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

Размеры экрана приложения для повышения производительности на мобильных телефонах и планшетах.

Рекомендации по адаптации макетов к увеличенным размерам экрана см. в руководстве для разработчиков «Поддержка различных размеров экрана» в Compose и на странице «Применение макета M3». Также вы можете ознакомиться с канонической галереей макетов для больших экранов Android, чтобы найти вдохновение и примеры реализации макетов для больших экранов.

Мыслите адаптивно

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

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

Методы и качество

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

Делать

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

Не

Разрешите контенту растягиваться на всю ширину экрана.

Делать

Подумайте в терминах ограждений или стекол.

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

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

Высококачественное приложение должно соответствовать различным критериям качества, предъявляемым к основным приложениям и приложениям для больших экранов .

Более подробную информацию о компоновке можно найти на странице Material Design 3 (M3) «Понимание компоновки» .