Componente Place Details

O componente Place Details do Kit de Interface do Places 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 de 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 visuais da marca. É possível personalizar a aparência dos detalhes do lugar fornecendo valores PlacesMaterialTheme personalizados. Você também pode personalizar quais campos de detalhes do lugar serã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 Detalhes do lugar é compatível com 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 a personalização precisa da aparência dos componentes e da densidade de informações.

Exibição compacta de Place Details

A visualização compacta do Place Details (PlaceDetailsCompactView) renderiza detalhes de um lugar selecionado usando o mínimo de espaço. 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 de 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 de Place Details, 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. É possível personalizar a aparência das informações de detalhes do lugar para atender às suas necessidades e combinar com 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 um ou vários métodos. 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 fins de esclarecimento. A visualização completa só pode ser mostrada na vertical.

Confira exemplos na seção Exemplos de componentes de Place Details.

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 kit de interface do Places oferece um tema escuro por padrão. Por isso, talvez seja necessário personalizar os temas escuro e claro. 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.

Você pode definir a altura do componente: a visualização vertical de detalhes do lugar vai rolar 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 do Place Details

Criar uma visualização completa com layout vertical

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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()
  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 kit de interface do Places oferece um tema escuro por padrão. Por isso, talvez seja necessário personalizar os temas escuro e claro. 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)
  }