Modificare l'interfaccia utente di navigazione

Con l'SDK di navigazione per Android, puoi modificare l'esperienza utente con la mappa determinando quali elementi e controlli dell'interfaccia utente integrati vengono visualizzati la mappa. Puoi anche modificare l'aspetto visivo della UI di navigazione. Invita alla pagina Norme per linee guida sulle modifiche accettabili all'interfaccia utente di navigazione.

Questo documento descrive come modificare l'interfaccia utente della tua mappa in due modi:

Controlli UI mappa

I controlli UI della mappa si trovano nella parte superiore della visualizzazione di navigazione. La L'SDK di navigazione per Android riposiziona automaticamente i controlli personalizzati quando cambia il layout integrato. Per ogni posizione del layout, puoi impostare un controllo personalizzato. Il controllo personalizzato può essere un elemento UI oppure, se il tuo design richiede di più, puoi utilizzare ViewGroup con più elementi UI.

La setCustomControl metodo fornisce posizioni come definito in CustomControlPosition enum:

  • SECONDARY_HEADER (visualizzato solo in modalità verticale)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

Ad esempio, le immagini di seguito mostrano esempi di varie posizioni di un controllo UI che informano un conducente di ridesharing della posizione del passeggero durante un ritiro.

Controllo personalizzato
Posizioni

Aggiungi un'intestazione secondaria personalizzata

Per impostazione predefinita, i layout dello schermo in modalità di navigazione forniscono una posizione per un posta sotto quella principale. Questa intestazione secondaria viene visualizzata quando necessarie, ad esempio con l'indicazione delle corsie in cui posizionarsi. La tua app può usare questa intestazione secondaria del layout per i contenuti personalizzati. Quando utilizzi questa funzione, i tuoi copre tutti i contenuti predefiniti dell'intestazione secondaria. Se la visualizzazione di navigazione mostra uno sfondo, rimane tale, coperto dall'intestazione secondaria. Quando l'app rimuove il controllo personalizzato, qualsiasi intestazione secondaria predefinita può al suo posto.

La posizione dell'intestazione secondaria personalizzata allinea il bordo superiore al bordo inferiore di come intestazione principale. Questa posizione è supportata solo in portrait mode. Nella landscape mode, l'intestazione secondaria non è disponibile e il layout no modifica.

  1. Crea una vista Android con l'elemento UI personalizzato o ViewGroup.
  2. Crea un'istanza del file XML o crea un'istanza della visualizzazione personalizzata per ottenere un'istanza del da aggiungere come intestazione secondaria.
  3. Usa NavigationView.setCustomControl o SupportNavigationFragment.setCustomControl con CustomControlPosition come SECONDARY_HEADER.

    L'esempio riportato di seguito crea un frammento e aggiunge un controllo personalizzato nella posizione dell'intestazione secondaria.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

Rimuovere un'intestazione secondaria

Per rimuovere l'intestazione secondaria e tornare ai contenuti predefiniti, utilizza l' setCustomControl.

Imposta la visualizzazione su null per rimuoverla.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Aggiungere un controllo personalizzato nella parte inferiore della visualizzazione di navigazione

La tua app può specificare un controllo personalizzato allineato al bordo inferiore dell' visualizzazione di navigazione. Quando l'app aggiunge il controllo personalizzato, il pulsante Ricentra e il logo Google più in alto per adattarlo.

  1. Crea una vista Android con l'elemento UI o il gruppo di viste da aggiungere.
  2. Crea la visualizzazione o il frammento di navigazione.
  3. Richiama il metodo setCustomControl nella visualizzazione di navigazione o nel frammento e specificare il controllo e la posizione da utilizzare.

L'esempio seguente mostra un elemento View personalizzato aggiunto a un SupportNavigationFragment:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

Rimuovere un controllo personalizzato

Per rimuovere il controllo personalizzato, utilizza il metodo setCustomControl e specifica il posizione del controllo che vuoi rimuovere.

Imposta la visualizzazione su null per quella posizione.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Accessori UI mappa

L'SDK di navigazione per Android fornisce accessori UI che vengono visualizzati durante un sistema di navigazione simile a quello disponibile nell'applicazione Google Maps per Android. Puoi modificare la visibilità o l'aspetto visivo di questi controlli descritti in questa sezione. Le modifiche che apporti qui verranno applicate nel corso della prossima sessione di navigazione.

Fai riferimento alla sezione Norme pagina per le linee guida modifiche accettabili all'interfaccia utente di navigazione.

Visualizza il codice

Modifica l'intestazione di navigazione

Utilizza le funzionalità di SupportNavigationFragment.setStylingOptions() o NavigationView.setStylingOptions() per cambiare il tema dell'intestazione di navigazione e l'indicatore della svolta successiva, appare sotto l'intestazione, se disponibile.

Puoi impostare i seguenti attributi:

