Modificare l'interfaccia utente di navigazione

Utilizzando Navigation SDK for Android, puoi modificare l'esperienza utente con la mappa determinando quali controlli ed elementi UI integrati vengono visualizzati sulla mappa. Puoi anche regolare l'aspetto visivo dell'UI di navigazione. Consulta la pagina Norme per le linee guida sulle modifiche accettabili all'UI di navigazione.

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

Controlli dell'UI della mappa

Per posizionare gli elementi UI personalizzati nella visualizzazione di navigazione, utilizza i controlli dell'UI della mappa per un posizionamento corretto. Quando il layout integrato cambia, Navigation SDK for Android riposiziona automaticamente i controlli personalizzati. Puoi impostare una visualizzazione di controllo personalizzata alla volta per ogni posizione. Se il tuo design richiede più elementi UI, puoi inserirli in un ViewGroup e passarlo al metodo setCustomControl.

Il setCustomControl metodo fornisce le posizioni definite nell'CustomControlPosition enumerazione:

  • SECONDARY_HEADER (viene visualizzata solo in modalità verticale)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Posizioni dei controlli personalizzate per l'orientamento verticale.
Posizioni dei controlli personalizzati per l'orientamento verticale
Posizioni di controllo personalizzate per l'orientamento orizzontale.
Posizioni dei controlli personalizzati per l'orientamento orizzontale

Aggiungere un controllo personalizzato

  1. Crea una visualizzazione Android con l'elemento UI personalizzato o ViewGroup.
  2. Espandi l'XML o crea un'istanza della visualizzazione personalizzata per ottenere un'istanza della visualizzazione.
  3. Utilizza NavigationView.setCustomControl o SupportNavigationFragment.setCustomControl con la posizione del controllo personalizzato scelta dall' CustomControlPosition enumerazione.

    L'esempio seguente crea un fragment 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 controllo personalizzato

Per rimuovere un controllo personalizzato, chiama il metodo setCustomControl con un parametro di visualizzazione null e la posizione del controllo personalizzato scelta.

Ad esempio, il seguente snippet rimuove l'intestazione secondaria personalizzata e ripristina i contenuti predefiniti:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Posizioni dei controlli personalizzati

Intestazione secondaria

Posizione del controllo personalizzato dell'intestazione secondaria per l'orientamento verticale.
Posizione del controllo personalizzato dell'intestazione secondaria per l'orientamento verticale

Per utilizzare questa posizione del controllo personalizzato, passa la posizione CustomControlPosition.SECONDARY_HEADER a setCustomControl.

Per impostazione predefinita, i layout dello schermo in modalità di navigazione forniscono una posizione per un'intestazione secondaria situata sotto l'intestazione principale. Questa intestazione secondaria viene visualizzata quando necessario, ad esempio con l'indicazione delle corsie in cui posizionarsi. La tua app può utilizzare questa posizione dell'intestazione secondaria del layout per i contenuti personalizzati. Quando utilizzi questa funzionalità, il controllo copre tutti i contenuti dell'intestazione secondaria predefinita. Se la visualizzazione di navigazione ha uno sfondo, questo rimane in posizione, coperto dall'intestazione secondaria. Quando l'app rimuove il controllo personalizzato, al suo posto può essere visualizzata un'intestazione secondaria predefinita.

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

Inizio in basso

Posizione di controllo personalizzata per l'orientamento verticale.
Posizione del controllo personalizzato dell'inizio in basso per l'orientamento verticale
Posizione di controllo personalizzata per l'orientamento orizzontale.
Posizione del controllo personalizzato dell'inizio in basso per l'orientamento orizzontale

Per utilizzare questa posizione del controllo personalizzato, passa la posizione CustomControlPosition.BOTTOM_START_BELOW a setCustomControl.

Questa posizione del controllo personalizzato si trova nell'angolo in basso a sinistra della mappa. Sia in portrait mode sia in landscape mode, si trova sopra la scheda ETA e/o il piè di pagina personalizzato (o lungo la parte inferiore della mappa se non sono presenti) e gli elementi di Nav SDK, inclusi il pulsante di ricentramento e il logo Google, si spostano verso l'alto per tenere conto dell'altezza della visualizzazione del controllo personalizzato. Questo controllo è posizionato all'interno dei limiti visibili della mappa, quindi qualsiasi spaziatura interna aggiunta ai bordi inferiore o iniziale della mappa modificherà anche la posizione di questo controllo.

