Utilizzando l'SDK Navigation per iOS, puoi modificare l'esperienza utente con la tua mappa determinando quali controlli UI e elementi integrati vengono visualizzati sulla mappa e quali gesti consentire. Puoi anche modificare l'aspetto visivo della UI di navigazione. Consulta la pagina delle norme per le linee guida sulle modifiche accettabili alla UI di navigazione.
Controlli UI della mappa
L'SDK Navigation fornisce alcuni controlli UI integrati simili a quelli presenti nell'applicazione Google Maps per iOS. Puoi attivare/disattivare la visibilità di questi controlli utilizzando la classe GMSUISettings. Le modifiche apportate a questa classe vengono applicate immediatamente alla mappa.
Bussola
Il Navigation SDK 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 tocca la bussola, la fotocamera 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à 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à Giorno e Notte, nonché la modalità Buio.
La bussola è attiva per impostazione predefinita nella versione 11.0.0 e successive. Puoi disattivare la bussola impostando la proprietà compassButton di GMSUISettings su false.
Swift
mapView.settings.compassButton = false
Objective-C
mapView.settings.compassButton = NO;
Pulsante La mia posizione
Il pulsante La mia posizione viene visualizzato nell'angolo in basso a destra dello schermo solo
quando è attivato. Quando un utente fa clic sul pulsante, la fotocamera si anima per mettere a fuoco la posizione corrente dell'utente, se questa è nota. Puoi attivare il pulsante impostando la proprietà myLocationButton di GMSUISettings su true.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
Pulsante Ricentra
Quando la navigazione è attiva, il pulsante Ricentra viene visualizzato quando l'utente scorre la visualizzazione della mappa e scompare quando l'utente tocca per ricentrare la mappa. Per consentire la visualizzazione del pulsante di ricentramento, imposta la proprietà recenterButtonEnabled di GMSUISettings su true. Per impedire la visualizzazione del pulsante di ricentramento, imposta recenterButtonEnabled su false.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
Accessori UI della mappa
L'SDK Navigation fornisce accessori dell'interfaccia utente che vengono visualizzati durante la navigazione, simili a quelli presenti nell'applicazione Google Maps per iOS. Puoi regolare la visibilità o l'aspetto visivo di questi controlli come descritto in questa sezione. Le modifiche apportate qui verranno applicate durante la corsa successiva dell'utente.
Intestazione e piè di pagina di navigazione

