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

Компонент поиска мест

Компонент «Поиск мест» из набора инструментов пользовательского интерфейса Places UI Kit отображает результаты поиска мест в виде списка.

Places UI Kit Компонент поиска мест

Вы можете настроить список поиска мест. Вы можете указать:

  • Содержимое для отображения
  • Размер медиафайла в вертикальной ориентации
  • Усечение текста
  • Ориентация
  • Переопределения темы, соответствующие вашему бренду и дизайну приложения.
  • Положение атрибуции
  • Можно ли выбрать место?

Вы также можете настроить запрос для выполнения либо запроса SearchByTextRequest , либо запроса SearchNearbyRequest .

Выставление счетов

С вас взимается плата каждый раз, когда изменяется значение привязки configureFromSearchByTextRequest() или configureFromSearchNearbyRequest() .

Добавьте функцию поиска мест в ваше приложение.

Для использования виджета «Поиск мест» добавьте фрагмент PlaceSearchFragment в свой макет.

Чтобы загрузить результаты текстового поиска или поиска поблизости, вызовите функции configureFromSearchByTextRequest() или configureFromSearchNearbyRequest() с соответствующим запросом.

Котлин 

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Java 

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

Также можно добавить к компоненту необязательный PlaceSearchFragmentListener для получения обратных вызовов при загрузке компонента, выборе места (если оно доступно для выбора) или при возникновении ошибки при загрузке компонента.

Котлин 

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java 

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

Настройте компонент «Поиск мест».

Настройте контент

Необходимо указать, какое содержимое будет отображать ваш компонент.

В этом примере компонент настраивается для отображения адреса и рейтинга места.

Котлин 

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

Java 

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

Вы также можете дополнительно настроить следующие аспекты контента, отображаемого в компоненте «Поиск мест»:

  • PlaceSearchFragment.Content : Содержимое, отображаемое в компоненте.
  • mediaSize : Размер фотографии в вертикальной ориентации фрагмента. По умолчанию — SMALL .
  • preferTruncation : Следует ли обрезать текст в каждом представлении сведений о месте.
  • attributionPosition : Показывать ли ссылку на Google Maps вверху или внизу компонента.
  • selectable : Указывает, можно ли выбрать каждое место в списке.

Добавьте свои настройки в PlaceSearchFragment .

Котлин 

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

Java 

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

Настройка ориентации

Ориентация по умолчанию — вертикальная. Для горизонтальной ориентации укажите Orientation.HORIZONTAL в PlaceSearchFragment.newInstance() .

Котлин 

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Java 

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

Настройте тему оформления

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

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

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

Более подробную информацию о настройке тем оформления см. в разделе «Настройка стиля» .

Примеры

Создайте экземпляр компонента «Поиск места».

Котлин 

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Java 

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)

Настройте тему оформления

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