Componente Basic Place Autocomplete

Il componente Basic Place Autocomplete di Places UI Kit ti consente di aggiungere un singolo componente dell'interfaccia utente che restituisce un ID luogo quando un utente seleziona un luogo. Il componente è una copertura 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 della località. Utilizza AutocompleteUICustomization per personalizzare il componente.

Puoi utilizzare il componente Basic Place Autocomplete in modo indipendente o in combinazione con altre API e servizi di Google Maps Platform.

Fatturazione

Ti viene addebitato un importo 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 non venga selezionato un luogo dall'elenco.

Aggiungere il componente Basic Autocomplete 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. Per istruzioni complete e esempi di codice per creare un filtro di completamento automatico, consulta la documentazione di Place Autocomplete (New).

Dopo aver creato il filtro di completamento automatico, aggiungi le personalizzazioni dell'interfaccia utente. Consulta le opzioni e le istruzioni di personalizzazione.

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

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

Consulta l'esempio completo.

Personalizzare il componente Basic Autocomplete

Personalizzare i contenuti

Densità dell'elenco

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

Icona della località

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

Personalizzare il tema

Puoi specificare un tema che sostituisce gli attributi di stile predefiniti. Puoi personalizzare i colori, la tipografia, la spaziatura, i bordi e gli angoli del componente Dettagli 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 potrebbe essere necessario personalizzare sia il tema scuro sia quello chiaro. Per personalizzare il tema scuro, aggiungi una voce per il colore in values-night/colors.xml.

Per ulteriori informazioni sui temi, consulta la sezione Stili personalizzati.

Aggiungere personalizzazioni di contenuti e temi al componente Basic Autocomplete

Utilizza la AutocompleteUICustomization classe per personalizzare il componente Basic Autocomplete.

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

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

Esempio

Aggiungere un componente Basic Autocomplete personalizzato.

  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)

  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

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

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