Komponent Autouzupełnianie miejsc w pakiecie Basic

Komponent Autouzupełnianie miejsc w pakiecie Places UI Kit Basic umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent jest pełnoekranową nakładką z paskiem wyszukiwania, w 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 Autouzupełnianie miejsc w pakiecie Basic ma te opcje dostosowywania: gęstość listy i uwzględnianie ikon lokalizacji. Aby dostosować komponent, użyj AutocompleteUICustomization.

Komponentu Basic Autouzupełnianie miejsc 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 jest otwierany i wysyłane jest zapytanie. Nie będziemy Cię więcej obciążać płatnościami za tę sesję, chyba że sesja wygaśnie lub wybierzesz miejsce z listy.

Dodawanie do aplikacji komponentu Podstawowe autouzupełnianie

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, źródło żądania, aby wyświetlić informacje o odległości, jeśli są dostępne) tak, jakbyś używał(a) autouzupełniania miejsc (nowego) bez pakietu Places UI Kit. Pełne instrukcje i przykładowy kod do utworzenia filtra autouzupełniania znajdziesz w dokumentacji Autouzupełniania miejsc (nowego).

Po utworzeniu filtra autouzupełniania dodaj dostosowania interfejsu. Zobacz 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 wybrać wyświetlanie listy dwuwierszowej lub wielowierszowej. 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 być wyświetlana domyślna ikona miejsca. Użyj opcji w AutocompleteUIIcon (listItemDefaultIcon lub noIcon) w klasie AutocompleteUICustomization.

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolny z domyślnych atrybutów 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.

Pakiet Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wpis dotyczący koloru w pliku values-night/colors.xml.

Więcej informacji o motywach znajdziesz w sekcji Styl niestandardowy.

Dodawanie dostosowań treści i motywu do komponentu Podstawowe autouzupełnianie

Aby dostosować komponent Podstawowe autouzupełnianie, 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

Pakiet Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wpis dotyczący koloru w pliku 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>