Modificare l'interfaccia utente di navigazione

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.

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];

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.

  1. Consente di attivare un pulsante del punto di ingresso dopo che setDestinations sul dispositivo di navigazione GMSNavigator è stato completato correttamente ed è stato abilitato guidanceActive nella barra di navigazione.
  2. Quando un utente tocca il pulsante del punto di ingresso, crea un GMSNavigationDirectionsListController (controller) con il navigatore associato al GMSMapView (mapView).
  3. Aggiungi il controller a un'istanza di UIViewController (controller di visualizzazione) e aggiungi directionsListView come vista secondaria del controller di visualizzazione. I metodi reloadData e invalidateLayout sul controller devono essere chiamati come si farebbe con UICollectionView.
  4. 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

Barra di avanzamento del percorso aggiunta alla navigazione.

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

Segnali di stop e semafori mostrati durante la navigazione.

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 enumerazioneDescrizione
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){...}];