Fine in basso

Posizione del controllo personalizzato all'estremità inferiore per l'orientamento verticale.
Posizione del controllo personalizzato della fine in basso per l'orientamento verticale
Posizione personalizzata del controllo inferiore per l'orientamento orizzontale.
Posizione del controllo personalizzato della fine in basso per l'orientamento orizzontale

Per utilizzare questa posizione del controllo personalizzato, passa la posizione CustomControlPosition.BOTTOM_END_BELOW a setCustomControl.

Questa posizione del controllo personalizzato si trova nell'angolo in basso a destra della mappa. In portrait mode, si trova sopra la scheda ETA e/o il piè di pagina personalizzato (o lungo la parte inferiore della mappa se non sono presenti), ma in landscape mode è allineata alla parte inferiore della mappa. Tutti gli elementi di Nav SDK visibili lungo il lato finale (lato destro in LTR) si spostano verso l'alto per tenere conto dell'altezza della visualizzazione del controllo personalizzato. Questo controllo è posizionato all'interno dei limiti visibili della mappa, quindi qualsiasi spaziatura interna aggiunta ai bordi inferiore o finale della mappa modificherà anche la posizione di questo controllo.

Posizione del controllo personalizzato del piè di pagina per l'orientamento verticale.
Posizione del controllo personalizzato del piè di pagina per l'orientamento verticale
Posizione del controllo personalizzato del piè di pagina per l'orientamento orizzontale.
Posizione del controllo personalizzato del piè di pagina per l'orientamento orizzontale

Per utilizzare questa posizione del controllo personalizzato, passa la posizione CustomControlPosition.FOOTER a setCustomControl.

Questa posizione del controllo personalizzato è progettata per una visualizzazione del piè di pagina personalizzata. Se la scheda ETA di Nav SDK è visibile, questo controllo si trova sopra di essa. In caso contrario, il controllo è allineato alla parte inferiore della mappa. A differenza dei controlli personalizzati BOTTOM_START_BELOW e BOTTOM_END_BELOW, questo controllo è posizionato al di fuori dei limiti visibili della mappa, il che significa che qualsiasi spaziatura interna aggiunta alla mappa non modificherà la posizione di questo controllo.

In portrait mode, il piè di pagina personalizzato è a larghezza intera. I controlli personalizzati nelle posizioni CustomControlPosition.BOTTOM_START_BELOW e CustomControlPosition.BOTTOM_END_BELOW, nonché gli elementi UI di Nav SDK come il pulsante di ricentramento e il logo Google, sono posizionati sopra il piè di pagina del controllo personalizzato. La posizione predefinita del chevron tiene conto dell'altezza del piè di pagina personalizzato.

In landscape mode, il piè di pagina personalizzato è a metà larghezza e allineato al lato iniziale (lato sinistro in LTR), proprio come la scheda ETA di Nav SDK. I controlli personalizzati nella posizione CustomControlPosition.BOTTOM_START_BELOW e gli elementi UI di Nav SDK come il pulsante di ricentramento e il logo Google sono posizionati sopra il piè di pagina del controllo personalizzato. I controlli personalizzati nella posizione CustomControlPosition.BOTTOM_END_BELOW e tutti gli elementi UI di Nav SDK lungo il lato finale (lato destro in LTR) rimangono allineati alla parte inferiore della mappa. La posizione predefinita del chevron non cambia quando è presente un piè di pagina personalizzato, poiché il piè di pagina non si estende al lato finale della mappa.

I controlli personalizzati nelle posizioni CustomControlPosition.BOTTOM_START_BELOW e CustomControlPosition.BOTTOM_END_BELOW, nonché gli elementi UI di Nav SDK come il pulsante di ricentramento e il logo Google, sono posizionati sopra il piè di pagina del controllo personalizzato.

