Макет

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Платформа Android Auto с адаптивным откликом (AR) адаптирует макеты приложений к любому размеру экрана автомобиля.

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

С одного взгляда

  • Макеты подстраиваются под размер экрана в определенных точках останова.
  • Применить отступы с шагом 8 dp
  • Экономно размещайте отступы 12 dp между меньшими компонентами.

Как определяется макет

Платформа дополненной реальности Android Auto использует как адаптивный, так и адаптивный дизайн:

  • Отзывчивый дизайн (точный размер экрана определяет макет) используется для левого и правого полей.
  • Адаптивный дизайн (диапазоны высоты и ширины экрана определяют макет) используется для макета

Макет определяется с помощью измерений, называемых контрольными точками. Точки останова — это стратегически определенные измерения высоты и ширины экрана, которые определяют, когда показывать определенный макет. Для каждого диапазона точек останова макет настраивается в соответствии с размером и ориентацией экрана.

Адаптивная анимация точки останова

Адаптивный

Адаптивный дизайн использует точки останова для определения макета экрана. Для определенного диапазона размеров экрана (например, шириной менее 1280 dp) отображается определенный макет.
Отзывчивая анимация точки останова

Отзывчивый

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

Адаптивные точки останова

Android Auto использует адаптивные точки останова для определения макета экрана, которые рассчитываются на основе размера окна приложения, а не всего экрана.

Точки останова на разных размерах экрана
Адаптивные контрольные точки для узких (0-600dp), стандартных (600-930dp), широких (930-1280dp) и сверхшироких (1280dp+) размеров экрана

Отзывчивые поля

Android Auto использует адаптивные поля в зависимости от размера всего экрана автомобиля. Левое и правое поля настраиваются на 12% ширины экрана и обычно содержат полосы прокрутки и элементы управления навигацией. Оставшееся пространство экрана, называемое холстом приложения, содержит содержимое приложения.

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

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

Сетка макета

Макеты Android Auto выравнивают элементы пользовательского интерфейса по сетке 8dp, а некоторые более мелкие компоненты выравнивают по сетке 4dp.

Прокладка

Заполнение относится к пространству между элементами пользовательского интерфейса. Масштаб заполнения Android Auto применяется с кратностью 8 dp, вплоть до размеров заполнения 96 dp. Любое большее количество отступов также должно быть кратно 8 dp.

В этой таблице перечислены типичные значения заполнения, отображаемые в пользовательском интерфейсе Auto. Приращения размеров перечислены в порядке возрастания и отмечены метками, начинающимися с буквы «P»:

Р0 Р1 Р2 Р3 Р4 Р5 Р6 Р7 Р8
4дп 8дп 12дп 16дп 24дп 32дп 48дп 64дп 96дп
Заполнение значений в макете
В этом макете значения заполнения представлены P1, P3 и P5 в таблице выше.

Прокладка для более мелких компонентов

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

Заполнение значений в компоненте
В этом виджете элементы используют значения заполнения, представленные P2, P3, P4 и P5 в таблице выше.

Ключевые линии

Ключевые линии — это измерения, которые организуют пользовательский интерфейс, показывая, где элементы и компоненты должны быть размещены горизонтально в макете (вдоль оси X). Они маркируются этикетками, начинающимися с буквы «KL».

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

Ключевые линии внутри компонента
В этом компоненте KL0 выравнивает все значки списка и текст на одинаковом расстоянии друг от друга. KL1 выравнивает все элементы списка по левому и правому краям компонента.

Измерение с помощью ключевых линий

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

Следующие ключевые линии рекомендуются для диапазона размеров экрана, представленного метками, помеченными «KL (n)». Они показаны в порядке увеличения размера ключевой линии:

КЛ (н) Узкие экраны
(0-600dp)
Стандартные экраны
(600-930dp)
Широкие экраны
(930-1280dp)
Очень широкие экраны
(1280dp+)
КЛ0 16дп 24дп 24дп 32дп
КЛ1 24дп 32дп 32дп 48дп
КЛ2 96дп 112dp 112dp Н/Д
КЛ3 112dp 128dp 128dp 152 дп
КЛ4 148dp 168dp 168dp Н/Д