Personalização da IU do Android

A classe ConsumerMapStyle tem métodos setter e getter que oferecem personalização dinâmica para marcadores e polilinhas. Essa classe é exposta de forma assíncrona usando o método ConsumerController.getConsumerMapStyle().

A personalização da interface persiste entre as rotações do dispositivo e permanece em vigor até que o ConsumerController seja removido.

Marcadores personalizados

O método para definir o tipo de marcador e as propriedades dele é ConsumerMapStyle.setMarkerStyleOptions(). Suas opções de marcadores personalizados substituem os valores padrão fornecidos pelo SDK do consumidor. Para restaurar os valores padrão, chame setMarkerStyleOptions() usando nulo para o parâmetro MarkerOptions. Recupere o MarkerOptions ativo usando getMarkerStyleOptions().

Tipos de marcador

Os seguintes marcadores estão disponíveis para personalização:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

TRIP_PICKUP_POINT e TRIP_DROPOFF_POINT aparecem durante o monitoramento de viagem.

TRIP_VEHICLE é mostrado durante o monitoramento de viagem. Esse ícone não muda de acordo com o tipo de veículo real da viagem. O SDK do consumidor atualiza a rotação do ícone TRIP_VEHICLE durante o monitoramento de viagem para imitar o comportamento do veículo real durante o trajeto.

Observação: para ter resultados de animação mais realistas, TRIP_VEHICLE precisa ser uma perspectiva de visualização superior com a parte frontal do veículo voltada para cima.

Opções do marcador

As propriedades personalizáveis disponíveis para cada marcador são o conjunto de propriedades fornecido pelo MarkerOptions do Google Maps.

MarkerOptions é criado usando o construtor, e as propriedades personalizadas são especificadas usando métodos de estilo "Setter". Os valores padrão são fornecidos para cada propriedade, então você só precisa especificar valores personalizados.

Você pode desativar um marcador definindo visible como false. É preciso fornecer dados suficientes para que você possa usar seu próprio elemento de interface no lugar.

Exemplo

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)

Polilinhas personalizadas

A personalização de polilinha é definida usando o método ConsumerMapStyle.setPolylineStyleOptions. A definição de opções de polilinha personalizadas modifica os valores padrão fornecidos pelo SDK do Consumer. Os valores padrão podem ser restaurados chamando setPolylineStyleOptions com nulo para o parâmetro PolylineOptions. O PolylineOptions ativo pode ser recuperado usando o método getPolylineStyleOptions.

Tipos de polilinha

Os seguintes tipos de polilinha estão disponíveis para personalização:

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE e REMAINING_ROUTE são mostrados durante o monitoramento da viagem e representam o trajeto do veículo.

Propriedades da polilinha

As propriedades personalizáveis disponíveis para cada polilinha são fornecidas pelo PolylineOptions do Google Maps. PolylineOptions é criado usando o construtor, e as propriedades personalizadas são especificadas usando métodos de estilo "Setter". Os valores padrão são fornecidos para cada propriedade, então você só precisa especificar valores personalizados. Para desativar a polilinha, defina visible como false.

Exemplo

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)

Trajeto ativo e restante

Com o andamento da viagem e do pedido ativados, seu app pode personalizar a experiência do usuário usando polilinhas que mostram seus veículos ativos e restantes trajeto.

O trajeto ativo é o caminho que o veículo está viajando no momento para chegar ao próximo waypoint na viagem ativa do consumidor. O trajeto restante é o caminho que o veículo vai percorrer depois do trajeto ativo. Quando o waypoint do trajeto ativo é o último waypoint da viagem, o trajeto restante não existe.

As polilinhas ativas e restantes podem ser personalizadas e a visibilidade pode ser controlada pelo app. Por padrão, o trajeto ativo fica visível, e o restante não.

Exemplo

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)

Polilinhas com reconhecimento de trânsito

A camada de trânsito da polilinha está desativada por padrão. Quando ativado, os segmentos que representam trechos de trânsito fora do normal são desenhados sobre a polilinha do trajeto no PolylineOptions.getZIndex() do z-index, além de um deslocamento, dependendo da condição do trânsito.

As condições de trânsito são representadas como um dos quatro tipos de velocidade. Você pode personalizar a cor de cada tipo de velocidade.

Para ativar as "polilinhas com reconhecimento de trânsito", construa um objeto TrafficStyle que será transmitido para ConsumerMapStyle chamando setPolylineTrafficStyle().

Exemplo

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)

Ajustar o zoom da câmera para focar uma jornada

O botão padrão Meu local integrado ao SDK do Maps centraliza a câmera no local do dispositivo. Se houver uma sessão ativa de progresso da viagem e do pedido, centralize a câmera para focar na jornada, e não no local do dispositivo.

Solução integrada do SDK do consumidor para Android: AutoCamera

Para que você possa se concentrar na jornada em vez de na localização do dispositivo, o SDK do consumidor oferece um recurso de câmera automática ativado por padrão. A câmera aumenta o zoom para focar na rota do progresso da viagem e pedido e no waypoint da próxima viagem.

Como personalizar o comportamento da câmera

Se você precisar de mais controle do comportamento da câmera, desative ou ative a câmera automática usando ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() retorna os limites recomendados da câmera no momento. Em seguida, forneça esse CameraUpdate como um argumento para GoogleMap.moveCamera() ou GoogleMap.animateCamera().