Componente Place Details

O componente Place Details do Places UI Kit permite adicionar um componente de interface individual que mostra detalhes de lugares no seu app. Esse componente é personalizável.

O componente Detalhes do lugar pode ser usado de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps. O componente usa um ID do lugar, um nome de recurso ou coordenadas de latitude/longitude e retorna informações renderizadas de Detalhes do lugar.

O componente Place Details é totalmente temático, permitindo personalizar fontes, cores e raios de canto para corresponder ao seu caso de uso e às diretrizes da marca visual. É possível personalizar a aparência dos detalhes do lugar fornecendo valores PlacesMaterialTheme personalizados. Também é possível personalizar quais campos de detalhes do lugar são incluídos especificando uma lista de entradas PlaceDetailsCompactView, cada uma correspondendo a uma informação mostrada sobre o lugar.

Variantes de layout

O componente Place Details oferece suporte a duas variantes principais de layout:

• Compacto:um layout para visualizar informações importantes.
• Completo:um layout abrangente que mostra todos os detalhes disponíveis do lugar.

O layout compacto pode ser mostrado na orientação vertical ou horizontal. Isso permite integrar o componente a vários layouts de design e tamanhos de tela. O layout completo só pode ser exibido na vertical.

O componente "Detalhes do lugar" oferece controle granular sobre o conteúdo exibido. Cada elemento (como fotos, avaliações e informações de contato) pode ser mostrado ou ocultado individualmente, permitindo uma personalização precisa da aparência dos componentes e da densidade de informações.

Visualização compacta de detalhes do lugar

A visualização compacta do Place Details (PlaceDetailsCompactView) mostra detalhes de um lugar selecionado usando o mínimo de espaço possível. Isso pode ser útil em uma janela de informações que destaca um lugar em um mapa, em uma experiência de mídia social, como compartilhar um local em um chat, como uma sugestão para selecionar seu local atual ou em um artigo de mídia para referenciar o lugar no Google Maps.

Visualização completa do Place Details

A visualização completa de detalhes do lugar (PlaceDetailsView) oferece uma superfície maior para mostrar informações detalhadas e permite exibir mais tipos de informações.

Opções de exibição de conteúdo

É possível especificar qual conteúdo mostrar usando as enumerações em PlaceDetailsCompactContent ou PlaceDetailsContent.

Faturamento

Ao usar o kit de interface do usuário de detalhes do lugar, você recebe uma cobrança a cada vez que o método PlaceDetailsQuery é chamado. Se você carregar o mesmo lugar várias vezes, cada solicitação será cobrada.

Adicionar Place Details ao seu app

O componente Place Details é uma visualização da interface do Swift. Você pode personalizar a aparência das informações de detalhes do lugar de acordo com suas necessidades e a aparência do seu app. Saiba mais sobre a personalização.

Você pode carregar o componente Place Details com um ID de lugar, um nome de recurso ou coordenadas de latitude/longitude. Você pode escolher qualquer método ou vários. Defina o identifier na estrutura PlaceDetailsQuery como .placeID, .resourceName ou .coordinate.

A posição padrão da visualização compacta é vertical. Se você quiser um layout horizontal, especifique orientation: .horizontal em PlaceDetailsCompactView. Também é possível especificar orientation: .vertical para maior clareza. A visualização completa só pode ser mostrada na vertical.

Confira exemplos na seção Exemplos de componentes de detalhes do lugar.

Personalizar a aparência visual

Estilo personalizado

É possível personalizar as cores, a tipografia, o espaçamento, as bordas e os cantos do componente "Detalhes do lugar".

O kit de interface do Places oferece uma abordagem de sistema de design para personalização visual baseada 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.

O Places UI Kit 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.

Consulte a seção Estilo personalizado para mais informações.

Personalização de largura e altura

Visualizações compactas

Larguras recomendadas:

• Orientação vertical: entre 180 e 300 pixels.
• Orientação horizontal: entre 180 e 500 pixels.

A prática recomendada é não definir uma altura para as visualizações compactas. Isso permite que o conteúdo na janela defina a altura, mostrando todas as informações.

Larguras menores que 160 pixels podem não ser exibidas corretamente.

Visualizações completas

Para visualizações completas, a largura recomendada é entre 250 e 450 pixels. Uma largura menor que 250 pixels pode não ser exibida corretamente.

É possível definir a altura do componente: a visualização vertical de detalhes do lugar rola verticalmente dentro do espaço alocado.

A prática recomendada é definir uma altura para visualizações completas. Isso permite que o conteúdo na janela role corretamente.

Exemplos de componentes Place Details

Criar uma visualização completa com layout vertical

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Criar uma visualização compacta com layout horizontal

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Criar uma visualização completa com layout vertical

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Personalizar atributos de estilo

Este exemplo mostra como personalizar os atributos de estilo padrão de uma visualização completa ou compacta.

O Places UI Kit 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.

  // 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
}

Mostrar conteúdo específico

Este exemplo cria uma visualização compacta que mostra apenas mídia, endereço, classificação e tipo, usando o tema criado no exemplo anterior.

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }