Modificare l'interfaccia utente di navigazione

Utilizzando l'SDK Navigation per Android, puoi modificare l'esperienza utente con la tua mappa determinando quali controlli UI e elementi integrati vengono visualizzati sulla mappa. Puoi anche regolare l'aspetto visivo della UI di navigazione. Consulta la pagina delle norme per le linee guida sulle modifiche accettabili alla UI di navigazione.

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

Controlli UI della mappa

Per posizionare elementi UI personalizzati nella visualizzazione di navigazione, utilizza i controlli 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 dei controlli personalizzati alla volta per ogni posizione. Se il tuo design richiede più elementi UI, puoi inserirli in un ViewGroup e passarlo al metodo setCustomControl.

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

  • SECONDARY_HEADER (visualizzato solo in modalità Ritratto)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Posizioni dei controlli personalizzate per l'orientamento verticale.
Posizioni dei controlli personalizzati per l'orientamento verticale
Posizioni dei controlli personalizzate per l'orientamento orizzontale.
Posizioni dei controlli personalizzate per l'orientamento orizzontale

Aggiungi un controllo personalizzato

  1. Crea una visualizzazione Android con l'elemento UI o il ViewGroup personalizzato.
  2. Esegui l'inflate dell'XML o crea un'istanza della visualizzazione personalizzata per ottenere un'istanza della visualizzazione.
  3. Utilizza NavigationView.setCustomControl o NavigationFragment.setCustomControl con la posizione del controllo personalizzato scelta dall'enum CustomControlPosition.

    L'esempio seguente 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);
     ```
    

Rimuovi 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 qualsiasi intestazione secondaria personalizzata e torna ai contenuti predefiniti:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Posizioni dei controlli personalizzate

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'indicatore di corsia. La tua app può utilizzare questa posizione dell'intestazione secondaria del layout per i contenuti personalizzati. Quando utilizzi questa funzionalità, il tuo controllo copre tutti i contenuti predefiniti dell'intestazione secondaria. Se la visualizzazione di navigazione ha uno sfondo, questo rimane invariato, 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 con il 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-basso

Posizione del controllo personalizzato in basso a sinistra per l'orientamento verticale.
Posizione del controllo personalizzato in basso a sinistra per l'orientamento verticale
Posizione del controllo personalizzato in basso a sinistra per l'orientamento orizzontale.
Posizione di controllo personalizzata in basso a sinistra 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. In entrambi i casi, portrait mode e 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 dell'SDK di navigazione, tra cui il pulsante Ricentra 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 della mappa visibile, pertanto qualsiasi spaziatura interna aggiunta ai bordi inferiore o iniziale della mappa modificherà anche la posizione di questo controllo.

Parte inferiore

Posizione del controllo personalizzato inferiore per l'orientamento verticale.
Posizione del controllo personalizzato in basso a destra per l'orientamento verticale
Posizione del controllo personalizzato inferiore per l'orientamento orizzontale.
Posizione del controllo personalizzato in basso a destra 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 è allineato alla parte inferiore della mappa. Tutti gli elementi dell'SDK di navigazione 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 della mappa visibile, quindi qualsiasi spaziatura interna aggiunta ai bordi inferiore o finale della mappa cambierà 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 dell'SDK di navigazione è visibile, questo controllo si trova sopra. 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 della mappa visibile, il che significa che l'eventuale spaziatura interna aggiunta alla mappa non ne cambierà la posizione.

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 dell'SDK di navigazione come il pulsante Ricentra e il logo Google, sono posizionati sopra il piè di pagina dei controlli personalizzati. La posizione predefinita della freccia 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 dell'SDK di navigazione. I controlli personalizzati nella posizione CustomControlPosition.BOTTOM_START_BELOW e gli elementi UI dell'SDK di navigazione, come il pulsante Ricentra e il logo Google, sono posizionati sopra il piè di pagina dei controlli personalizzati. 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 simbolo di espansione non cambia quando è presente un piè di pagina personalizzato, poiché il piè di pagina non si estende fino al lato finale della mappa.

I controlli personalizzati nelle posizioni CustomControlPosition.BOTTOM_START_BELOW e CustomControlPosition.BOTTOM_END_BELOW, nonché gli elementi UI dell'SDK di navigazione come il pulsante Ricentra e il logo Google, sono posizionati sopra il piè di pagina dei controlli personalizzati.

Accessori UI della mappa

Navigation SDK for Android fornisce accessori dell'interfaccia utente che vengono visualizzati durante la navigazione, simili 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 verranno applicate durante la sessione di navigazione successiva.

Consulta la pagina delle norme per le linee guida sulle modifiche accettabili alla UI di navigazione.

Visualizza il codice

Evidenziazione della destinazione e degli ingressi

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

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

Modifica l'intestazione di navigazione

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

Puoi impostare i seguenti attributi:

Tipo di attributoAttributi
Colore sfondo
  • Modalità diurna principale: il colore diurno dell'intestazione di navigazione
  • Modalità diurna secondaria: il colore diurno dell'indicatore della svolta successiva
  • Colore principale modalità notturna: il colore notturno dell'intestazione di navigazione
  • Colore secondario della modalità notturna: 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 delle manovre
  • Colore dell'icona grande della manovra
  • Colore dell'icona della 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 NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
  .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));

Disattiva il livello Traffico

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

Semafori e segnali di stop

Icone di semafori e segnali di stop lungo un percorso di navigazione.

Durante la navigazione attiva, la mappa mostra i semafori e i segnali di stop per fornire agli utenti maggiori informazioni sul percorso e sulle manovre successive. A partire dalla versione 8.0.0, non è possibile disattivare questa funzionalità.

Aggiungi indicatori personalizzati

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

Testo mobile

Puoi aggiungere testo mobile in qualsiasi punto dell'app, purché non copra l'attribuzione di Google. L'SDK Navigation non supporta l'ancoraggio del testo a una latitudine/longitudine sulla mappa o a un'etichetta. Per saperne di più, consulta Finestre informative.

Visualizza il limite di velocità

Puoi mostrare o nascondere l'icona del limite di velocità in modo programmatico. Utilizza NavigationView.setSpeedLimitIconEnabled() o NavigationFragment.setSpeedLimitIconEnabled() per visualizzare o nascondere l'icona del limite di velocità. Se l'opzione è attiva, l'icona del limite di velocità viene visualizzata in un angolo in basso durante le indicazioni stradali. 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 nascosta temporaneamente quando viene visualizzato il pulsante Ricentra.

Imposta la modalità notturna

Puoi controllare in modo programmatico il comportamento della modalità notturna. Utilizza NavigationView.setForceNightMode() o NavigationFragment.setForceNightMode() per attivare o disattivare la modalità notturna o lascia che sia l'SDK Navigation per Android a controllarla.

  • 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à 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 l'elenco delle 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 avviene con NavigationView. Ad esempio:

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

Nascondi itinerari alternativi

Quando l'interfaccia utente diventa troppo affollata di informazioni, puoi ridurre il disordine visualizzando meno itinerari alternativi rispetto a quelli predefiniti (due) o non visualizzandone affatto. 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. Mostra fino a due itinerari alternativi.
AlternateRoutesStrategy.SHOW_ONE Mostra un itinerario alternativo (se disponibile).
AlternateRoutesStrategy.SHOW_NONE Nasconde gli itinerari alternativi.

L'esempio di codice seguente mostra come nascondere completamente gli itinerari 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 è stata aggiunta alla navigazione.

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

In questo modo, gli utenti possono anticipare eventuali problemi imminenti, come il traffico, senza dover aumentare lo zoom. Se necessario, possono quindi cambiare il percorso della corsa. Se l'utente cambia percorso, la barra di avanzamento viene reimpostata come se fosse iniziato un nuovo percorso da quel punto.

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

  • Percorso trascorso: la parte del percorso già effettuata.

  • Posizione attuale: la posizione attuale dell'utente nel percorso.

  • Stato del traffico: lo stato del traffico imminente.

  • Destinazione finale: la destinazione finale del percorso.

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

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

Posizionamento della barra di avanzamento del percorso

  • Il lato sinistro della barra è allineato approssimativamente con il lato sinistro del tachimetro, del logo Google e del pulsante Ricentra (se visibile). La larghezza è di 12 dp.
  • La barra di avanzamento del percorso mantiene un'altezza statica. Per adattarsi alle limitazioni di spazio verticale nei dispositivi più piccoli, la visibilità e l'altezza della barra di avanzamento del percorso si adattano in base ai punti di interruzione specificati nell'altezza dello schermo. Questi punti di interruzione sono indipendenti dall'orientamento del dispositivo e dallo spazio effettivamente occupato dalla mappa sullo schermo:
  • Altezza schermo Visibilità della barra di avanzamento del percorso Altezza della barra di avanzamento del percorso Posizione dell'asse Y della barra di avanzamento del percorso
    Piccolo: 0 dp - 551 dp Non visibile N/D N/D
    Medio: 552 dp - 739 dp Visibile 130 dp Sopra i controlli laterali di avvio (tachimetro / logo Google / pulsante Ricentra)
    Grande: 740 dp e oltre Visibile 290 dp Sopra i controlli laterali di avvio (tachimetro / logo Google / pulsante Ricentra)
  • Se la barra di avanzamento del percorso si sovrappone alla scheda di svolta o ad altri elementi dell'interfaccia utente di navigazione, viene visualizzata sotto questi altri elementi.

Bussola

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

Se la navigazione è attiva e la modalità della fotocamera è impostata su "Inseguimento", la bussola rimane visibile e, se la tocchi, puoi passare dalla prospettiva della fotocamera inclinata a quella panoramica e viceversa.

Per evitare la distrazione del conducente, la bussola rimane nella stessa posizione se l'intestazione (in modalità Ritratto) si espande ed 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'interfaccia utente.

La bussola supporta le modalità diurna e notturna, nonché la modalità Buio.

La bussola è attiva per impostazione predefinita. Puoi impostare l'attivazione della bussola utilizzando il metodo compassEnabled nella classe GoogleMapOptions.

Disattiva gli edifici in 3D

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

API Prompt Visibility (sperimentale)

L'API Prompt Visibility ti consente di evitare conflitti tra gli elementi UI generati dall'SDK di navigazione e i tuoi elementi UI personalizzati aggiungendo un listener per ricevere un callback prima che un elemento UI dell'SDK di navigazione venga visualizzato e non appena l'elemento viene rimosso. Per saperne di più, inclusi esempi di codice, consulta la sezione API Prompt Visibility della pagina Configura le interruzioni in tempo reale.