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

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

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

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

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

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

Внешний вид компонента настраивается с помощью структур placesMaterialColor , placesMaterialFont , placesMaterialShape и placesMaterialTheme .

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

Атрибут темы Использование
Цвет
theme.color.surface Контейнер и фон диалога
theme.color.outlineDecorative Граница контейнера
theme.color.primary Ссылки, индикатор загрузки, значки обзора
theme.color.onSurface Заголовки, содержание диалогов
theme.color.onSurfaceVariant Информация о месте
theme.color.secondaryContainer Фон кнопки
theme.color.onSecondaryContainer Текст и значок кнопки
theme.color.neutralContainer Значок даты обзора, загрузка заполнителей
theme.color.onNeutralContainer Дата проверки, ошибка загрузки
theme.color.positiveContainer Значок доступного зарядного устройства для электромобиля
theme.color.onPositiveContainer Доступное содержимое значка зарядного устройства электромобиля
theme.color.positive Разместить этикетку «Открыто»
theme.color.negative Разместить метку «Закрыто»
theme.color.info Значок доступного входа
theme.measurement.borderWidthButton Открыть на картах и ​​кнопках ОК
Типографика
theme.font.bodySmall Информация о месте
theme.font.bodyMedium Информация о месте, содержание диалога
theme.font.labelMedium Содержание значка
theme.font.labelLarge Содержимое кнопки
theme.font.headlineMedium Заголовки диалогов
theme.font.displaySmall Название места
theme.font.titleSmall Название места
Интервал
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
Измерение
borderWidth Контейнер
theme.measurement.borderWidthButton
Форма
theme.shape.cornerRadius Контейнер
theme.shape.cornerRadiusButton Кнопки «Открыть в Картах» и «ОК» (кроме круглой кнопки)
theme.shape.cornerRadiusThumbnail Разместить уменьшенное изображение
theme.shape.cornerRadiusCollageOuter Медиаколлаж
theme.shape.cornerRadiusCard Карточка места, Карточка отзыва пользователя
theme.shape.cornerRadiusDialog Диалог раскрытия информации в Google Картах
Атрибуция бренда Google Maps
attribution.lightModeColor Кнопка атрибуции и раскрытия информации в Google Картах для светлой темы (перечисления для белого, серого и черного цветов)
attribution.darkModeColor Кнопка атрибуции и раскрытия информации в Google Картах для тёмной темы (перечисления для белого, серого и чёрного цветов)

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

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

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

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

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

Примеры

Эта функция создаёт тему, которая переопределяет атрибуты стиля по умолчанию. Все атрибуты темы, которые не переопределяются, используют стили по умолчанию.

Быстрый 

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

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