Personalización de la IU de Android

La clase ConsumerMapStyle tiene métodos set y get que te proporcionan personalización dinámica para marcadores y polilíneas. Esta clase se expone de forma asíncrona con el método ConsumerController.getConsumerMapStyle().

La personalización de la IU persiste entre las rotaciones del dispositivo y permanece vigente hasta que se desconecta el ConsumerController.

Marcadores personalizados

El método para configurar el tipo de marcador y sus propiedades es ConsumerMapStyle.setMarkerStyleOptions(). Las opciones de marcadores personalizados anulan los valores predeterminados que proporciona el SDK para consumidores. Para restablecer los valores predeterminados, llama a setMarkerStyleOptions() con un valor nulo para el parámetro MarkerOptions. Recupera el MarkerOptions activo con getMarkerStyleOptions().

Tipos de marcadores

Los siguientes marcadores se pueden personalizar:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

Se muestran TRIP_PICKUP_POINT y TRIP_DROPOFF_POINT durante la supervisión del viaje.

Se muestra TRIP_VEHICLE durante la supervisión de viajes. El ícono del marcador no cambia según el tipo de vehículo real del viaje. El SDK de consumidores actualiza la rotación del ícono TRIP_VEHICLE durante la supervisión del viaje para imitar el comportamiento del vehículo real a medida que recorre la ruta.

Opciones de marcadores

Las propiedades personalizables disponibles para cada marcador son el conjunto de propiedades que proporciona MarkerOptions de Google Maps.

MarkerOptions se compila con su constructor, y las propiedades personalizadas se especifican con los métodos de estilo "Setter". Se proporcionan valores predeterminados para cada propiedad, por lo que solo debes especificar valores personalizados.

Para desactivar un marcador, establece visible en false. Se deben proporcionar suficientes datos para que puedas usar tu propio elemento de la IU en su lugar.

Ejemplo

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

Polilíneas personalizadas

La personalización de polilíneas se establece con el método ConsumerMapStyle.setPolylineStyleOptions. Si configuras las opciones de polilíneas personalizadas, se anulan los valores predeterminados que proporciona el SDK para consumidores. Los valores predeterminados se pueden restablecer si llamas a setPolylineStyleOptions con un valor nulo para el parámetro PolylineOptions. El PolylineOptions activo se puede recuperar con el método getPolylineStyleOptions.

Tipos de polilíneas

Se pueden personalizar los siguientes tipos de polilíneas:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE y REMAINING_ROUTE se muestran durante la supervisión de viaje y representan la ruta del vehículo.

Propiedades de la polilínea

Google Maps PolylineOptions proporciona las propiedades personalizables disponibles para cada polilínea. PolylineOptions se compila con su constructor, y las propiedades personalizadas se especifican con los métodos de estilo "Setter". Se proporcionan valores predeterminados para cada propiedad, por lo que solo necesitas especificar valores personalizados. Para desactivar la polilínea, establece visible en false.

Ejemplo

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Ruta activa y restante

Si habilitas el progreso del viaje y el pedido, tu app podrá personalizar la experiencia del usuario mediante polilíneas que muestren los vehículos activos y la ruta restante.

La ruta activa es la ruta que el vehículo recorre actualmente para llegar al siguiente punto de referencia en el viaje activo del consumidor. La ruta restante es el recorrido que el vehículo recorrerá más allá de la ruta activa. Cuando el punto de referencia de la ruta activa es el último punto de referencia del viaje, la ruta restante no existe.

Las polilíneas activas y restantes se pueden personalizar, y tu app puede controlar la visibilidad. De forma predeterminada, la ruta activa es visible, pero no la restante.

Ejemplo

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Polilíneas orientadas al tráfico

La capa de tráfico de la polilínea está inhabilitada de forma predeterminada. Cuando está habilitada, los segmentos que representan tramos de tráfico no normal se dibujan sobre la polilínea de la ruta en el índice z PolylineOptions.getZIndex(), además de un desplazamiento, según las condiciones del tráfico.

Las condiciones de tráfico se representan como uno de los cuatro tipos de velocidad. Puedes personalizar el color para cada tipo de velocidad.

Para habilitar las "polilíneas adaptadas al tráfico", debes construir un objeto TrafficStyle, que luego se pasará a ConsumerMapStyle llamando a setPolylineTrafficStyle().

Ejemplo

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Cómo ajustar el zoom de la cámara para enfocar un viaje

El botón Mi ubicación predeterminado integrado en el SDK de Maps centra la cámara en la ubicación del dispositivo. Si hay una sesión activa de progreso del viaje y el pedido, te recomendamos que centres la cámara para centrarte en el recorrido en lugar de la ubicación del dispositivo.

Solución integrada del SDK para consumidores de Android: AutoCamera

Para que puedas enfocarte en el recorrido en lugar de la ubicación del dispositivo, el SDK de consumidores proporciona una función AutoCamera que está habilitada de forma predeterminada. La cámara hace zoom para enfocarse en la ruta del progreso del viaje y del pedido y al siguiente punto de referencia del viaje.

Cómo personalizar el comportamiento de la cámara

Si necesitas más control del comportamiento de la cámara, puedes inhabilitar o habilitar AutoCamera con ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() muestra los límites de la cámara recomendados en ese momento. Luego, puedes proporcionar este CameraUpdate como argumento a GoogleMap.moveCamera() o GoogleMap.animateCamera().