Con l'SDK di navigazione per iOS, puoi modificare l'esperienza utente con la mappa determinando quali dei controlli e degli elementi integrati dell'interfaccia utente vengono visualizzati sulla mappa e quali gesti consenti. Puoi anche modificare l'aspetto visivo dell'interfaccia utente di navigazione. Consulta la pagina Norme per le linee guida sulle modifiche accettabili all'interfaccia di navigazione.
Controlli UI mappa
L'SDK di navigazione fornisce alcuni controlli integrati dell'interfaccia utente simili a quelli dell'applicazione Google Maps per iOS. Puoi
attivare/disattivare la visibilità di questi controlli utilizzando la classe GMSUISettings
.
Le modifiche apportate a questo corso vengono applicate immediatamente sulla mappa.
Bussola
L'SDK di navigazione fornisce un'immagine bussola che viene visualizzata nell'angolo in alto a destra della mappa in determinate circostanze e solo se attivata. La bussola appare solo quando la fotocamera è orientata in modo da avere un cuscinetto diverso da nord esatto (un rilevamento diverso da zero). Quando l'utente fa clic sulla bussola, la fotocamera torna in una posizione con un rilevamento di zero (l'orientamento predefinito) e la bussola scompare poco dopo.
Se la navigazione è attivata e la modalità videocamera è impostata su "Segui", la bussola rimane visibile e toccandola si attiva/disattiva la prospettiva inclinata e quella panoramica della fotocamera.
La bussola è disattivata per impostazione predefinita. Puoi attivare la bussola impostando la
proprietà compassButton
di GMSUISettings
su YES
. Tuttavia, non puoi forzare
la visualizzazione sempre della bussola.
Swift
mapView.settings.compassButton = true
Objective-C
mapView.settings.compassButton = YES;
Pulsante La mia posizione
Il pulsante La mia posizione viene visualizzato nell'angolo in basso a destra dello schermo solo
quando è attivo. Quando un utente fa clic sul pulsante, la videocamera si anima per mettere a fuoco la posizione attuale dell'utente, se questa è già nota. Puoi attivare il pulsante impostando la proprietà myLocationButton
di GMSUISettings
su YES
.
Swift
mapView.settings.myLocationButton = true
Objective-C
mapView.settings.myLocationButton = YES;
Pulsante Riposiziona
Quando la navigazione è abilitata, il pulsante di riposizionamento appare quando l'utente scorre la visualizzazione mappa e scompare quando l'utente tocca per centrare la mappa. Per consentire la visualizzazione del pulsante di riposizionamento, imposta la proprietà recenterButtonEnabled
di GMSUISettings
su YES
. Per impedire la visualizzazione del pulsante di riposizionamento, imposta recenterButtonEnabled
su NO
.
Swift
mapView.settings.isRecenterButtonEnabled = true
Objective-C
mapView.settings.recenterButtonEnabled = YES;
Accessori UI mappa
L'SDK di navigazione fornisce accessori dell'interfaccia utente che vengono visualizzati durante la navigazione simili a quelli che si trovano nell'applicazione Google Maps per iOS. Puoi regolare la visibilità o l'aspetto di questi controlli come descritto in questa sezione. Le modifiche che apporti qui verranno applicate alla prossima corsa del conducente.
Intestazione e piè di pagina di navigazione
Durante la navigazione, l'intestazione di navigazione viene visualizzata nella parte superiore dello schermo e il piè di pagina di navigazione nella parte inferiore. L'intestazione di navigazione mostra il nome della strada e la direzione per la svolta successiva del percorso, nonché la direzione della svolta successiva. Il piè di pagina della navigazione mostra l'ora e la distanza previste per raggiungere la destinazione, nonché l'ora di arrivo.
Puoi attivare/disattivare la visibilità dell'intestazione e del piè di pagina di navigazione e impostare i colori in modo programmatico utilizzando le seguenti proprietà:
navigationHeaderEnabled
: controlla se l'intestazione di navigazione è visibile (il valore predefinito ètrue
).navigationFooterEnabled
: consente di stabilire se rendere visibile il piè di pagina di navigazione (il valore predefinito ètrue
).navigationHeaderPrimaryBackgroundColor
: imposta il colore di sfondo principale dell'intestazione di navigazione.navigationHeaderSecondaryBackgroundColor
: imposta il colore di sfondo secondario per l'intestazione di navigazione.
Il seguente esempio di codice mostra l'attivazione della visibilità per l'intestazione e il
piè di pagina, l'impostazione dell'impostazione navigationHeaderPrimaryBackgroundColor
sul blu e l'impostazione
navigationHeaderSecondaryBackgroundColor
del 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];
Vista intestazione accessorio di navigazione
Puoi personalizzare l'app sostituendo la vista intestazione di navigazione secondaria con la tua visualizzazione accessori personalizzata. Per farlo, crea una vista che implementi il protocollo GMSNavigationAccessoryView
. Questo protocollo ha un
metodo obbligatorio: -heightForAccessoryViewConstrainedToSize:onMapView:
. Ti vengono
indicate le dimensioni massime disponibili per la tua visualizzazione nel mapView specificato e devi
fornire l'altezza richiesta per la visualizzazione.
Puoi poi passare questa vista a mapView chiamando setHeaderAccessoryView:
Il mapView anima qualsiasi vista corrente, poi anima la vista
personalizzata. L'intestazione di navigazione deve essere visibile per poter essere visualizzata
nella visualizzazione personalizzata.
Per rimuovere la visualizzazione dell'accessorio personalizzato per l'intestazione, passa nil
a
setHeaderAccessoryView:
Se la visualizzazione deve cambiare dimensione in qualsiasi momento, puoi chiamare
invalidateLayoutForAccessoryView:
, trasmettendo la visualizzazione che deve modificare
le dimensioni.
Esempio
Il seguente esempio di codice mostra una visualizzazione personalizzata che implementa il protocollo GMSNavigationAccessoryView
. Questa visualizzazione personalizzata viene quindi utilizzata
per impostare una visualizzazione accessorio personalizzata per l'intestazione di navigazione.
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];
Elenco indicazioni stradali
Puoi fornire indicazioni stradali passo passo nella tua app. Il seguente esempio mostra un modo possibile per farlo. Questi passaggi possono variare a seconda dell'implementazione.
- Consente di attivare un pulsante del punto di ingresso dopo che
setDestinations
sul dispositivo di navigazioneGMSNavigator
è stato completato correttamente ed è stato abilitatoguidanceActive
nella barra di navigazione. - Quando un utente tocca il pulsante del punto di ingresso, crea un
GMSNavigationDirectionsListController
(controller) con il navigatore associato alGMSMapView
(mapView
). - Aggiungi il controller a un'istanza di
UIViewController
(controller di visualizzazione) e aggiungidirectionsListView
come vista secondaria del controller di visualizzazione. I metodireloadData
einvalidateLayout
sul controller devono essere chiamati come si farebbe conUICollectionView
. - Esegui il push del controller di visualizzazione nella gerarchia del controller di visualizzazione dell'app.
Il seguente esempio di codice mostra l'aggiunta di un elemento 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)
// Ensure 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];
// Ensure 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 visualizzata sul bordo posteriore destro della mappa all'avvio della navigazione. Quando abilitata, mostra una panoramica di un'intera corsa, con la destinazione del conducente e la posizione attuale.
Offre ai conducenti la possibilità di anticipare rapidamente eventuali problemi imminenti, come il traffico, senza dover aumentare lo zoom. Poi possono cambiare il percorso, se necessario. Se l'autista la reindirizza, la barra di avanzamento si reimposta 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 futuro.
Posizione attuale: la posizione attuale del conducente durante la corsa.
Percorso trascorso: la parte della corsa trascorsa.
Attiva la barra di avanzamento del percorso impostando la proprietà navigationTripProgressBarEnabled
in GMSUISettings.
Swift
mapView.settings.isNavigationTripProgressBarEnabled = true
Objective-C
mapView.settings.navigationTripProgressBarEnabled = YES;
Semafori e segnali di stop
Puoi attivare i semafori e i segnali di stop in mapView
. Con questa funzionalità, il conducente può visualizzare le 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 iOS. Per attivare
questa funzionalità, chiama le impostazioni di GMSMapView
per ogni opzione in modo indipendente:
showsTrafficLights
e showsStopSigns
.
Swift
mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;
Objective-C
mapView.settings.showsTrafficLights = true;
mapView.settings.showsStopSigns = true;
Controllo del tachimetro
Quando la navigazione è abilitata, l'SDK di navigazione per iOS mostra un controllo del limite di velocità nell'angolo inferiore della mappa che mostra il limite di velocità attuale. Quando il conducente supera il limite di velocità, il controllo si espande mostrando un secondo tachimetro con la velocità attuale del conducente.
Puoi impostare livelli di avviso per modificare la formattazione della visualizzazione del tachimetro quando il conducente supera il limite di velocità di un determinato importo. Ad esempio, puoi specificare che la velocità corrente venga visualizzata con un colore di testo rosso quando il conducente supera il limite di velocità di 8 km/h e con un colore di sfondo rosso quando il conducente supera il limite di 16 km/h.
Per visualizzare il controllo del limite di velocità, imposta la proprietà shouldDisplaySpeedometer
di
GMSUISettings
su YES
. Per disattivare la visualizzazione del controllo del limite di velocità, imposta
shouldDisplaySpeedometer
su NO
.
Swift
mapView.shouldDisplaySpeedometer = true
Objective-C
mapView.shouldDisplaySpeedometer = YES;
Per ulteriori informazioni sull'impostazione degli avvisi per il tachimetro, consulta Configurare gli avvisi sul 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 la disattivazione degli indicatori di destinazione.
Swift
mapView.settings.showsDestinationMarkers = false
Objective-C
mapView.settings.showsDestinationMarkers = NO;
Funzionalità dell'esperienza sulla mappa
L'SDK di navigazione consente di personalizzare ulteriormente l'esperienza di navigazione degli utenti. Le modifiche apportate all'istanza vengono applicate al momento del successivo aggiornamento del driver dell'app.
Disattiva i gesti predefiniti per le mappe
Puoi disattivare i gesti predefiniti sulla mappa impostando le proprietà della classe GMSUISettings
, disponibile come proprietà di GMSMapView
.
I gesti che seguono 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
: consente di stabilire se attivare o disattivare i gesti di scorrimento. Se questa funzionalità è attiva, gli utenti possono scorrere per eseguire la panoramica della videocamera.zoomGestures
: consente di stabilire se attivare o disattivare i gesti di zoom. Se attivato, gli utenti possono toccare due volte, toccare con due dita o pizzicare per eseguire lo zoom della fotocamera. Tieni presente che toccare due volte o pizzicare quando la funzionalitàscrollGestures
è attiva può comportare la panoramica della videocamera fino al punto specificato.tiltGestures
: consente di stabilire se attivare o disattivare i gesti di inclinazione. Se questa funzionalità è attiva, gli utenti possono scorrere con due dita in verticale verso il basso o verso l'alto per inclinare la fotocamera.rotateGestures
: consente di stabilire se attivare o disattivare i gesti di rotazione. Se questa funzionalità è attiva, gli utenti possono ruotare con due dita per ruotare la fotocamera.
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 dell'interfaccia utente
Puoi posizionare i controlli e altri elementi dell'interfaccia utente in relazione alla posizione dell'intestazione e del piè di pagina di navigazione utilizzando le seguenti proprietà:
navigationHeaderLayoutGuide
navigationFooterLayoutGuide
Il seguente esempio di codice mostra l'uso 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;
Nascondi percorsi alternativi
Quando l'interfaccia utente contiene troppe informazioni, puoi ridurre il disordine visualizzando meno percorsi alternativi rispetto a quelli predefiniti (due) o senza vedere affatto percorsi alternativi. Puoi configurare questa opzione prima di recuperare le route configurando GMSNavigationRoutingOptions
e impostando alternateRoutesStrategy
con uno dei seguenti valori di enumerazione:
Valore di enumerazione | Descrizione |
---|---|
GMSNavigazioneNavigazionealternativaStrategiaTutti | Predefinita. Visualizza fino a due percorsi alternativi. |
GMSNavigazioneAlternativeRoutesStrategiaUno | Visualizza un percorso alternativo (se disponibile). |
GMSNavigationAlternateRoutesStrategyNone | Nasconde i percorsi alternativi. |
Esempio
Il seguente esempio di codice mostra come nascondere del tutto le route alternative.
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){...}];