Выберите платформу: Android iOS JavaScript

Индивидуальный стиль

Визуальная настройка деталей места
Примеры визуальной настройки

Вы можете настраивать цвета, типографику, интервалы, границы и углы следующих компонентов набора пользовательского интерфейса Places:

Набор инструментов Places UI Kit предлагает системный подход к визуальной настройке, основанный на Material Design (с некоторыми модификациями, специфичными для Google Maps). См. раздел Material Design по цвету и типографике . По умолчанию стиль соответствует языку визуального дизайна Google Maps.

Возможности настройки сведений о месте

При создании фрагмента можно указать тему, которая переопределяет любые атрибуты стилей по умолчанию. Все атрибуты темы, которые не переопределяются, используют стили по умолчанию.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Вы можете настроить следующие стили:

Атрибут темы Использование
Цвет
placesColorSurface Контейнер и фон диалога
placesColorOutlineDecorative Граница контейнера
placesColorPrimary Ссылки, индикатор загрузки, значки обзора
placesColorOnSurface Заголовки, содержание диалогов
placesColorOnSurfaceVariant Информация о месте
placesColorSecondaryContainer Фон кнопки
placesColorOnSecondaryContainer Текст и значок кнопки
placesColorNeutralContainer Значок даты обзора, загрузка заполнителей
placesColorOnNeutralContainer Дата проверки, ошибка загрузки
placesColorPositiveContainer Значок доступного зарядного устройства для электромобиля
placesColorOnPositiveContainer Доступное содержимое значка зарядного устройства электромобиля
placesColorPositive Разместить этикетку «Открыто»
placesColorNegative Разместить метку «Закрыто»
placesColorInfo Значок доступного входа
placesColorButtonBorder Открыть на картах и ​​кнопках ОК
Типографика
placesTextAppearanceBodySmall Информация о месте
placesTextAppearanceBodyMedium Информация о месте, содержание диалога
placesTextAppearanceLabelMedium Содержание значка
placesTextAppearanceLabelLarge Содержимое кнопки
placesTextAppearanceHeadlineMedium Заголовки диалогов
placesTextAppearanceDisplaySmall Название места
placesTextAppearanceTitleSmall Название места
Интервал
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
Измерение
placesBorderWidth Контейнер
placesBorderWidthButton
Форма
placesCornerRadius Контейнер
placesCornerRadiusButton Кнопки «Открыть в Картах» и «ОК» (кроме круглой кнопки)
placesCornerRadiusThumbnail Разместить уменьшенное изображение
placesCornerRadiusCollageOuter Медиаколлаж
placesCornerRadiusCard Карточка места, Карточка отзыва пользователя
placesCornerRadiusDialog Диалог раскрытия информации в Google Картах
Атрибуция бренда Google Maps
placesColorAttributionLightTheme Кнопка атрибуции и раскрытия информации в Google Картах для светлой темы (перечисления для белого, серого и черного цветов)
placesColorAttributionDarkTheme Кнопка атрибуции и раскрытия информации в Google Картах для тёмной темы (перечисления для белого, серого и чёрного цветов)

Цвета атрибуции

атрибуция
Атрибуция

Условия использования Google Карт требуют использовать один из трёх фирменных цветов для указания авторства Google Карт. Это указание должно быть видимым и доступным после внесения изменений в настройки.

Мы предлагаем на выбор 3 фирменных цвета, которые можно независимо настраивать для светлой и темной темы:

  • Светлая тема: placesColorAttributionLight со значениями перечисления для белого, серого и черного цветов.
  • Темная тема: placesColorAttributionDark со значениями перечисления для белого, серого и черного.

Примеры

В этом примере кода показано, как создать тему, переопределяющую атрибуты стиля по умолчанию. Все атрибуты темы, которые не переопределяются, используют стили по умолчанию. 
  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Полные примеры для каждого компонента