Modificare l'interfaccia utente di navigazione

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

Navigation SDK 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 degli accessori 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 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.

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à:

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

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 alla mapView chiamando setHeaderAccessoryView: La mapView anima le visualizzazioni correnti e poi anima la 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:

Elenco delle indicazioni stradali

Puoi fornire indicazioni stradali passo passo nella tua app. L'esempio seguente mostra un possibile modo per farlo. Questi passaggi possono variare a seconda dell'implementazione.

  1. Attiva un pulsante del punto di ingresso dopo setDestinations su GMSNavigator (navigatore) è stato completato correttamente e guidanceActive sul navigatore è stato attivato.
  2. Quando un utente tocca il pulsante del punto di accesso, crea un GMSNavigationDirectionsListController (controller) con il navigatore associato a GMSMapView (mapView).
  3. Aggiungi il controller a un'istanza di UIViewController (view controller) e aggiungi directionsListView come visualizzazione secondaria del view controller. I metodi reloadData e invalidateLayout sul controller devono essere chiamati come si farebbe con un UICollectionView.
  4. 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 è stata aggiunta alla navigazione.

La barra di avanzamento del percorso è una barra verticale che appare sul lato iniziale/principale della mappa quando inizia la 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 è allineato 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 del percorso 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 ulteriori informazioni, 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 uno sfondo di colore 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

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

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 quando scrollGestures sono 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à:

  • navigationHeaderLayoutGuide
  • navigationFooterLayoutGuide
  • bottomTrailingButtonsLayoutGuide

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