Componente di base Place Autocomplete

Il componente di completamento automatico di base di Places UI Kit consente di aggiungere un singolo componente UI che restituisce un ID luogo quando un utente seleziona un luogo. Il componente è una copertina a schermo intero che fornisce una barra di ricerca in cui gli utenti possono inserire una query. Man mano che l'utente digita, sotto la barra di ricerca viene visualizzato un elenco di risultati di completamento automatico. Quando l'utente tocca un luogo, allo sviluppatore viene restituito un oggetto luogo con solo l'ID luogo. Questo componente è personalizzabile.

Il componente Basic Place Autocomplete ha le seguenti opzioni di personalizzazione: densità dell'elenco e inclusione o meno delle icone di località. Utilizza AutocompleteUICustomization per personalizzare il componente.

Puoi utilizzare il componente Completamento automatico di base dei luoghi in modo indipendente o in combinazione con altri servizi e API di Google Maps Platform.

Fatturazione

Viene addebitato un costo ogni volta che il componente viene aperto e viene eseguita una query. Non ti verrà addebitato alcun importo per la sessione, a meno che non scada o venga selezionato un luogo dall'elenco.

Aggiungere il componente Completamento automatico di base all'app

Imposta i parametri del filtro di completamento automatico (ad esempio, i tipi da restituire, il paese a cui limitare i risultati, le coordinate della regione per i risultati, l'origine della richiesta per visualizzare le informazioni sulla distanza, se disponibili) come faresti per utilizzare Place Autocomplete (New) senza Places UI Kit. Consulta la documentazione di Place Autocomplete (New) per istruzioni complete e un esempio di codice per creare un filtro di completamento automatico.

Dopo aver creato il filtro di completamento automatico, aggiungi le personalizzazioni della UI. Visualizza le opzioni e le istruzioni di personalizzazione.

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

Vedi l'esempio completo.

Personalizzare il componente Completamento automatico di base

Personalizzare i contenuti

Compattezza elenco

Puoi scegliere di visualizzare un elenco di due righe o un elenco multilinea. Utilizza le opzioni in AutocompleteListDensity (TWO_LINE o MULTI_LINE) nel corso AutocompleteUICustomization. Se non specifichi la densità dell'elenco, il componente visualizzerà un elenco di due righe.

Icona della posizione

Puoi scegliere se visualizzare un'icona del luogo predefinita nell'elenco dei risultati. Utilizza le opzioni in AutocompleteUIIcon (listItemDefaultIcon o noIcon) nel corso AutocompleteUICustomization.

Personalizzare il tema

Quando crei un'istanza di un frammento, puoi specificare un tema che sostituisce uno qualsiasi degli attributi di stile predefiniti. Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli del componente Dettagli del luogo. Il valore predefinito è PlacesMaterialTheme.

Gli attributi del tema non sostituiti utilizzano gli stili predefiniti.

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 una voce per il colore in values-night/colors.xml.

Per saperne di più sui temi, consulta la sezione Stili personalizzati.

Aggiungere personalizzazioni di contenuti e temi al componente Completamento automatico di base

Utilizza la classe AutocompleteUICustomization per personalizzare il componente Completamento automatico di base.

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

Esempio

Aggiungi un componente di completamento automatico di base personalizzato.

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

Personalizzare il tema

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <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>