Accessori dell'UI della mappa

Navigation SDK for Android fornisce accessori UI che vengono visualizzati durante la navigazione in modo simile a quelli presenti nell'applicazione Google Maps per Android. Puoi regolare la visibilità o l'aspetto visivo di questi controlli come descritto in questa sezione. Le modifiche apportate qui vengono applicate durante la sessione di navigazione successiva.

Consulta la Norme pagina per le linee guida sulle modifiche accettabili all'UI di navigazione.

Visualizzare il codice

Evidenziazione della destinazione e ingressi

Quando viene creata una destinazione con un placeID, l'edificio della destinazione viene evidenziato e, se possibile, viene visualizzata un'icona di ingresso. Questi indicatori visivi aiutano gli utenti a distinguere la destinazione e a raggiungerla.

Per creare una destinazione con un placeID, utilizza il Waypoint.Builder.setPlaceIdString() metodo.

Modificare l'intestazione di navigazione

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

Puoi impostare i seguenti attributi:

Tipo di attributoAttributi
Colore sfondo
  • Modalità giorno principale: il colore diurno dell'intestazione di navigazione
  • Modalità giorno secondaria: il colore diurno dell'indicatore della svolta successiva
  • Modalità notte principale: il colore notturno dell'intestazione di navigazione
  • Modalità notte secondaria: il colore notturno dell'indicatore della 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 distanza
  • Dimensioni del testo delle unità di distanza
Icone di manovra
  • Colore dell'icona di manovra grande
  • Colore dell'icona di manovra piccola
Indicazione delle corsie in cui posizionarsi
  • Colore della corsia o 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 di traffico

Utilizza GoogleMap.setTrafficEnabled() per attivare o disattivare il livello di traffico sulla mappa. Questa impostazione influisce sulle indicazioni della densità del traffico mostrate sulla mappa nel suo complesso. Tuttavia, non 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));

Attivare i semafori e i segnali di stop

Puoi attivare la visualizzazione dei semafori e dei segnali di stop nella mappa durante la navigazione attiva, il che fornisce un contesto aggiuntivo per i percorsi e le manovre di viaggio.

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

L'esempio seguente mostra come nascondere i semafori e i segnali di stop:

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

Aggiungere indicatori personalizzati

Navigation SDK for Android ora utilizza le API Google Maps per gli indicatori. Per saperne di più, consulta la documentazione dell'API di Google Maps.

Testo mobile

Puoi aggiungere testo mobile ovunque nella tua app, a condizione che non copra l'attribuzione di Google. Navigation SDK non supporta l'ancoraggio del testo a una latitudine/longitudine sulla mappa o a un'etichetta. Per saperne di più, consulta la sezione Info windows.

Visualizzare il limite di velocità

Puoi mostrare o nascondere l'icona del limite di velocità a livello di programmazione. Utilizza NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() per visualizzare o nascondere l'icona del limite di velocità. Se abilitata, l'icona del limite di velocità viene visualizzata in un angolo in basso durante le indicazioni. L'icona mostra il limite di velocità della strada su cui sta viaggiando 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à viene temporaneamente nascosta quando viene visualizzato il pulsante di ricentramento.

Impostare la modalità notturna

Puoi controllare il comportamento della modalità notturna a livello di programmazione. Utilizza NavigationView.setForceNightMode() o SupportNavigationFragment.setForceNightMode() per attivare o disattivare la modalità notturna oppure lascia che sia Navigation SDK for Android a controllarla.

  • AUTO consente a Navigation SDK 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à giorno.

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

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

Visualizzare l'elenco delle indicazioni stradali

Innanzitutto, crea la visualizzazione 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 avviene con NavigationView. Ad esempio:

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

Nascondere i percorsi alternativi

Quando l'interfaccia utente diventa troppo piena di informazioni, puoi ridurre il disordine visualizzando meno percorsi alternativi rispetto al valore predefinito (due) o non visualizzando affatto percorsi alternativi. Puoi configurare questa opzione prima di recuperare i percorsi 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 itinerario 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 viaggio

La barra di avanzamento del viaggio è stata aggiunta alla navigazione.

