Макет

Платформа 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	Н/Д