Selecciona la plataforma: Android iOS JavaScript

Componente Place Search

El componente Place Search del kit de IU de Places renderiza los resultados de una búsqueda de lugares en una lista.

Componente Place Search del kit de IU de Places

Puedes personalizar la lista de la Búsqueda de lugares. Puedes especificar las siguientes rutas de acceso:

  • El contenido que se mostrará
  • Tamaño de los medios en orientación vertical
  • Truncamiento de texto
  • La orientación
  • Anulaciones de temas que coinciden con el lenguaje de diseño de tu marca y tu app
  • La posición de la atribución
  • Indica si se puede seleccionar un lugar.

También puedes personalizar la solicitud para realizar una SearchByTextRequest o una SearchNearbyRequest.

Facturación

Se te factura cada vez que se cambia el valor de vinculación de configureFromSearchByTextRequest() o configureFromSearchNearbyRequest().

Agrega Place Search a tu app

Agrega el PlaceSearchFragment fragment a tu diseño para usar el widget de Place Search.

Cuando quieras que tu app cargue un resultado de búsqueda de texto o de búsqueda cercana, llama a configureFromSearchByTextRequest() o configureFromSearchNearbyRequest() con la solicitud.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

Java

fragment.configureFromSearchByTextRequest(searchByTextRequest)

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

También puedes agregar un PlaceSearchFragmentListener opcional al componente para recibir devoluciones de llamada cuando se carga el componente, se selecciona un lugar (si se configura para que se pueda seleccionar) o cuando hay un error al cargar el componente.

Kotlin

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) {...}
  }
)

Personaliza el componente Place Search

Personalice el contenido

Debes especificar qué contenido mostrará tu componente.

En este ejemplo, se configura el componente para que muestre la dirección y la calificación del lugar.

Kotlin

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

Java

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

También puedes personalizar de forma opcional los siguientes aspectos del contenido que aparece en tu componente de Place Search:

  • PlaceSearchFragment.Content: Es el contenido que se muestra en el componente.
  • mediaSize: Es el tamaño de la foto en la orientación vertical del fragmento. El valor predeterminado es SMALL.
  • preferTruncation: Indica si se debe truncar el texto de cada vista de Place Details.
  • attributionPosition: Indica si se debe mostrar la atribución de Google Maps en la parte superior o inferior del componente.
  • selectable: Indica si se puede seleccionar cada lugar de la lista.

Agrega tu configuración de personalización a PlaceSearchFragment.

Kotlin

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)

Cómo personalizar la orientación

La orientación predeterminada es vertical. Para la orientación horizontal, especifica Orientation.HORIZONTAL en PlaceSearchFragment.newInstance().

Kotlin

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

Java

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

Cómo personalizar el tema

Cuando creas una instancia de un fragmento, puedes especificar un tema que anule cualquiera de los atributos de diseño predeterminados. Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas del componente Place Details. El valor predeterminado es PlacesMaterialTheme.

Los atributos de tema que no se anulan usan los diseños predeterminados.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega una entrada para el color en values-night/colors.xml.

Consulta la sección Personalización del diseño para obtener más información sobre la aplicación de temas.

Ejemplos

Crea una instancia del componente Place Search

Kotlin

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)

Cómo personalizar el tema

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega una entrada para el color en 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>