Einfache Place Autocomplete-Komponente

Mit der Komponente „Basic Place Autocomplete“ 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, die eine Suchleiste enthält, in die Nutzer eine Anfrage eingeben können. Während der Nutzer tippt, wird unter der Suchleiste eine Liste mit Ergebnissen der automatischen Vervollständigung angezeigt. Wenn der Nutzer auf einen Ort tippt, wird dem Entwickler ein Ortsobjekt mit nur der Orts-ID zurückgegeben. Diese Komponente kann angepasst werden.

Die Komponente „Basic Place Autocomplete“ bietet die folgenden Anpassungsoptionen: Listendichte und ob Standortsymbole einbezogen werden sollen. Verwenden Sie AutocompleteUICustomization, um die Komponente anzupassen.

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

Abrechnung

Die Abrechnung erfolgt jedes Mal, wenn die Komponente geöffnet und eine Anfrage gestellt wird. Für diese Sitzung werden Ihnen keine weiteren Kosten in Rechnung gestellt, es sei denn, die Sitzung läuft ab oder Sie wählen einen Ort aus der Liste aus.

Basic Autocomplete-Komponente in Ihre App einfügen

Legen Sie die Autocomplete-Filterparameter fest, 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, sofern verfügbar. Das funktioniert genauso wie bei der Verwendung von Place Autocomplete (New) ohne das Places UI Kit. Eine vollständige Anleitung und ein Beispiel für den Code zum Erstellen eines Filters für die automatische Vervollständigung finden Sie in der Dokumentation zu Place Autocomplete (New).

Nachdem Sie den Autocomplete-Filter erstellt haben, können Sie die Anpassungen der Benutzeroberfläche hinzufügen. Personalisierungsoptionen und ‑anleitung ansehen

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

Vollständiges Beispiel ansehen

Komponente für die einfache automatische Vervollständigung anpassen

Inhalte anpassen

Kompaktheitsgrad der Liste

Sie können entweder eine zweizeilige oder eine mehrzeilige Liste anzeigen lassen. Verwenden Sie die Optionen in AutocompleteListDensity (TWO_LINE oder MULTI_LINE) in der Klasse AutocompleteUICustomization. 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 Klasse AutocompleteUICustomization.

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 zum Theming finden Sie im Abschnitt Benutzerdefinierte Formatierung.

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

Mit der Klasse AutocompleteUICustomization können Sie die Komponente „Einfache automatische Vervollständigung“ anpassen.

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

Beispiel

Fügen Sie eine benutzerdefinierte Komponente für die automatische Vervollständigung hinzu.

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

Design anpassen

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