Durante la navigazione, l'intestazione della navigazione viene visualizzata nella parte superiore dello schermo e il piè di pagina della navigazione viene visualizzato nella parte inferiore. L'intestazione di navigazione mostra il nome della strada e la direzione della svolta successiva sul percorso, nonché la direzione della svolta seguente. Il piè di pagina di navigazione mostra il tempo e la distanza stimati per raggiungere la destinazione, nonché l'orario di arrivo stimato.
Puoi attivare/disattivare la visibilità dell'intestazione e del piè di pagina di navigazione e impostarne i colori in modo programmatico utilizzando le seguenti proprietà:
navigationHeaderEnabled: controlla se l'intestazione di navigazione è visibile (il valore predefinito ètrue).navigationFooterEnabled: controlla se il piè di pagina di navigazione è visibile (il valore predefinito ètrue).navigationHeaderPrimaryBackgroundColor: imposta il colore di sfondo principale per l'intestazione di navigazione.navigationHeaderSecondaryBackgroundColor: imposta il colore di sfondo secondario per l'intestazione di navigazione.
L'esempio di codice seguente mostra come attivare la visibilità dell'intestazione e del piè di pagina, quindi impostare navigationHeaderPrimaryBackgroundColor su blu e navigationHeaderSecondaryBackgroundColor su rosso.
Swift
mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red
Objective-C
mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];
Visualizzazione dell'intestazione dell'accessorio di navigazione
Puoi personalizzare la tua app sostituendo la visualizzazione dell'intestazione di navigazione secondaria con la tua visualizzazione accessoria personalizzata. Per farlo, crea una visualizzazione che implementa il protocollo GMSNavigationAccessoryView. Questo protocollo ha un metodo obbligatorio: -heightForAccessoryViewConstrainedToSize:onMapView:. Ti viene fornita la dimensione massima disponibile per la tua visualizzazione sulla mapView specificata e devi fornire l'altezza richiesta dalla tua visualizzazione.
Puoi quindi passare questa visualizzazione a mapView chiamando setHeaderAccessoryView:
mapView esegue l'animazione in uscita di tutte le visualizzazioni correnti, quindi esegue l'animazione in entrata della visualizzazione personalizzata. L'intestazione di navigazione deve essere visibile per poter visualizzare la visualizzazione personalizzata.
Per rimuovere la visualizzazione accessoria dell'intestazione personalizzata, passa nil a
setHeaderAccessoryView:.
Se la visualizzazione deve cambiare dimensione in qualsiasi momento, puoi chiamare
invalidateLayoutForAccessoryView:, passando la visualizzazione che deve cambiare
dimensione.
Esempio
Il seguente esempio di codice mostra una visualizzazione personalizzata che implementa il protocollo GMSNavigationAccessoryView. Questa visualizzazione personalizzata viene poi utilizzata per impostare una visualizzazione accessoria dell'intestazione di navigazione personalizzata.
Swift
class MyCustomView: UIView, GMSNavigationAccessoryView {
…
func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
// viewHeight gets calculated as the height your view needs.
return viewHeight
}
…
}
let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)
// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)
// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)
Objective-C
@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end
@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
// viewHeight gets calculated as the height your view needs.
return viewHeight;
}
…
@end
MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];
// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];
// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];
Colori dell'intestazione della modalità Luce scarsa
L'SDK di navigazione per iOS calcola la modalità di illuminazione suggerita in base all'ora del giorno e alla posizione corrente del dispositivo e chiama il metodo listener GMSNavigatorListener.didChangeSuggestedLightingMode quando la modalità suggerita cambia (ad esempio all'alba o al tramonto).
Puoi modificare in modo programmatico il comportamento della modalità Luce scarsa nei seguenti modi:
- Controlla quando la mappa utilizza le modalità normale e Luce scarsa impostando
GMSMapView.lightingModesu un valoreGMSNavigationLightingMode. Per saperne di più sull'attivazione del passaggio automatico tra le modalità di illuminazione, consulta Configura le modalità normale e Luce scarsa. - Personalizza i colori di sfondo principale e secondario dell'intestazione di navigazione in modalità Luce scarsa impostando le proprietà
navigationHeaderPrimaryBackgroundColorNightModeenavigationHeaderSecondaryBackgroundColorNightModesuGMSUISettings.
Elenco delle indicazioni stradali
Puoi fornire indicazioni stradali passo passo nella tua app. L'esempio seguente mostra un modo possibile per farlo. Questi passaggi possono variare a seconda dell'implementazione.
- Attiva un pulsante del punto di ingresso dopo
setDestinationssuGMSNavigator(navigatore) è stato completato correttamente eguidanceActivesul navigatore è stato attivato. - Quando un utente tocca il pulsante del punto di accesso, crea un
GMSNavigationDirectionsListController(controller) con il navigatore associato aGMSMapView(mapView). - Aggiungi il controller a un'istanza di
UIViewController(view controller) e aggiungidirectionsListViewcome visualizzazione secondaria del view controller. I metodireloadDataeinvalidateLayoutsul controller devono essere chiamati come si farebbe con unUICollectionView. - Esegui il push del view controller nella gerarchia dei view controller dell'app.
Il seguente esempio di codice mostra l'aggiunta di un DirectionsListViewController.
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Add the directionsListView to the host view controller's view.
let directionsListView = directionsListController.directionsListView
directionsListView.frame = self.view.frame
self.view.addSubview(directionsListView)
directionsListView.translatesAutoresizingMaskIntoConstraints = false
directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
...
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Make sure data is fresh when the view appears.
directionsListController.reloadData()
...
}
override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
super.willTransition(to: newCollection, with: coordinator)
// Invalidate the layout during rotation.
coordinator.animate(alongsideTransition: {_ in
self.directionsListController.invalidateLayout()
})
...
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Add the directionsListView to the host view controller's view.
UIView *directionsListView = _directionsListController.directionsListView;
directionsListView.frame = self.view.bounds;
[self.view addSubview:directionsListView];
directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
[directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
[directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
[directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
...
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Make sure data is fresh when the view appears.
[_directionsListController reloadData];
...
}
- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
^void(id <UIViewControllerTransitionCoordinatorContext>context) {
[_directionsListController invalidateLayout];
};
// Invalidate the layout during rotation.
[coordinator animateAlongsideTransition:animationBlock
completion:nil];
...
}
...
Barra di avanzamento del percorso

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'intera corsa, 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. In questo modo, possono cambiare il percorso della corsa, se necessario. Se l'utente cambia percorso, la barra di avanzamento viene reimpostata come se fosse iniziata una nuova corsa da quel punto.
La barra di avanzamento del percorso mostra i seguenti indicatori di stato:
Stato del traffico: lo stato del traffico imminente.
Posizione attuale: la posizione attuale del conducente durante la corsa.
Percorso trascorso: la parte del percorso già effettuata.
Attiva la barra di avanzamento del percorso impostando la proprietà navigationTripProgressBarEnabled in GMSUISettings.
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
Posizionamento della barra di avanzamento del percorso
- Il lato sinistro della barra si allinea approssimativamente con il lato sinistro del tachimetro, del logo Google e del pulsante Ricentra (se visibile). La larghezza è di 12 pt.
- La barra di avanzamento della corsa risponde dinamicamente allo spazio verticale sullo schermo. La parte inferiore della barra è posizionata a 210 pt dalla parte inferiore dello schermo. La parte superiore della barra di avanzamento della corsa rimane ad almeno 170 pt dalla parte superiore dello schermo e l'altezza massima della barra è di 400 pt.
- Se la barra di avanzamento del percorso si sovrappone all'intestazione della navigazione o ad altri elementi dell'interfaccia utente di navigazione, viene visualizzata sotto questi altri elementi.
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 stia per essere 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.
Controllo del tachimetro
Quando la navigazione è attiva e la modalità di viaggio è impostata su guida, l'SDK Navigation per iOS mostra un controllo del limite di velocità nell'angolo inferiore della mappa che indica il limite di velocità attuale. Quando il conducente supera il limite di velocità, il controllo si espande per mostrare un secondo tachimetro con la velocità attuale del conducente.
Puoi impostare i livelli di avviso per modificare la formattazione del display del tachimetro quando il conducente supera il limite di velocità di un determinato valore. Ad esempio, puoi specificare che la velocità attuale venga visualizzata con un testo di colore rosso quando il conducente supera il limite di velocità di 5 km/h e con un colore di sfondo rosso quando il conducente supera il limite di velocità di 10 km/h.
Per visualizzare il controllo del limite di velocità, imposta la proprietà shouldDisplaySpeedometer di GMSUISettings su true. Per disattivare la visualizzazione del controllo del limite di velocità, imposta shouldDisplaySpeedometer su false.
Swift
mapView.settings.shouldDisplaySpeedometer = true
Objective-C
mapView.settings.shouldDisplaySpeedometer = YES;
Per saperne di più sull'impostazione degli avvisi per il tachimetro, consulta Configura gli avvisi del tachimetro.
Indicatori di destinazione
Puoi mostrare o nascondere gli indicatori di destinazione per un determinato percorso impostando la proprietà showsDestinationMarkers di GMSUISettings. L'esempio seguente mostra come disattivare gli indicatori di destinazione.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
Funzionalità dell'esperienza con la mappa
Navigation SDK ti consente di personalizzare ulteriormente l'esperienza di navigazione per i tuoi utenti. Le modifiche apportate all'istanza vengono applicate durante il successivo aggiornamento dell'app da parte dell'utente.
Evidenziazione della destinazione e degli ingressi
Quando una destinazione viene creata 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 destinazione desiderata.
Per creare una destinazione con un placeID, utilizza uno degli inizializzatori GMSNavigationWaypoint che accetta un placeID. Ad esempio, le destinazioni create nel tutorial Naviga lungo un percorso includono l'evidenziazione della destinazione e le etichette di ingresso, se disponibili.
Visualizzazione degli edifici in 3D durante la navigazione
Per impostazione predefinita, durante la navigazione vengono visualizzati gli edifici in 3D. Per disattivare questa funzionalità, imposta buildingsEnabled su false (Swift) o NO (Objective-C).
Disattiva i gesti predefiniti della mappa
Puoi disattivare i gesti predefiniti sulla mappa impostando le proprietà della classe GMSUISettings, disponibile come proprietà di GMSMapView.
I seguenti gesti possono essere attivati e disattivati in modo programmatico. Tieni presente che la disattivazione del gesto non limiterà l'accesso programmatico alle impostazioni della fotocamera.
scrollGestures: controlla se i gesti di scorrimento sono attivati o disattivati. Se l'opzione è attiva, gli utenti possono scorrere per spostare la videocamera.zoomGestures: controlla se i gesti di zoom sono attivati o disattivati. Se questa opzione è attiva, gli utenti possono toccare due volte, toccare con due dita o pizzicare per aumentare o diminuire lo zoom della videocamera. Tieni presente che se tocchi due volte o pizzichi quandoscrollGesturessono attivi, la videocamera potrebbe spostarsi sul punto specificato.tiltGestures: controlla se i gesti di inclinazione sono attivati o disattivati. Se questa opzione è attiva, gli utenti possono scorrere con due dita verso il basso o verso l'alto per inclinare la videocamera.rotateGestures: controlla se i gesti di rotazione sono attivati o disattivati. Se questa opzione è attiva, gli utenti possono utilizzare un gesto di rotazione con due dita per ruotare la videocamera.
In questo esempio, i gesti di panoramica e zoom sono stati disattivati.
Swift
mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false
Objective-C
mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;
Controlli di posizione ed elementi UI
Puoi posizionare i controlli e altri elementi UI in relazione alla posizione dell'intestazione e del piè di pagina di navigazione utilizzando le seguenti proprietà:
navigationHeaderLayoutGuidenavigationFooterLayoutGuidebottomTrailingButtonsLayoutGuide
L'esempio di codice seguente mostra l'utilizzo delle guide di layout per posizionare una coppia di etichette nella visualizzazione mappa:
Swift
/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true
/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true
Objective-C
/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;
/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;
Per un esempio di come utilizzare un bottomTrailingButtonsLayoutGuide per posizionare il pulsante di segnalazione delle interruzioni in tempo reale, consulta Configura le interruzioni in tempo reale.
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 configurando GMSNavigationRoutingOptions e impostando alternateRoutesStrategy con uno dei seguenti valori di enumerazione:
| Valore di enumerazione | Descrizione |
|---|---|
| GMSNavigationAlternateRoutesStrategyAll | Predefinita. Mostra fino a due itinerari alternativi. |
| GMSNavigationAlternateRoutesStrategyOne | Mostra un itinerario alternativo (se disponibile). |
| GMSNavigationAlternateRoutesStrategyNone | Nasconde gli itinerari alternativi. |
Esempio
L'esempio di codice seguente mostra come nascondere completamente gli itinerari alternativi.
Swift
let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
routingOptions: routingOptions) { routeStatus in
...
}
Objective-C
GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
routingOptions:routingOptions
callback:^(GMSRouteStatus routeStatus){...}];