Stile personalizzato

Personalizzazione visiva dei dettagli del luogo — Esempi di personalizzazione visiva

Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli di questi componenti del kit UI Places:

Il kit UI Places offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta il riferimento di Material Design per Colori e Tipografia. Per impostazione predefinita, lo stile rispetta il linguaggio di progettazione visiva di Google Maps.

Opzioni di personalizzazione dei dettagli del luogo

L'aspetto del componente viene personalizzato con le struct placesMaterialColor, placesMaterialFont, placesMaterialShape e placesMaterialTheme.

Il kit UI Places fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro che quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tema personalizzato.

Puoi personalizzare i seguenti stili:

Attributo tema	Utilizzo
Colore
`theme.color.surface`	Sfondo del contenitore e della finestra di dialogo
`theme.color.outlineDecorative`	Bordo del contenitore
`theme.color.primary`	Link, indicatore di caricamento, icone di panoramica
`theme.color.onSurface`	Intestazioni, contenuti della finestra di dialogo
`theme.color.onSurfaceVariant`	Informazioni sul luogo
`theme.color.secondaryContainer`	Sfondo pulsante
`theme.color.onSecondaryContainer`	Testo e icona del pulsante
`theme.color.neutralContainer`	Esamina il badge della data e le forme segnaposto di caricamento
`theme.color.onNeutralContainer`	Data della revisione, errore di caricamento
`theme.color.positiveContainer`	Badge Stazione di ricarica EV disponibile
`theme.color.onPositiveContainer`	Contenuti del badge per caricabatterie EV disponibili
`theme.color.positive`	Posiziona l'etichetta "Aperto ora"
`theme.color.negative`	Etichetta "Chiuso" ora
`theme.color.info`	Icona Ingresso accessibile
`theme.measurement.borderWidthButton`	Pulsanti Apri in Maps e OK

Tipografia
`theme.font.bodySmall`	Informazioni sul luogo
`theme.font.bodyMedium`	Informazioni sul luogo, contenuti della finestra di dialogo
`theme.font.labelMedium`	Contenuti del badge
`theme.font.labelLarge`	Contenuto del pulsante
`theme.font.headlineMedium`	Intestazioni delle finestre di dialogo
`theme.font.displaySmall`	Nome del luogo
`theme.font.titleSmall`	Nome del luogo

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

Misurazione
`borderWidth`	Container
`theme.measurement.borderWidthButton`

Forma
`theme.shape.cornerRadius`	Container
`theme.shape.cornerRadiusButton`	Pulsanti Apri in Maps e OK (escluso il pulsante icona rotondo)
`theme.shape.cornerRadiusThumbnail`	Posizionare l'immagine in miniatura
`theme.shape.cornerRadiusCollageOuter`	Collage multimediale
`theme.shape.cornerRadiusCard`	Scheda luogo, scheda recensione utente
`theme.shape.cornerRadiusDialog`	Finestra di dialogo di divulgazione di Google Maps

Attribuzione del brand Google Maps
`attribution.lightModeColor`	Pulsante di attribuzione e informativa di Google Maps con tema chiaro (enumerazioni per bianco, grigio e nero)
`attribution.darkModeColor`	Pulsante di attribuzione e informativa del tema scuro di Google Maps (enumerazioni per bianco, grigio e nero)

Colori di attribuzione

I Termini di servizio di Google Maps richiedono di utilizzare uno dei tre colori del brand per l'attribuzione di Google Maps. Questa attribuzione deve essere visibile e accessibile quando sono state apportate modifiche alla personalizzazione.

Offriamo tre colori del brand tra cui scegliere, che possono essere impostati in modo indipendente per i temi chiaro e scuro:

Tema chiaro: attributionColorLight con enumerazioni per bianco, grigio e nero.
Tema scuro: attributionColorDark con enumerazioni per bianco, grigio e nero.

Esempi

Questa funzione crea un tema che esegue l'override degli attributi di stile predefiniti. Gli attributi del tema non sostituiti utilizzano gli stili predefiniti.

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
}

Stile personalizzato

Colori di attribuzione

Esempi

Swift

Esempi completi per ogni componente