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

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

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

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

Оплата

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

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

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

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

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.

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

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

Чтобы настроить компонент базового автозаполнения, используйте класс 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>