Diseño personalizado

Personalización visual de los detalles del lugar — Ejemplos de personalización visual

Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas de los siguientes componentes del kit de IU de Places:

El kit de IU de Places ofrece un enfoque de sistema de diseño para la personalización visual basado aproximadamente en Material Design (con algunas modificaciones específicas de Google Maps). Consulta la referencia de Color y Tipografía de Material Design. De forma predeterminada, el diseño se ajusta al lenguaje de diseño visual de Google Maps.

Opciones de personalización de Place Details

La apariencia del componente se personaliza con los structs placesMaterialColor, placesMaterialFont, placesMaterialShape y placesMaterialTheme.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas oscuro y claro. Para personalizar el tema oscuro, agrega valores para .dark y attribution.darkModeColor a tu tema personalizado.

Puedes personalizar los siguientes estilos:

Atributo de tema	Uso
Color
`theme.color.surface`	Fondo del contenedor y del diálogo
`theme.color.outlineDecorative`	Borde del contenedor
`theme.color.primary`	Vínculos, indicador de carga, íconos de descripción general
`theme.color.onSurface`	Encabezados y contenido de diálogos
`theme.color.onSurfaceVariant`	Información del lugar
`theme.color.secondaryContainer`	Fondo del botón
`theme.color.onSecondaryContainer`	Ícono y texto del botón
`theme.color.neutralContainer`	Insignia de revisión de fecha, formas de marcador de posición de carga
`theme.color.onNeutralContainer`	Fecha de revisión, error de carga
`theme.color.positiveContainer`	Insignia de cargador para VE disponible
`theme.color.onPositiveContainer`	Contenido de la insignia de cargador de VE disponible
`theme.color.positive`	Etiqueta de lugar "Abierto ahora"
`theme.color.negative`	Etiqueta de lugar "Cerrado"
`theme.color.info`	Ícono de entrada accesible
`theme.measurement.borderWidthButton`	Botones Abrir en Maps y Aceptar

Tipografía
`theme.font.bodySmall`	Información del lugar
`theme.font.bodyMedium`	Información del lugar, contenido del diálogo
`theme.font.labelMedium`	Contenido de la insignia
`theme.font.labelLarge`	Contenido del botón
`theme.font.headlineMedium`	Encabezados de diálogo
`theme.font.displaySmall`	Nombre del lugar
`theme.font.titleSmall`	Nombre del lugar

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

Medición
`borderWidth`	Contenedor
`theme.measurement.borderWidthButton`

Forma
`theme.shape.cornerRadius`	Contenedor
`theme.shape.cornerRadiusButton`	Botones Abrir en Maps y Aceptar (no incluye el botón de ícono redondo)
`theme.shape.cornerRadiusThumbnail`	Imagen en miniatura del lugar
`theme.shape.cornerRadiusCollageOuter`	Collage de medios
`theme.shape.cornerRadiusCard`	Tarjeta de lugar, tarjeta de opinión del usuario
`theme.shape.cornerRadiusDialog`	Diálogo de divulgación de Google Maps

Atribución de marca de Google Maps
`attribution.lightModeColor`	Botón de divulgación y atribución de Google Maps con tema claro (enums para blanco, gris y negro)
`attribution.darkModeColor`	Botón de atribución y divulgación de Google Maps con tema oscuro (enums para blanco, gris y negro)

Colores de atribución

Las condiciones del servicio de Google Maps requieren que uses uno de los tres colores de la marca para la atribución de Google Maps. Esta atribución debe ser visible y accesible cuando se realicen cambios de personalización.

Ofrecemos 3 colores de la marca para elegir que se pueden configurar de forma independiente para los temas claros y oscuros:

Tema claro: attributionColorLight con enumeraciones para blanco, gris y negro.
Tema oscuro: attributionColorDark con enumeraciones para blanco, gris y negro.

Ejemplos

Esta función crea un tema que anula los atributos de estilo predeterminados. Los atributos de tema que no se anulan usan los diseños predeterminados.

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
}

Diseño personalizado

Colores de atribución

Ejemplos

Swift

Ejemplos completos para cada componente