Personalizzazione dell'interfaccia utente di navigazione

Puoi personalizzare elementi dell'interfaccia utente di navigazione e la mappa e aggiungere indicatori personalizzati alla mappa. Consulta la pagina Norme per le linee guida sulle modifiche accettabili all'interfaccia utente di navigazione.

Visualizza il codice

Personalizza l'intestazione di navigazione

Utilizza NavigationFragment.setStylingOptions() o NavigationView.setStylingOptions() per modificare il tema dell'intestazione di navigazione e l'indicatore della prossima svolta visualizzato sotto l'intestazione, se disponibile.

Puoi impostare i seguenti attributi:

Tipo di attributoAttributi
Colore sfondo
  • Modalità giorno principale: il colore giorno dell'intestazione di navigazione
  • Modalità giorno secondaria: il colore diurno dell'indicatore della prossima svolta.
  • Modalità notturna principale: il colore notturno dell'intestazione di navigazione
  • Modalità notturna secondaria: il colore notturno dell'indicatore della prossima svolta.
Elementi di testo per le istruzioni
  • Colore testo
  • Carattere
  • Dimensioni del testo della prima riga
  • Dimensioni del testo della seconda riga
Elementi di testo per i passaggi successivi
  • Carattere
  • Colore del testo del valore della distanza
  • Dimensioni del testo del valore della distanza
  • Colore del testo delle unità di misura
  • Dimensioni del testo delle unità di distanza
Icone di manovra
  • Colore dell'icona della manovra grande
  • Colore dell'icona della piccola manovra
Indicazione delle corsie in cui posizionarsi
  • Colore della corsia o delle corsie consigliate

Nell'esempio seguente viene illustrato come impostare le opzioni di stile:

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getFragmentManager()
        .findFragmentById(R.id.navigation_fragment);
// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
        .primaryDayModeThemeColor(0xff1A237E)
        .secondaryDayModeThemeColor(0xff3F51B5)
        .primaryNightModeThemeColor(0xff212121)
        .secondaryNightModeThemeColor(0xff424242)
        .headerLargeManeuverIconColor(0xffffff00)
        .headerSmallManeuverIconColor(0xffffa500)
        .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
        .headerNextStepTextColor(0xff00ff00)
        .headerNextStepTextSize(20f)
        .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
        .headerDistanceValueTextColor(0xff00ff00)
        .headerDistanceUnitsTextColor(0xff0000ff)
        .headerDistanceValueTextSize(20f)
        .headerDistanceUnitsTextSize(18f)
        .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
        .headerInstructionsTextColor(0xffffff00)
        .headerInstructionsFirstRowTextSize(24f)
        .headerInstructionsSecondRowTextSize(20f)
        .headerGuidanceRecommendedLaneColor(0xffffa500));

Disattivare il livello di traffico

Utilizza NavigationMap.setTrafficEnabled() per abilitare o disabilitare il livello del traffico sulla mappa. Questa impostazione influisce sulle indicazioni della compattezza del traffico mostrate sulla mappa nel complesso, ma non sulle indicazioni del traffico sul percorso tracciato dal navigatore.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Aggiungi indicatori personalizzati

Puoi aggiungere indicatori personalizzati alla mappa per indicare i punti d'interesse per l'applicazione o per gli utenti. Ad esempio, potresti voler indicare il punto di prelievo alla fine del percorso. Usa NavigationMap.addMarker() per aggiungere un indicatore e NavigationMap.setOnMarkerClickListener() per ascoltare i tocchi su un indicatore.

Il codice seguente utilizza un'icona archiviata nelle risorse disegnabili del progetto, R.drawable.ic_person_pin_48dp. Puoi utilizzare qualsiasi immagine adatta alla tua app.

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

Puoi specificare un'immagine personalizzata come indicatore, ma l'SDK al momento non supporta l'etichettatura di queste immagini con testo. Per maggiori informazioni, vedi Personalizzazione degli indicatori.

Testo mobile

Puoi aggiungere testo mobile in qualsiasi punto dell'app, purché l'attribuzione Google non sia coperta. L'SDK di navigazione non supporta l'ancoraggio del testo a latitudine/longitudine sulla mappa o a un'etichetta. Per ulteriori informazioni, consulta la sezione Finestre informative.

Visualizza il limite di velocità

Puoi mostrare o nascondere in modo programmatico l'icona del limite di velocità. Utilizza NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() per visualizzare o nascondere l'icona del limite di velocità. Quando la funzionalità è attivata, l'icona del limite di velocità viene visualizzata in basso durante le indicazioni. L'icona mostra il limite di velocità della strada su cui viaggia il veicolo. L'icona viene visualizzata solo nelle località in cui sono disponibili dati affidabili sui limiti di velocità.

// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);

L'icona del limite di velocità è temporaneamente nascosta quando viene visualizzato il pulsante di riposizionamento.

Imposta modalità notturna

Puoi controllare in modo programmatico il comportamento della modalità notturna. Utilizza NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() o SupportNavigationFragment.setForceNightMode() per attivare o disattivare la modalità notturna oppure lascia che l'SDK di navigazione la controlli.

  • AUTO Consente all'SDK di navigazione di determinare la modalità appropriata in base alla posizione del dispositivo e all'ora locale.
  • FORCE_NIGHT forza l'attivazione della modalità notturna.
  • FORCE_DAY impone l'attivazione della modalità Giorno.

L'esempio seguente mostra come forzare l'attivazione della modalità notturna all'interno di un frammento di navigazione:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Visualizza elenco indicazioni stradali

Innanzitutto, crea la vista e aggiungila alla gerarchia.

setupDirectionsListView(){
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

Assicurati di inoltrare gli eventi del ciclo di vita a DirectionsListView come con NaviagtionView. Ad esempio:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Le route alternative verranno nascoste

Quando l'interfaccia utente contiene troppe informazioni, puoi ridurre il disordine visualizzando meno percorsi alternativi rispetto a quelli predefiniti (due) o senza vedere affatto percorsi alternativi. Puoi configurare questa opzione prima di recuperare le route chiamando il metodo RoutingOptions.alternateRoutesStrategy() con uno dei seguenti valori di enumerazione:

Valore di enumerazioneDescrizione
AlternateRoutesStrategy.SHOW_ALL Predefinita. Visualizza fino a due percorsi alternativi.
AlternateRoutesStrategy.SHOW_ONE Visualizza un percorso alternativo (se disponibile).
AlternateRoutesStrategy.SHOW_NONE Nasconde i percorsi alternativi.

Esempio

Il seguente esempio di codice mostra come nascondere del tutto le route alternative.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);