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 Search by text request o una Search Nearby request.

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.setListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

Java

fragment.setListener(
  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 el componente de la Búsqueda de Lugar:

  • 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. El valor predeterminado es PlacesMaterialTheme. Consulta la documentación del componente Place Details para obtener más información sobre la aplicación de temas.

Los atributos de tema que no se anulan usan los diseños predeterminados. Si deseas admitir un tema oscuro, puedes agregar 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>

Ejemplo

Kotlin

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

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

fragment.setListener(
  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.setListener(
  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)