Выберите платформу: Android iOS JavaScript

Базовый компонент автозаполнения мест

Компонент Basic Place Autocomplete в Places UI Kit позволяет добавить отдельный компонент пользовательского интерфейса, который возвращает идентификатор места, когда пользователь выбирает место. Компонент представляет собой полноэкранную обложку со строкой поиска, в которую пользователи могут вводить запросы. По мере ввода текста под строкой поиска будет появляться список вариантов автозаполнения. Когда пользователь нажимает на место, разработчику возвращается объект места, содержащий только идентификатор места. Этот компонент можно настраивать.

У компонента "Базовое автозаполнение мест" есть следующие варианты настройки: плотность списка и наличие значков местоположения. Чтобы настроить компонент, используйте AutocompleteUICustomization.

Компонент Basic Place Autocomplete можно использовать отдельно или в сочетании с другими API и сервисами платформы Google Карт.

Оплата

Плата взимается каждый раз, когда компонент открывается и выполняется запрос. Средства за этот сеанс больше не будут списываться, пока он не завершится или пока вы не выберете место из списка.

Как добавить в приложение компонент Basic Autocomplete

Задайте параметры фильтра автозаполнения (например, типы возвращаемых данных, страну, для которой нужно ограничить результаты, координаты региона для результатов, источник запроса для отображения информации о расстоянии, если она доступна), как если бы вы использовали Place Autocomplete (New) без Places UI Kit. Полные инструкции и пример кода для создания фильтра автозаполнения мест можно найти в документации по функции "Автозаполнение мест (новая версия)".

После того как вы создадите фильтр автозаполнения, добавьте настройки интерфейса. Посмотрите варианты настроек и инструкции.

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

Посмотреть полный пример

Как настроить базовый компонент автозаполнения

Настроить контент

Плотность списка

Вы можете выбрать двухстрочный или многострочный список. Используйте варианты в AutocompleteListDensity (TWO_LINE или MULTI_LINE) в классе AutocompleteUICustomization. Если плотность списка не указана, компонент отобразит список из двух строк.

Значок местоположения

Вы можете выбрать, показывать ли значок места по умолчанию в списке результатов. Используйте варианты в AutocompleteUIIcon (listItemDefaultIcon или noIcon) в классе AutocompleteUICustomization.

Как настроить тему

Вы можете указать тему, которая переопределит любые атрибуты стиля по умолчанию. Вы можете настроить цвета, типографику, интервалы, границы и углы компонента информации о местах. Значение по умолчанию – PlacesMaterialTheme.

Для всех атрибутов темы, которые не переопределены, используются стили по умолчанию.

По умолчанию в Places UI Kit используется тёмная тема, поэтому вам может потребоваться настроить как тёмную, так и светлую тему. Чтобы настроить темную тему, добавьте запись для цвета в values-night/colors.xml.

Подробнее о собственных стилях…

Как добавить контент и настроить тему для компонента "Базовое автозаполнение"

Используйте класс 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()
)

Пример

Добавьте специальный компонент Basic Autocomplete.

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

Как настроить тему

По умолчанию в Places UI Kit используется тёмная тема, поэтому вам может понадобиться настроить как тёмную, так и светлую тему. Чтобы настроить темную тему, добавьте запись для цвета в 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>