Wybierz platformę: Android iOS JavaScript

Styl niestandardowy

Dostosowywanie wizualne szczegółowych informacji o miejscu
Przykłady dostosowywania wyglądu

Możesz dostosować kolory, typografię, odstępy, obramowania i rogi tych komponentów zestawu interfejsu Places:

Interfejs Places UI Kit oferuje podejście do wizualnego dostosowywania oparte na systemie projektowania, które jest w przybliżeniu oparte na Material Design (z pewnymi modyfikacjami specyficznymi dla Map Google). Więcej informacji znajdziesz w sekcjach Kolor i Typografia w dokumentacji Material Design. Domyślnie styl jest zgodny z językiem wizualnym Map Google.

Opcje dostosowywania szczegółowych informacji o miejscu

Wygląd komponentu jest dostosowywany za pomocą struktur placesMaterialColor, placesMaterialFont, placesMaterialShape i placesMaterialTheme.

Możesz dostosować te style:

Atrybut motywu Wykorzystanie
Kolor
theme.color.surface Tło kontenera i okna
theme.color.outlineDecorative Obramowanie kontenera
theme.color.primary Linki, wskaźnik ładowania, ikony przeglądu
theme.color.onSurface Nagłówki, zawartość okien
theme.color.onSurfaceVariant Informacje o miejscu
theme.color.secondaryContainer Tło przycisku
theme.color.onSecondaryContainer Tekst i ikona przycisku
theme.color.neutralContainer Sprawdź plakietkę daty, wczytywanie kształtów zastępczych
theme.color.onNeutralContainer Data opinii, błąd wczytywania
theme.color.positiveContainer Dostępna ładowarka EV
theme.color.onPositiveContainer Treści związane z odznaką dostępnej ładowarki EV
theme.color.positive Etykieta „Otwarte”
theme.color.negative Etykieta „Zamknięte”
theme.color.info Ikona wejścia dostępnego dla osób z niepełnosprawnościami
theme.measurement.borderWidthButton Przyciski Otwórz w Mapach i OK
   
Typografia
theme.font.bodySmall Informacje o miejscu
theme.font.bodyMedium Informacje o miejscu, zawartość okna
theme.font.labelMedium Treść plakietki
theme.font.labelLarge Treść przycisku
theme.font.headlineMedium Nagłówki okien
theme.font.displaySmall Nazwa miejsca
theme.font.titleSmall Nazwa miejsca
   
Odstępy
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
   
Pomiary skuteczności
borderWidth Kontener
theme.measurement.borderWidthButton
   
Kształt
theme.shape.cornerRadius Kontener
theme.shape.cornerRadiusButton Przyciski Otwórz w Mapach i OK (z wyjątkiem okrągłego przycisku ikony)
theme.shape.cornerRadiusThumbnail Miniatura miejsca
theme.shape.cornerRadiusCollageOuter Kolaż treści multimedialnych
theme.shape.cornerRadiusCard Karta miejsca, karta opinii użytkownika
theme.shape.cornerRadiusDialog Okno informacji w Mapach Google
   
Atrybucja marki w Mapach Google
attribution.lightModeColor Przycisk atrybucji i ujawniania informacji w Mapach Google z jasnym motywem (wyliczenia dla koloru białego, szarego i czarnego)
attribution.darkModeColor Przycisk atrybucji i ujawniania informacji w Mapach Google w ciemnym motywie (wyliczenia dla koloru białego, szarego i czarnego)

Kolory atrybucji

Atrybucja
Atrybucja

Warunki korzystania z Map Google wymagają użycia jednego z 3 kolorów marki w przypadku atrybucji Map Google. Atrybucja musi być widoczna i dostępna po wprowadzeniu zmian w dostosowaniu.

Oferujemy 3 kolory marki do wyboru, które można ustawić niezależnie dla motywów jasnego i ciemnego:

  • Jasny motyw: attributionColorLight z wyliczeniami dla kolorów białego, szarego i czarnego.
  • Tryb ciemny: attributionColorDark z wyliczeniami dla kolorów białego, szarego i czarnego.

Przykłady

Ta funkcja tworzy motyw, który zastępuje domyślne atrybuty stylu. Wszystkie atrybuty motywu, które nie zostały zastąpione, używają stylów domyślnych.

Swift

  // 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
}

Pełne przykłady każdego komponentu