Kit UI per i dettagli dei luoghi (sperimentale)

Visualizzazione compatta dei dettagli del luogo

L'UI Kit di dettagli dei luoghi per i dettagli dei luoghi ti consente di aggiungere un singolo componente dell'interfaccia utente che mostra i dettagli dei luoghi nella tua app. L'UI Kit può essere utilizzato indipendentemente o in combinazione con altre API e altri servizi di Google Maps Platform. L'UI kit accetta un ID luogo o le coordinate di latitudine/longitudine e restituisce le informazioni di Dettagli luogo visualizzate.

L'UI kit offre una visualizzazione compatta, che può essere visualizzata orizzontalmente o verticalmente. Puoi personalizzare l'aspetto dei dettagli del luogo ignorando uno degli attributi del tema predefinito. Puoi anche personalizzare i campi dei dettagli dei luoghi inclusi specificando un elenco di voci Content, ciascuna delle quali corrisponde a un'informazione mostrata sul luogo.

Fatturazione

Quando utilizzi l'UI Kit di dettagli dei luoghi per i dettagli dei luoghi, ti viene addebitato un costo per ogni luogo caricato utilizzando il widget. Se carichi lo stesso luogo più volte, ti viene addebitato un importo per ogni richiesta.

Attivare il kit UI di Places

Prima di utilizzare l'UI Kit di Places, devi:

Esempi di kit UI di Place Details

Puoi aggiungere dettagli sui luoghi alla tua app aggiungendo un frammento a un layout. Quando esegui l'inizializzazione del frammento, puoi personalizzare l'aspetto delle informazioni sui dettagli del luogo in base alle tue esigenze e all'aspetto della tua app.

Puoi specificare l'orientamento (orizzontale o verticale), le sostituzioni del tema e i contenuti. Le opzioni di contenuti sono media, indirizzo, valutazione, prezzo, tipo, ingresso accessibile, link a Maps e link alle indicazioni stradali. [Guarda un esempio di personalizzazione]().

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

Esempio di personalizzazione

Quando esegui l'inizializzazione di un frammento, puoi specificare un tema che sostituisce qualsiasi attributo dello stile predefinito. Gli attributi tema non sostituiti utilizzano gli stili predefiniti. Se vuoi supportare un tema scuro, puoi aggiungere una voce per il colore in values-night/colors.xml. 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Puoi personalizzare i seguenti stili:

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (enum per bianco, grigio e nero)
  • placesColorAttributionDark (enum per bianco, grigio e nero)

Questo esempio personalizza i contenuti standard.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

Questo esempio personalizza tutti i contenuti.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)