Componente Place Details

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

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

Il componente Place Details è completamente personalizzabile, il che ti consente di personalizzare caratteri, colori e raggi degli angoli in base al tuo caso d'uso e alle linee guida del 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 PlaceDetailsCompactView voci, 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 del luogo disponibili.

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

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

Visualizzazione compatta di Place Details

La visualizzazione compatta di Place Details (PlaceDetailsCompactView) esegue il rendering dei dettagli di un luogo selezionato utilizzando uno spazio minimo. Questa opzione può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza di social media come la condivisione di una posizione in una chat, come suggerimento per la selezione della tua posizione attuale o all'interno di un articolo di notizie per fare riferimento al luogo su Google Maps.

Visualizzazione completa di Place Details

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

Opzioni di visualizzazione dei contenuti

Puoi specificare quali contenuti visualizzare utilizzando gli enum in PlaceDetailsCompactContent o PlaceDetailsContent.

Fatturazione

Quando utilizzi Place Details UI Kit, ti viene addebitato un importo 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 del luogo all'app

Il componente Place Details è una visualizzazione dell'interfaccia utente di Swift. Puoi personalizzare l'aspetto 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 Place Details con un ID luogo, un nome risorsa o coordinate di latitudine/longitudine. Puoi scegliere uno o più metodi. Imposta identifier nella PlaceDetailsQuery struct su .placeID, .resourceName, o .coordinate.

La posizione predefinita per la visualizzazione compatta è verticale. Se preferisci 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.

Consulta gli esempi nella sezione Esempi di componenti Place Details.

Personalizzare l'aspetto visivo

Stile personalizzato

Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli del componente Place Details.

Places UI Kit 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 Colore e Tipografia. Per impostazione predefinita, lo stile è conforme al linguaggio di progettazione visiva di Google Maps.

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

Per ulteriori informazioni sugli stili, 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 consiste nel non impostare un'altezza per le visualizzazioni compatte. In questo modo, i contenuti della finestra possono impostare l'altezza, 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 di Place Details scorrerà verticalmente nello spazio assegnato.

La best practice consiste nell'impostare un'altezza per le visualizzazioni complete. In questo modo, i contenuti della finestra possono scorrere correttamente.

Esempi di componenti Place Details

Creare 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()
    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()
    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()
  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 potrebbe essere necessario personalizzare sia il tema scuro sia quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tuo 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)
  }