Estilo personalizado

Personalização visual dos detalhes do lugar — Exemplos de personalização visual

É possível personalizar as cores, a tipografia, o espaçamento, as bordas e os cantos destes componentes do kit de interface do Places e recursos que não são do kit de interface:

O kit de interface do Places oferece uma abordagem de sistema de design para personalização visual baseada aproximadamente no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para Cor e Tipografia. Por padrão, o estilo segue a linguagem de design visual do Google Maps.

Opções de personalização de detalhes do lugar

A aparência do componente é personalizada com as structs placesMaterialColor, placesMaterialFont, placesMaterialShape e placesMaterialTheme.

O kit de interface do Places oferece um tema escuro por padrão. Por isso, talvez seja necessário personalizar os temas claro e escuro. Para personalizar o tema escuro, adicione valores para .dark e attribution.darkModeColor ao seu tema personalizado.

É possível personalizar os seguintes estilos:

Atributo do tema	Uso
Cor
`theme.color.surface`	Segundo plano do contêiner e da caixa de diálogo
`theme.color.outlineDecorative`	Borda do contêiner
`theme.color.primary`	Links, indicador de carregamento, ícones de visão geral
`theme.color.onSurface`	Títulos, conteúdo da caixa de diálogo
`theme.color.onSurfaceVariant`	Informações sobre o lugar
`theme.color.secondaryContainer`	Plano de fundo do botão
`theme.color.onSecondaryContainer`	Texto e ícone do botão
`theme.color.neutralContainer`	Revisar o selo de data, carregar formas de marcador de posição
`theme.color.onNeutralContainer`	Data da avaliação, erro ao carregar
`theme.color.positiveContainer`	Selo de carregador de VE disponível
`theme.color.onPositiveContainer`	Conteúdo disponível do selo de carregador de VE
`theme.color.positive`	Colocar o marcador "Aberto agora"
`theme.color.negative`	O rótulo "Fechado" agora é "Fechado"
`theme.color.info`	Ícone de entrada acessível
`theme.measurement.borderWidthButton`	Botões "Abrir no Maps" e "OK"

Tipografia
`theme.font.bodySmall`	Informações sobre o lugar
`theme.font.bodyMedium`	Informações do lugar, conteúdo da caixa de diálogo
`theme.font.labelMedium`	Conteúdo do selo
`theme.font.labelLarge`	Conteúdo do botão
`theme.font.headlineMedium`	Títulos de caixa de diálogo
`theme.font.displaySmall`	Nome do lugar
`theme.font.titleSmall`	Nome do lugar

Espaçamento
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Medição
`borderWidth`	Contêiner
`theme.measurement.borderWidthButton`

Forma
`theme.shape.cornerRadius`	Contêiner
`theme.shape.cornerRadiusButton`	Botões "Abrir no Maps" e "OK" (exclui o botão de ícone redondo)
`theme.shape.cornerRadiusThumbnail`	Colocar imagem em miniatura
`theme.shape.cornerRadiusCollageOuter`	Colagem de mídia
`theme.shape.cornerRadiusCard`	Card de lugar, card de avaliação do usuário
`theme.shape.cornerRadiusDialog`	Caixa de diálogo de divulgação do Google Maps

Atribuição de marca do Google Maps
`attribution.lightModeColor`	Botão de atribuição e divulgação do Google Maps no tema claro (enums para branco, cinza e preto)
`attribution.darkModeColor`	Botão de atribuição e divulgação do Google Maps no tema escuro (enums para branco, cinza e preto)

Cores de atribuição

Os Termos de Serviço do Google Maps exigem que você use uma das três cores da marca para a atribuição do Google Maps. Essa atribuição precisa estar visível e acessível quando as mudanças de personalização forem feitas.

Oferecemos três cores de marca para escolher, que podem ser definidas de forma independente para temas claros e escuros:

Tema claro: attributionColorLight com enums para branco, cinza e preto.
Tema escuro: attributionColorDark com enums para branco, cinza e preto.

Exemplos

Essa função cria um tema que substitui os atributos de estilo padrão. Todos os atributos do tema que não forem substituídos usarão os estilos padrão.

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
}

Estilo personalizado

Cores de atribuição

Exemplos

Swift

Exemplos completos para cada componente