Tipo di attributoAttributi
Colore sfondo
  • Modalità giornaliera principale: il colore giorno dell'intestazione di navigazione
  • Modalità giornaliera secondaria: il colore dell'indicatore della svolta successiva.
  • Modalità notturna principale: il colore notturno dell'intestazione di navigazione
  • Modalità notturna secondaria: il colore notturno dell'indicatore di svolta successiva.
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 misura
Icone relative alle manovre
  • Colore dell'icona di grande manovra
  • Colore dell'icona della piccola manovra
Indicazione delle corsie in cui posizionarsi
  • Colore delle corsie consigliate

L'esempio seguente mostra come impostare le opzioni di stile:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) 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 del traffico

Utilizza le funzionalità di GoogleMap.setTrafficEnabled() per attivare o disattivare il livello di traffico sulla mappa. Questa impostazione influisce sulle indicazioni di densità del traffico mostrate sulla mappa nel suo complesso. Tuttavia, influisce sulle indicazioni del traffico sul percorso tracciato dal navigatore.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

Attiva semafori e segnali di stop

Puoi attivare i semafori e i segnali di stop nell'interfaccia utente della mappa. Con questa funzione, l'utente può attivare la visualizzazione delle icone dei semafori o dei segnali di stop lungo le proprie percorso, fornendo un contesto migliore per viaggi più efficienti e precisi.

Per impostazione predefinita, i semafori e i segnali di stop sono disattivati nella SDK di navigazione. Per attivare questa funzione, chiama DisplayOptions per ogni funzionalità in modo indipendente.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Aggiungi indicatori personalizzati

L'SDK di navigazione per Android ora utilizza le API di Google Maps per gli indicatori. Vai alla sezione Documentazione dell'API di Google Maps per ulteriori informazioni.

Testo mobile

Puoi aggiungere testo mobile in qualsiasi punto dell'app, a condizione che non copra le Google Attribution. L'SDK di navigazione non supporta l'ancoraggio del testo a una latitudine/longitudine sulla mappa o a un'etichetta. Vai a Informazioni finestre per ulteriori informazioni informazioni.

Visualizza il limite di velocità

Puoi mostrare o nascondere in modo programmatico l'icona del limite di velocità. Utilizza le funzionalità di NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() per visualizzare o nascondere l'icona del limite di velocità. Quando l'opzione è attiva, viene mostrata l'icona del limite di velocità viene visualizzato in un angolo in basso durante la guida. L'icona mostra il limite di velocità della strada su cui viaggia il veicolo. L'icona viene visualizzata solo nelle 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 il pulsante di ricentramento è visualizzati.

Imposta modalità notturna

Puoi controllare in modo programmatico il comportamento della modalità notturna. Utilizza le funzionalità di NavigationView.setForceNightMode() o SupportNavigationFragment.setForceNightMode() per attivare o disattivare la modalità notturna oppure lasciare che l'SDK di navigazione per Android e controllarlo.

  • 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 forza l'attivazione della modalità giornaliera.

L'esempio seguente mostra l'attivazione forzata della modalità notturna in una navigazione frammento:

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

Visualizza elenco indicazioni stradali

Innanzitutto, crea la vista e aggiungila alla gerarchia.

void 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 proprio come sono sono con NavigationView. Ad esempio:

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

Nascondere i percorsi alternativi

Quando l'interfaccia utente è piena di troppe informazioni, è possibile ridurre il disordine visualizzando meno percorsi alternativi rispetto a quello predefinito (due), oppure perché non mostra alcun percorso alternativo. Puoi configurare questa opzione prima recupera i percorsi chiamando il RoutingOptions.alternateRoutesStrategy() con uno dei seguenti valori di enumerazione:

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

Il seguente esempio di codice mostra come nascondere completamente i percorsi alternativi.

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

Barra di avanzamento del percorso

La barra di avanzamento del percorso aggiunta alla navigazione.

La barra di avanzamento del percorso è una barra verticale che si trova sul bordo destro finale. della mappa all'avvio della navigazione. Quando è attiva, mostra una panoramica di l'intero percorso, insieme alla destinazione e alla posizione corrente dell'utente.

Offre agli utenti la possibilità di prevedere rapidamente eventuali problemi imminenti, come come il traffico, senza dover aumentare lo zoom. Possono quindi deviare il percorso se necessaria. Se l'utente reindirizza la corsa, la barra di avanzamento si reimposta come se fosse il viaggio è iniziato da quel punto.

La barra di avanzamento del percorso mostra i seguenti indicatori di stato:

  • Percorso trascorso: la parte trascorsa del percorso.

  • Posizione attuale: la posizione attuale dell'utente nella corsa.

  • Stato del traffico: lo stato del traffico imminente.

  • Destinazione finale: la destinazione finale del viaggio.

Attiva la barra di avanzamento del percorso chiamando il metodo setTripProgressBarEnabled() attivo NavigationView o SupportNavigationFragment. Ad esempio:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);