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 ein Vollbild-Cover, das eine Suchleiste für Nutzer enthält, in die sie eine Suchanfrage eingeben können. Während der Eingabe wird unter der Suchleiste eine Liste mit automatisch vervollständigten Ergebnissen angezeigt. Wenn der Nutzer auf einen Ort tippt, wird ein Ortsobjekt mit nur einer Orts-ID an den Entwickler zurückgegeben. Diese Komponente ist anpassbar.

Die Komponente „Place Autocomplete (Basic)“ bietet die folgenden Anpassungsoptionen: Listendichte und Einbeziehung von Standortsymbolen. 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

Ihnen wird jedes Mal etwas in Rechnung gestellt, wenn die Komponente geöffnet und eine Abfrage ausgeführt wird. Ihnen wird für diese Sitzung erst wieder etwas in Rechnung gestellt, wenn die Sitzung abläuft oder ein Ort aus der Liste ausgewählt wird.

Komponente „Basic Autocomplete“ zur App hinzufügen

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

Nachdem Sie den Filter für die automatische Vervollständigung erstellt haben, können Sie die UI-Anpassungen hinzufügen. Anpassungsoptionen 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 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, die Typografie, die Abstände, die Rahmen und die Ecken der Komponente „Place Details“ 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. Sie müssen also möglicherweise 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.

Inhalte und Designanpassungen zur Komponente „Einfache automatische Vervollständigung“ hinzufügen

Verwenden Sie die Klasse AutocompleteUICustomization, um die Komponente „Basic Autocomplete“ anzupassen.

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

Das Places UI Kit bietet standardmäßig ein dunkles Design. Sie müssen also möglicherweise 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>