Style personnalisé

Personnalisation visuelle des détails sur le lieu — Exemples de personnalisation visuelle

Vous pouvez personnaliser les couleurs, la typographie, l'espacement, les bordures et les coins des composants suivants du kit d'UI Places :

Le kit d'UI Places offre une approche de système de conception pour la personnalisation visuelle, basée en gros sur Material Design (avec quelques modifications spécifiques à Google Maps). Consultez la référence Couleur et Typographie de Material Design. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Options de personnalisation des détails du lieu

L'apparence du composant est personnalisée avec les structs placesMaterialColor, placesMaterialFont, placesMaterialShape et placesMaterialTheme.

Le kit d'UI Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes sombre et clair. Pour personnaliser le thème sombre, ajoutez des valeurs pour .dark et attribution.darkModeColor à votre thème personnalisé.

Vous pouvez personnaliser les styles suivants :

Attribut de thème	Utilisation
Couleur
`theme.color.surface`	Arrière-plan du conteneur et de la boîte de dialogue
`theme.color.outlineDecorative`	Bordure du conteneur
`theme.color.primary`	Liens, indicateur de chargement, icônes de présentation
`theme.color.onSurface`	Titres, contenu de la boîte de dialogue
`theme.color.onSurfaceVariant`	Informations sur le lieu
`theme.color.secondaryContainer`	Arrière-plan du bouton
`theme.color.onSecondaryContainer`	Texte et icône du bouton
`theme.color.neutralContainer`	Formes de l'espace réservé de chargement et du badge de date d'avis
`theme.color.onNeutralContainer`	Date de l'avis, erreur de chargement
`theme.color.positiveContainer`	Badge "Borne de recharge pour VE disponible"
`theme.color.onPositiveContainer`	Contenu du badge de borne de recharge pour VE disponible
`theme.color.positive`	Libellé "Ouvert" pour les lieux
`theme.color.negative`	Libellé "Fermé" pour les lieux
`theme.color.info`	Icône d'entrée accessible
`theme.measurement.borderWidthButton`	Boutons "Ouvrir dans Maps" et "OK"

Typographie
`theme.font.bodySmall`	Informations sur le lieu
`theme.font.bodyMedium`	Informations sur le lieu, contenu de la boîte de dialogue
`theme.font.labelMedium`	Contenu des badges
`theme.font.labelLarge`	Contenu du bouton
`theme.font.headlineMedium`	Titres de boîte de dialogue
`theme.font.displaySmall`	Nom de lieu
`theme.font.titleSmall`	Nom de lieu

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

Mesures
`borderWidth`	Conteneur
`theme.measurement.borderWidthButton`

Forme
`theme.shape.cornerRadius`	Conteneur
`theme.shape.cornerRadiusButton`	Boutons "Ouvrir dans Maps" et "OK" (à l'exclusion du bouton en forme d'icône ronde)
`theme.shape.cornerRadiusThumbnail`	Placer une vignette
`theme.shape.cornerRadiusCollageOuter`	Montage multimédia
`theme.shape.cornerRadiusCard`	Fiche d'établissement, fiche d'avis d'utilisateur
`theme.shape.cornerRadiusDialog`	Boîte de dialogue d'informations Google Maps

Attribution de la marque Google Maps
`attribution.lightModeColor`	Bouton d'attribution et de divulgation Google Maps avec thème clair (énumérations pour le blanc, le gris et le noir)
`attribution.darkModeColor`	Bouton d'attribution et de divulgation du thème sombre Google Maps (énumérations pour le blanc, le gris et le noir)

Couleurs d'attribution

Les Conditions d'utilisation de Google Maps vous obligent à utiliser l'une des trois couleurs de la marque pour l'attribution Google Maps. Cette attribution doit être visible et accessible lorsque des modifications de personnalisation ont été apportées.

Vous pouvez choisir parmi trois couleurs de marque, qui peuvent être définies indépendamment pour les thèmes clair et sombre :

Thème clair : attributionColorLight avec des énumérations pour le blanc, le gris et le noir.
Thème sombre : attributionColorDark avec des énumérations pour le blanc, le gris et le noir.

Exemples

Cette fonction crée un thème qui remplace les attributs de style par défaut. Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut.

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
}

Style personnalisé

Couleurs d'attribution

Exemples

Swift

Exemples complets pour chaque composant