Einfache Place Autocomplete-Komponente

Mit der einfachen Place Autocomplete-Komponente des Places UI Kit können Sie eine einzelne UI-Komponente hinzufügen, die eine Orts-ID zurückgibt, wenn ein Nutzer einen Ort auswählt. Die Komponente ist eine Vollbildabdeckung mit einer Suchleiste, in die Nutzer eine Abfrage eingeben können. Während der Eingabe wird unter der Suchleiste eine Liste mit Vorschlägen für die automatische Vervollständigung angezeigt. Wenn der Nutzer auf einen Ort tippt, wird ein Ortsobjekt mit nur der Orts-ID an den Entwickler zurückgegeben. Diese Komponente ist anpassbar.

Für die einfache Place Autocomplete-Komponente gibt es die folgenden Anpassungsoptionen: Listendichte und ob Standortsymbole enthalten sein sollen. Verwenden Sie AutocompleteUICustomization, um die Komponente anzupassen.

Sie können die einfache Place Autocomplete-Komponente unabhängig oder in Verbindung mit anderen Google Maps Platform-APIs und -Diensten verwenden.

Abrechnung

Sie werden jedes Mal in Rechnung gestellt, wenn die Komponente geöffnet und eine Abfrage ausgeführt wird. Für diese Sitzung werden Ihnen keine weiteren Kosten in Rechnung gestellt, es sei denn, die Sitzung läuft ab oder ein Ort wird aus der Liste ausgewählt.

Einfache Autocomplete-Komponente Ihrer App hinzufügen

Legen Sie die Parameter für den Autocomplete-Filter so fest, wie Sie es tun würden, wenn Sie Place Autocomplete (New) ohne das Places UI Kit verwenden (z. B. die zurückzugebenden Typen, das Land, auf das die Ergebnisse beschränkt werden sollen, die Regionskoordinaten für die Ergebnisse und den Ursprung der Anfrage, um Entfernungsangaben anzuzeigen, falls verfügbar). Eine vollständige Anleitung und ein Codebeispiel zum Erstellen eines Autocomplete-Filters finden Sie in der Dokumentation zu Place Autocomplete (New).

Nachdem Sie den Autocomplete-Filter erstellt haben, fügen Sie die UI-Anpassungen hinzu. Weitere Informationen finden Sie unter Anpassungsoptionen und -anleitung.

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

Vollständiges Beispiel ansehen.

Einfache Autocomplete-Komponente anpassen

Inhalt anpassen

Listendichte

Sie können eine zwei- oder mehrzeilige Liste anzeigen. Verwenden Sie die Optionen in AutocompleteListDensity (TWO_LINE oder MULTI_LINE) in der AutocompleteUICustomization Klasse. Wenn Sie die Listendichte nicht angeben, wird in der Komponente eine zweizeilige Liste angezeigt.

Standortsymbol

Sie können festlegen, ob in der Ergebnisliste ein Standardsymbol für Orte angezeigt werden soll. Verwenden Sie die Optionen in AutocompleteUIIcon (listItemDefaultIcon oder noIcon) in der AutocompleteUICustomization Klasse.

Design anpassen

Sie können ein Design angeben, das alle Standardstilattribute überschreibt. Sie können die Farben, Typografie, Abstände, Rahmen und Ecken der Komponente „Ortsdetails“ anpassen. Der Standardwert ist PlacesMaterialTheme.

Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie in values-night/colors.xml einen Eintrag für die Farbe hinzu.

Weitere Informationen zu Designs finden Sie im Abschnitt Benutzerdefinierte Stile.

Inhalts- und Designanpassungen zur einfachen Autocomplete-Komponente hinzufügen

Verwenden Sie die AutocompleteUICustomization Klasse, um die einfache Autocomplete-Komponente anzupassen.

.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()
)

Beispiel

Benutzerdefinierte einfache Autocomplete-Komponente hinzufügen

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

Design anpassen

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie in values-night/colors.xml einen Eintrag für die Farbe hinzu.

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