Personalizzazione dell'interfaccia utente di Android

La ConsumerMapStyle dispone di metodi setter e getter che forniscono una personalizzazione dinamica per indicatori e polilinee. Questa classe viene esposta in modo asincrono utilizzando ConsumerController.getConsumerMapStyle() .

La personalizzazione dell'interfaccia utente persiste a ogni rotazione dei dispositivi e rimane valida fino al ConsumerController è scollegato.

Indicatori personalizzati

Il metodo per impostare il tipo di indicatore e le sue proprietà è ConsumerMapStyle.setMarkerStyleOptions(). La tua Le opzioni degli indicatori sostituiscono i valori predefiniti forniti dall'SDK consumer. Per ripristinare i valori predefiniti, chiama setMarkerStyleOptions() utilizzando null per il parametro MarkerOptions. Recupera MarkerOptions attivo utilizzando getMarkerStyleOptions()

Tipi di indicatori

I seguenti indicatori sono disponibili per la personalizzazione:

• TRIP_PICKUP_POINT
• TRIP_DROPOFF_POINT
• TRIP_INTERMEDIATE_DESTINATION
• TRIP_VEHICLE

Vengono visualizzati TRIP_PICKUP_POINT e TRIP_DROPOFF_POINT durante il monitoraggio della corsa.

Viene visualizzato TRIP_VEHICLE durante il monitoraggio della corsa. L'icona dell'indicatore rimane invariata in base al tipo di veicolo effettivo per la corsa. L'SDK consumer si aggiorna la rotazione dell'icona TRIP_VEHICLE durante il monitoraggio della corsa per simulare comportamento del veicolo durante il tragitto.

Opzioni dell'indicatore

Le proprietà personalizzabili disponibili per ciascun indicatore sono l'insieme strutture fornite da Google Maps MarkerOptions

MarkerOptions viene creato utilizzando il relativo costruttore e le proprietà personalizzate sono specificate mediante il parametro "Setter" di stile. I valori predefiniti sono forniti per ogni proprietà, quindi devi solo specificare valori personalizzati.

Puoi disattivare un indicatore impostando visible su false. Devi fornire una quantità di dati sufficiente per consentirti di utilizzare il tuo elemento UI al suo posto.

Esempio

// 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);

// 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)

Polilinee personalizzate

La personalizzazione delle polilinee viene impostata utilizzando il metodo ConsumerMapStyle.setPolylineStyleOptions. Impostazione delle opzioni della polilinea personalizzate sostituisce i valori predefiniti forniti dall'SDK consumer. I valori predefiniti può essere ripristinato chiamando il numero setPolylineStyleOptions con null per il parametro PolylineOptions. Lo stato attivo Puoi recuperare PolylineOptions utilizzando il metodo getPolylineStyleOptions.

Tipi di polilinea

I seguenti tipi di polilinea sono disponibili per la personalizzazione:

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE e REMAINING_ROUTE vengono visualizzati durante il monitoraggio della corsa e rappresentano il percorso del veicolo.

Proprietà polilinea

Le proprietà personalizzabili disponibili per ogni polilinea sono fornite da Google Maps PolylineOptions. PolylineOptions viene creato utilizzando il relativo costruttore e le proprietà personalizzate sono specificate mediante il parametro "Setter" di stile. Valori predefiniti vengono forniti per ogni proprietà, quindi devi solo specificare valori personalizzati. Puoi disattivare la polilinea impostando visible su false.

Esempio

// 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);

// 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)

Percorso attivo e rimanente

Con le funzionalità di avanzamento dei viaggi e degli ordini attivate, la tua app può personalizzare esperienza dell'utente utilizzando polilinee che mostrano i veicoli attivi e rimanenti percorso.

Il percorso attivo è il percorso che il veicolo sta attualmente per raggiungere. la tappa successiva nella corsa attiva del consumatore. Il percorso rimanente è il percorso del veicolo oltre il percorso attivo. Quando il percorso attivo la tappa è l'ultima tappa del viaggio, la tappa restante non esiste.

Le polilinee attive e rimanenti possono essere personalizzate e controllate sulla visibilità dalla tua app. Per impostazione predefinita, il percorso attivo è visibile, mentre quello rimanente non è visibile.

Esempio

// 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);

// 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)

Polilinee sensibili al traffico

Il livello di traffico della polilinea è disattivato per impostazione predefinita. Quando è abilitato, i segmenti che rappresentano tratti di traffico non normale sono tracciati sopra la polilinea del percorso. in z-index PolylineOptions.getZIndex() più un offset che dipende dalle condizioni del traffico.

Le condizioni del traffico sono rappresentate da uno dei seguenti quattro tipi di velocità. Puoi personalizzare il colore per ogni tipo di velocità.

Per attivare le "Polilinee sensibili al traffico", devi creare un oggetto TrafficStyle che verrà passato a ConsumerMapStyle chiamando setPolylineTrafficStyle().

Esempio

// 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);

// 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)

Regolare lo zoom della fotocamera per mettere a fuoco un percorso

Il pulsante La mia posizione predefinito integrato nell'SDK di Maps centra la fotocamera sulla posizione del dispositivo. Se c'è una sessione di avanzamento viaggi e ordini attiva, ti consigliamo di centrare fotocamera per inquadrare il viaggio piuttosto che la posizione del dispositivo.

Soluzione integrata SDK consumer per Android: fotocamera automatica

SDK Consumer SDK per consentirti di concentrarti sul percorso anziché sulla posizione del dispositivo fornisce una funzione Fotocamera automatica abilitata per impostazione predefinita. Lo zoom della fotocamera per concentrarti sul percorso di avanzamento dei viaggi e degli ordini e sulla tappa successiva del viaggio.

Personalizzazione del comportamento della videocamera

Se hai bisogno di un maggiore controllo sul comportamento della videocamera, puoi disattivare o attivare Fotocamera automatica con ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() restituisce i limiti consigliati per la fotocamera in quel momento. Puoi fornisci questo CameraUpdate come argomento a GoogleMap.moveCamera() o GoogleMap.animateCamera().

Personalizzazione delle mappe basata su cloud

Entrambi i campi ConsumerMapView e ai ConsumerMapFragment supportano la personalizzazione delle mappe basata su cloud. Per utilizzare la Personalizzazione delle mappe basata su cloud, assicurati che le mappe selezionate Il renderer è LATEST. I seguenti esempi mostrano come utilizzare la personalizzazione delle mappe basata su cloud con il tuo progetto.

ConsumerMapView

Per utilizzare la Personalizzazione delle mappe basata su cloud in ConsumerMapView, imposta la campo mapId su GoogleMapOptions e passa il GoogleMapOptions a getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Esempio

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Esistono due modi per utilizzare la Personalizzazione delle mappe basata su cloud ConsumerMapFragments:

1. in modo statico con il file XML.
2. In modo dinamico con newInstance.

In modo statico con il file XML

Per utilizzare la personalizzazione delle mappe basata su cloud con il file XML nel ConsumerMapFragment, aggiungi l'attributo XML map:mapId con il valore specificato mapId. Vedi il seguente esempio:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

In modo dinamico con newInstance

Per utilizzare la Personalizzazione delle mappe basata su cloud con newInstance in ConsumerMapFragment, imposta il campo mapId su GoogleMapOptions e supera il Da GoogleMapOptions a newInstance. Vedi il seguente esempio:

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}