Benutzerdefinierte Stile

Visuelle Anpassung von Ortsdetails — Beispiele für die visuelle Anpassung

Sie können die Farben, Typografie, Abstände, Ränder und Ecken dieser Komponenten des Places UI-Kits anpassen:

Das Places UI-Kit bietet einen Designsystemansatz für die visuelle Anpassung, der in etwa auf Material Design basiert (mit einigen Google Maps-spezifischen Änderungen). Weitere Informationen finden Sie in den Material Design-Referenzen zu Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Das Erscheinungsbild der Komponente wird mit den Structs placesMaterialColor, placesMaterialFont, placesMaterialShape und placesMaterialTheme angepasst.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

Sie können die folgenden Stile anpassen:

Designattribut	Nutzung
Farbe
`theme.color.surface`	Container- und Dialoghintergrund
`theme.color.outlineDecorative`	Containerrahmen
`theme.color.primary`	Links, Ladeanzeige, Übersichtssymbole
`theme.color.onSurface`	Überschriften, Dialoginhalte
`theme.color.onSurfaceVariant`	Informationen zum Ort
`theme.color.secondaryContainer`	Schaltflächenhintergrund
`theme.color.onSecondaryContainer`	Schaltflächentext und ‑symbol
`theme.color.neutralContainer`	Datumsbadge und Platzhalterformen für das Laden
`theme.color.onNeutralContainer`	Prüfdatum, Ladefehler
`theme.color.positiveContainer`	Verfügbares Logo für Ladestationen für Elektrofahrzeuge
`theme.color.onPositiveContainer`	Verfügbare Inhalte für das Logo „Ladegerät für Elektrofahrzeuge“
`theme.color.positive`	Label „Jetzt geöffnet“ platzieren
`theme.color.negative`	Label „Geschlossen“ für Orte
`theme.color.info`	Symbol für barrierefreien Eingang
`theme.measurement.borderWidthButton`	Schaltflächen „In Maps öffnen“ und „OK“

Typografie
`theme.font.bodySmall`	Informationen zum Ort
`theme.font.bodyMedium`	Ortsinformationen, Dialoginhalte
`theme.font.labelMedium`	Inhalt des Logos
`theme.font.labelLarge`	Schaltflächeninhalt
`theme.font.headlineMedium`	Dialogüberschriften
`theme.font.displaySmall`	Name
`theme.font.titleSmall`	Name

Abstand
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Messung
`borderWidth`	Container
`theme.measurement.borderWidthButton`

Form
`theme.shape.cornerRadius`	Container
`theme.shape.cornerRadiusButton`	Schaltflächen „In Maps öffnen“ und „OK“ (runde Symbolschaltfläche ausgenommen)
`theme.shape.cornerRadiusThumbnail`	Miniaturansicht des Orts
`theme.shape.cornerRadiusCollageOuter`	Mediencollage
`theme.shape.cornerRadiusCard`	Karte für Ort, Karte für Nutzerrezensionen
`theme.shape.cornerRadiusDialog`	Offenlegungsdialogfeld für Google Maps

Markenattribute in Google Maps
`attribution.lightModeColor`	Schaltfläche für die Quellenangabe und Offenlegung von Google Maps im hellen Design (Enumerationen für Weiß, Grau und Schwarz)
`attribution.darkModeColor`	Schaltfläche für Attribution und Offenlegung des dunklen Designs von Google Maps (Enumerationen für Weiß, Grau und Schwarz)

Attributionsfarben

Gemäß den Nutzungsbedingungen von Google Maps müssen Sie für die Quellenangabe von Google Maps eine von drei Markenfarben verwenden. Diese Quellenangabe muss sichtbar und zugänglich sein, wenn Änderungen an der Anpassung vorgenommen wurden.

Sie können aus drei Markenfarben wählen, die unabhängig für helle und dunkle Designs festgelegt werden können:

Helles Design: attributionColorLight mit Enums für Weiß, Grau und Schwarz.
Dunkles Design: attributionColorDark mit Enums für Weiß, Grau und Schwarz.

Beispiele

Mit dieser Funktion wird ein Design erstellt, das die Standardstilattribute überschreibt. Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

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
}

Benutzerdefinierte Stile

Attributionsfarben

Beispiele

Swift

Vollständige Beispiele für jede Komponente