La barra di avanzamento del viaggio è una barra verticale che viene visualizzata sul lato iniziale/principale della mappa all'avvio della navigazione. Se abilitata, mostra una panoramica dell'intero viaggio, insieme alla destinazione e alla posizione attuale dell'utente.

Consente agli utenti di prevedere rapidamente eventuali problemi imminenti, come il traffico, senza dover aumentare lo zoom. Possono quindi modificare il percorso del viaggio, se necessario. Se l'utente modifica il percorso del viaggio, la barra di avanzamento viene reimpostata come se fosse iniziato un nuovo viaggio da quel punto.

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

  • Percorso trascorso: la parte del viaggio trascorsa.

  • Posizione attuale: la posizione attuale dell'utente durante il viaggio.

  • Stato del traffico : lo stato del traffico imminente.

  • Destinazione finale : la destinazione finale del viaggio.

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

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

Posizionamento della barra di avanzamento del viaggio

  • Il lato sinistro della barra è allineato approssimativamente al lato sinistro del tachimetro, del logo Google e del pulsante di ricentramento (quando visibile). La larghezza è di 12 dp.
  • La barra di avanzamento del viaggio mantiene un'altezza statica. Per adattarsi alle limitazioni dello spazio verticale nei dispositivi più piccoli, la visibilità e l'altezza della barra di avanzamento del viaggio si adattano in base ai punti di interruzione specificati nell'altezza dello schermo. Questi punti di interruzione sono indipendenti dall'orientamento del dispositivo e dalla quantità di spazio effettivamente occupata dalla mappa sullo schermo:
  • Altezza dello schermo Visibilità della barra di avanzamento del viaggio Altezza della barra di avanzamento del viaggio Posizione della barra di avanzamento del viaggio sull'asse y
    Piccola: da 0 dp a 551 dp Non visibile N/D N/D
    Media: da 552 dp a 739 dp Visibile 130 dp Sopra i controlli del lato iniziale (tachimetro / logo Google / pulsante di ricentramento)
    Grande: da 740 dp in su Visibile 290 dp Sopra i controlli del lato iniziale (tachimetro / logo Google / pulsante di ricentramento)
  • Se la barra di avanzamento del viaggio si sovrappone alla scheda della svolta o ad altri elementi dell'UI di navigazione, viene visualizzata sotto questi altri elementi.

Bussola

Navigation SDK fornisce un grafico della bussola che viene visualizzato nell'angolo in alto a destra della mappa in determinate circostanze e solo se abilitato. Quando l'utente fa clic sulla bussola, la videocamera torna animata a una posizione con un rilevamento di zero (l'orientamento predefinito) e la bussola scompare poco dopo.

Se la navigazione è abilitata e la modalità della videocamera è impostata su "Segui", la bussola rimane visibile e toccandola si passa dalle prospettive della videocamera inclinata e panoramica.

Per evitare distrazioni per il conducente, la bussola rimane nella stessa posizione se l'intestazione (in modalità verticale) si espande e entra in conflitto con la posizione predefinita della bussola. Se aggiungi un controllo personalizzato dell'intestazione secondaria o una visualizzazione accessoria dell'intestazione, la bussola viene nascosta per evitare conflitti con l'UI.

La bussola supporta le modalità giorno e notte, nonché la modalità Buio.

La bussola è abilitata per impostazione predefinita. Puoi impostare se la bussola è abilitata utilizzando il compassEnabled metodo nella classe GoogleMapOptions.

Disattivare gli edifici in 3D

Per i dispositivi con prestazioni limitate, puoi disattivare la visualizzazione degli edifici in 3D chiamando GoogleMap.setBuildingsEnabled(false).

API Visibilità prompt (sperimentale)

L'API Visibilità prompt consente di evitare conflitti tra gli elementi UI generati da Navigation SDK e i tuoi elementi UI personalizzati aggiungendo un listener per ricevere un callback prima che un elemento UI di Navigation SDK stia per essere visualizzato e non appena l'elemento viene rimosso. Per saperne di più, inclusi esempi di codice, consulta la sezione Visibilità prompt API della pagina Configurare le interruzioni in tempo reale.