Componente Place Details

Il componente Place Details di Places UI Kit ti consente di aggiungere un singolo componente UI che mostra i dettagli del luogo nella tua app. Questo componente è personalizzabile.

Il componente Dettagli luogo può essere utilizzato in modo indipendente o in combinazione con altri servizi e API di Google Maps Platform. Il componente accetta un ID luogo, un nome della risorsa o coordinate di latitudine/longitudine e restituisce le informazioni di Place Details visualizzate.

Il componente Dettagli luogo è completamente personalizzabile, il che ti consente di modificare caratteri, colori e raggi angolari in base al tuo caso d'uso e alle linee guida per il brand visivo. Puoi personalizzare l'aspetto dei dettagli del luogo fornendo valori PlacesMaterialTheme personalizzati. Puoi anche personalizzare i campi dei dettagli del luogo inclusi specificando un elenco di voci PlaceDetailsCompactView, ognuna delle quali corrisponde a un'informazione mostrata sul luogo.

Varianti di layout

Il componente Place Details supporta due varianti di layout principali:

• Compatto:un layout per visualizzare in anteprima le informazioni chiave.
• Completo:un layout completo che mostra tutti i dettagli disponibili del luogo.

Il layout compatto può essere visualizzato in orientamento verticale o orizzontale. In questo modo puoi integrare il componente in vari layout di design e dimensioni dello schermo. Il layout completo può essere visualizzato solo in verticale.

Il componente Dettagli del luogo ti offre un controllo granulare sui contenuti visualizzati nel componente. Ogni elemento (come foto, recensioni e dati di contatto) può essere mostrato o nascosto singolarmente, consentendo una personalizzazione precisa dell'aspetto dei componenti e della densità delle informazioni.

Visualizzazione compatta dei dettagli del luogo

La visualizzazione compatta di Place Details (PlaceDetailsCompactView) mostra i dettagli di un luogo selezionato utilizzando uno spazio minimo. Questo può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza sui social media come la condivisione di una posizione in una chat, come suggerimento per selezionare la tua posizione attuale o all'interno di un articolo multimediale per fare riferimento al luogo su Google Maps.

Visualizzazione completa dei dettagli del luogo

La visualizzazione completa dei dettagli del luogo (PlaceDetailsView) offre una superficie più ampia per visualizzare le informazioni dettagliate sul luogo e consente di visualizzare più tipi di informazioni.

Opzioni di visualizzazione dei contenuti

Puoi specificare i contenuti da visualizzare utilizzando le enumerazioni in PlaceDetailsCompactContent o PlaceDetailsContent.

Fatturazione

Quando utilizzi Places UI Kit, ti viene addebitato un costo ogni volta che viene chiamato il metodo PlaceDetailsQuery. Se carichi lo stesso luogo più volte, ti viene addebitato un importo per ogni richiesta.

Aggiungere i dettagli dei luoghi all'app

Il componente Place Details è una visualizzazione Swift UI. Puoi personalizzare l'aspetto e lo stile delle informazioni sui dettagli del luogo in base alle tue esigenze e all'aspetto della tua app. Scopri di più sulla personalizzazione.

Puoi scegliere di caricare il componente Dettagli luogo con un ID luogo, un nome risorsa o coordinate di latitudine/longitudine. Puoi scegliere uno o più metodi. Imposta identifier nella struttura PlaceDetailsQuery su .placeID, .resourceName o .coordinate.

La posizione predefinita per la visualizzazione compatta è verticale. Se vuoi un layout orizzontale, specifica orientation: .horizontal in PlaceDetailsCompactView. Puoi anche specificare facoltativamente orientation: .vertical per maggiore chiarezza. La visualizzazione completa può essere visualizzata solo in verticale.

Vedi gli esempi nella sezione Esempi di componenti Dettagli luogo.

Personalizzare l'aspetto visivo

Stile personalizzato

Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli del componente Dettagli del luogo.

Il kit UI Places offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta il riferimento di Material Design per Colori e Tipografia. Per impostazione predefinita, lo stile rispetta il linguaggio di progettazione visiva di Google Maps.

Places UI Kit fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro che quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tuo tema personalizzato.

Per ulteriori informazioni sullo stile, consulta la sezione Stile personalizzato.

Personalizzazione di larghezza e altezza

Visualizzazioni compatte

Larghezze consigliate:

• Orientamento verticale: tra 180 e 300 pixel.
• Orientamento orizzontale: tra 180 e 500 pixel.

La best practice prevede di non impostare un'altezza per le visualizzazioni compatte. In questo modo, l'altezza della finestra verrà impostata in base ai contenuti, consentendo la visualizzazione di tutte le informazioni.

Le larghezze inferiori a 160 pixel potrebbero non essere visualizzate correttamente.

Visualizzazioni complete

Per le visualizzazioni complete, la larghezza consigliata è compresa tra 250 e 450 pixel. Una larghezza inferiore a 250 pixel potrebbe non essere visualizzata correttamente.

Puoi impostare l'altezza del componente: la visualizzazione verticale dei dettagli del luogo scorrerà verticalmente nello spazio assegnato.

La best practice prevede di impostare un'altezza per le visualizzazioni complete. In questo modo, i contenuti nella finestra scorreranno correttamente.

Esempi di componenti Place Details

Crea una visualizzazione completa con layout verticale

  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
    )

Creare una visualizzazione compatta con layout orizzontale

  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
    )

Creare una visualizzazione completa con layout verticale

  @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
  )

Personalizzare gli attributi di stile

Questo esempio mostra come personalizzare gli attributi di stile predefiniti di una visualizzazione completa o compatta.

Places UI Kit fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro che quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tema personalizzato.

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

Visualizzare contenuti specifici

Questo esempio crea una visualizzazione compatta che mostra solo contenuti multimediali, indirizzo, valutazione e tipo, utilizzando il tema creato nell'esempio precedente.

  @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)
  }