Con l'SDK di navigazione per Android, puoi modificare l'esperienza utente con la mappa stabilendo quali elementi e controlli dell'interfaccia utente integrati vengono visualizzati sulla mappa. Puoi anche modificare l'aspetto visivo della UI di navigazione. Consulta la pagina Norme per le 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. 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 progetto
richiede di più, puoi utilizzare un ViewGroup
con più elementi UI.
Il metodo
setCustomControl
fornisce posizioni come definito nell'enum
CustomControlPosition
:
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.
Aggiungi un'intestazione secondaria personalizzata
Per impostazione predefinita, i layout dello schermo in modalità di navigazione forniscono una posizione per un'intestazione secondaria posizionata sotto l'intestazione principale. Questa intestazione secondaria viene visualizzata quando necessario, ad esempio con l'indicazione delle corsie. La tua app può usare questa posizione dell'intestazione secondaria del layout per i contenuti personalizzati. Quando utilizzi questa funzionalità, il controllo copre tutti i contenuti predefiniti dell'intestazione secondaria. Se la visualizzazione di navigazione ha uno sfondo, questo rimane attivo, coperto dall'intestazione secondaria. Quando l'app rimuove il controllo personalizzato, al suo posto può essere visualizzata qualsiasi intestazione secondaria predefinita.
La posizione dell'intestazione secondaria personalizzata allinea il suo bordo superiore a quello inferiore
dell'intestazione principale. Questa posizione è supportata solo in portrait mode
. In landscape mode
, l'intestazione secondaria non è disponibile e il layout non cambia.
- Crea una vista Android con l'elemento UI personalizzato o ViewGroup.
- Crea un'istanza del file XML o crea un'istanza della vista personalizzata per ottenere un'istanza della vista da aggiungere come intestazione secondaria.
Utilizza
NavigationView.setCustomControl
oSupportNavigationFragment.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 il
metodo 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 della visualizzazione di navigazione. Quando l'app aggiunge il controllo personalizzato, il pulsante di centratura e il logo Google si spostano verso l'alto per ospitarlo.
- Crea una vista Android con l'elemento UI o il gruppo di viste da aggiungere.
- Crea la visualizzazione o il frammento di navigazione.
- Richiama il metodo
setCustomControl
nella visualizzazione di navigazione o nel frammento e specifica 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 la
posizione del controllo da 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 visualizzati durante la navigazione simili a quelli presenti nell'applicazione Google Maps per Android. Puoi modificare la visibilità o l'aspetto visivo di questi controlli come descritto in questa sezione. Le modifiche apportate qui vengono applicate durante la successiva sessione di navigazione.
Per le linee guida sulle modifiche accettabili all'interfaccia utente di navigazione, consulta la pagina Norme.
Visualizza il codice
Modifica l'intestazione di navigazione
Utilizza SupportNavigationFragment.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 attributo | Attributi |
---|---|
Colore sfondo |
|
Elementi di testo per le istruzioni |
|
Elementi di testo per i passaggi successivi |
|
Icone relative alle manovre |
|
Indicazione delle corsie in cui posizionarsi |
|
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 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 del traffico sulla route tracciata 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 funzionalità, l'utente può attivare la visualizzazione delle icone dei semafori o dei segnali di stop lungo il percorso, fornendo un contesto migliore per corse più efficienti e accurate.
Per impostazione predefinita, i semafori e i segnali di stop sono disattivati nell'SDK di navigazione. Per abilitare questa funzionalità, 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. Per saperne di più, consulta la documentazione dell'API di Google Maps.
Testo mobile
Puoi aggiungere testo mobile in qualsiasi punto dell'app, a condizione che non copra l'attribuzione di Google. L'SDK di navigazione non supporta l'ancoraggio del testo a una latitudine/longitudine sulla mappa o a un'etichetta. Per saperne di più, vai alle finestre informazioni.
Visualizza il limite di velocità
Puoi mostrare o nascondere in modo programmatico l'icona del limite di velocità. Utilizza NavigationView.setSpeedLimitIconEnabled()
o SupportNavigationFragment.setSpeedLimitIconEnabled()
per visualizzare o nascondere l'icona del limite di velocità. Quando questa opzione è attiva, l'icona del limite di velocità
viene visualizzata in basso durante le indicazioni. L'icona mostra il limite di velocità
della strada su cui si muove il veicolo. L'icona viene visualizzata solo nelle località in cui sono disponibili dati sui limiti di velocità affidabili.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
L'icona del limite di velocità è temporaneamente nascosta quando viene visualizzato il pulsante di ricentramento.
Imposta modalità notturna
Puoi controllare in modo programmatico il comportamento della modalità notturna. Utilizza NavigationView.setForceNightMode()
o SupportNavigationFragment.setForceNightMode()
per attivare o disattivare la modalità notturna oppure lasciare che sia l'SDK di navigazione 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à giornaliera.
L'esempio seguente mostra l'attivazione forzata della modalità notturna in un frammento di navigazione:
// 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
su NavigationView
. Ad esempio:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Nascondere i percorsi alternativi
Quando l'interfaccia utente è piena di informazioni, puoi ridurre il disordine visualizzando un numero minore di percorsi alternativi rispetto a quello predefinito (due) o eliminando del tutto i percorsi alternativi. Puoi configurare questa opzione prima di recuperare le route richiamando il metodo RoutingOptions.alternateRoutesStrategy()
con uno dei seguenti valori di enumerazione:
Valore di enumerazione | Descrizione |
---|---|
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 è una barra verticale che viene visualizzata sul bordo destro finale della mappa quando inizia la navigazione. Se attivata, visualizza una panoramica di un intero viaggio, insieme alla destinazione e alla posizione corrente dell'utente.
Consente agli utenti di prevedere rapidamente eventuali problemi imminenti, come il traffico, senza dover aumentare lo zoom. Possono quindi modificare il percorso, se necessario. Se l'utente reindirizza la corsa, la barra di avanzamento si reimposta come se da quel punto fosse partito un nuovo percorso.
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.
Abilita la barra di avanzamento della corsa chiamando il metodo setTripProgressBarEnabled()
su
NavigationView
o
SupportNavigationFragment.
Ad esempio:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);