Podstawowy komponent Autouzupełnianie miejsc

Komponent Podstawowe autouzupełnianie miejsc w interfejsie Places UI Kit umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent to nakładka na pełnym ekranie, która zawiera pasek wyszukiwania, na którym użytkownicy mogą wpisać zapytanie. Gdy użytkownik wpisuje tekst, pod paskiem wyszukiwania wyświetla się lista wyników autouzupełniania. Gdy użytkownik kliknie miejsce, deweloperowi zostanie zwrócony obiekt miejsca zawierający tylko identyfikator miejsca. Ten komponent można dostosować.

Komponent podstawowego automatycznego uzupełniania miejsc ma te opcje dostosowywania: gęstość listy i to, czy mają być uwzględniane ikony lokalizacji. Użyj AutocompleteUICustomization, aby dostosować komponent.

Komponent podstawowego autouzupełniania miejsca możesz używać niezależnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform.

Płatności

Opłata jest naliczana za każdym razem, gdy komponent zostanie otwarty i zostanie wysłane zapytanie. Nie obciążymy Cię ponownie płatnością za tę sesję, chyba że wygaśnie lub wybierzesz miejsce z listy.

Dodawanie do aplikacji komponentu podstawowego autouzupełniania

Ustaw parametry filtra autouzupełniania (np. typy do zwrócenia, kraj, do którego mają być ograniczone wyniki, współrzędne regionu dla wyników, pochodzenie żądania, aby wyświetlać informacje o odległości, jeśli są dostępne) tak jak w przypadku korzystania z autouzupełniania miejsc (nowego) bez pakietu Places UI Kit. Pełne instrukcje i przykład kodu do utworzenia filtra autouzupełniania znajdziesz w dokumentacji autouzupełniania miejsc (nowego).

Po utworzeniu filtra autouzupełniania dodaj dostosowania interfejsu. Wyświetl opcje dostosowywania i instrukcje

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

Zobacz pełny przykład

Dostosowywanie komponentu Podstawowe autouzupełnianie

Dostosowywanie treści

Gęstość listy

Możesz wyświetlić listę dwuwierszową lub wielowierszową. Użyj opcji w AutocompleteListDensity (TWO_LINE lub MULTI_LINE) w klasie AutocompleteUICustomization. Jeśli nie określisz gęstości listy, komponent wyświetli listę dwuwierszową.

Ikona lokalizacji

Możesz wybrać, czy na liście wyników ma się wyświetlać domyślna ikona miejsca. Użyj opcji w AutocompleteUIIcon (listItemDefaultIcon lub noIcon) w klasie AutocompleteUICustomization.

Dostosowywanie motywu

Podczas tworzenia instancji fragmentu możesz określić motyw, który zastąpi dowolne domyślne atrybuty stylu. Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Szczegóły miejsca. Wartość domyślna to PlacesMaterialTheme.

Wszystkie atrybuty motywu, które nie zostały zastąpione, używają stylów domyślnych.

Zestaw interfejsu Miejsc domyślnie zawiera ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wpis koloru w values-night/colors.xml.

Więcej informacji o motywach znajdziesz w sekcji Niestandardowe style.

Dodawanie treści i dostosowywanie motywu w komponencie podstawowego autouzupełniania

Aby dostosować komponent podstawowego autouzupełniania, użyj klasy AutocompleteUICustomization.

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

Przykład

Dodaj niestandardowy komponent Podstawowe autouzupełnianie.

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

Dostosowywanie motywu

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