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 ed elementi dell'interfaccia utente integrati vengono visualizzati sulla mappa e quali gesti consentire. Puoi anche modificare l'aspetto visivo dell'interfaccia utente 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

L'SDK di navigazione 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 fa clic sulla 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 è abilitata e la modalità fotocamera è impostata su "Segui", la bussola rimane visibile e toccandola si alternano le prospettive della fotocamera inclinata e panoramica.

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à diurna e notturna, nonché la modalità Buio.

La bussola è abilitata per impostazione predefinita nella versione 11.0.0 e successive. Puoi disattivare la bussola impostando la proprietà compassButton di GMSUISettings su false.

mapView.settings.compassButton = false

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 attuale dell'utente, se questa è nota. Puoi attivare il pulsante impostando la proprietà myLocationButton di GMSUISettings su true.

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

Pulsante Ricentra

Quando la navigazione è attivata, il pulsante di ricentramento 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 Ricentra, imposta la proprietà recenterButtonEnabled di GMSUISettings su true. Per impedire la visualizzazione del pulsante di ricentramento, imposta recenterButtonEnabled su false.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

Accessori UI della mappa

L'SDK Navigation fornisce accessori UI che vengono visualizzati durante la navigazione in modo simile 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 il prossimo viaggio dell'utente.

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 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 della navigazione mostra il tempo stimato e la distanza dalla destinazione, nonché l'ora di arrivo stimata.

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.

Il seguente esempio di codice mostra come attivare la visibilità dell'intestazione e del piè di pagina, quindi impostare navigationHeaderPrimaryBackgroundColor su blu e navigationHeaderSecondaryBackgroundColor su rosso.

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

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 vista che implementi il protocollo GMSNavigationAccessoryView. Questo protocollo ha un metodo obbligatorio: -heightForAccessoryViewConstrainedToSize:onMapView:. Ti viene assegnata la dimensione massima disponibile per la tua visualizzazione nella mappa fornita e devi specificare l'altezza richiesta dalla visualizzazione.

Puoi quindi passare questa visualizzazione a mapView chiamando setHeaderAccessoryView: mapView esegue l'animazione di uscita di tutte le visualizzazioni correnti e poi l'animazione di entrata della visualizzazione personalizzata. L'intestazione di navigazione deve essere visibile per poter visualizzare la visualizzazione personalizzata.

Per rimuovere la visualizzazione dell'accessorio dell'intestazione personalizzata, passa nil a setHeaderAccessoryView:.

Se la visualizzazione deve cambiare dimensioni in qualsiasi momento, puoi chiamare invalidateLayoutForAccessoryView:, passando la visualizzazione che deve cambiare dimensioni.

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.

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)

@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 Navigation per iOS calcola la modalità di illuminazione suggerita in base all'ora del giorno e alla posizione attuale 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 in condizioni di scarsa illuminazione impostando GMSMapView.lightingMode su un valore GMSNavigationLightingMode. 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 primario e secondario dell'intestazione di navigazione in modalità Buio impostando le proprietà navigationHeaderPrimaryBackgroundColorNightMode e navigationHeaderSecondaryBackgroundColorNightMode in GMSUISettings.

Elenco delle indicazioni stradali

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

1. Attiva un pulsante del punto di contatto dopo che setDestinations su GMSNavigator (navigatore) è stato completato correttamente e guidanceActive sul navigatore è stato attivato.
2. Quando un utente tocca il pulsante del punto di contatto, crea un GMSNavigationDirectionsListController (controller) con il navigatore associato a GMSMapView (mapView).
3. Aggiungi il controller a un'istanza di UIViewController (controller di visualizzazione) e aggiungi directionsListView come sottovista del controller di visualizzazione. 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.

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()
  })
  ...
}

- (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 viaggio è una barra verticale che viene visualizzata sul lato iniziale/principale della mappa all'avvio della navigazione. Se attivata, mostra una panoramica di un intero percorso, insieme alla destinazione e alla posizione attuale dell'utente.

che consente agli utenti di prevedere rapidamente eventuali problemi imminenti, come il traffico, senza dover ingrandire la mappa. In questo modo, possono cambiare il percorso del viaggio, se necessario. Se l'utente cambia percorso, la barra di avanzamento viene reimpostata come se un nuovo percorso fosse iniziato da quel punto.

La barra di avanzamento del viaggio mostra i seguenti indicatori di stato:

• Stato del traffico: lo stato del traffico imminente.

• Posizione attuale: la posizione attuale dell'autista durante la corsa.

• Percorso trascorso: la parte del percorso già effettuata.

Attiva la barra di avanzamento del viaggio impostando la proprietà navigationTripProgressBarEnabled in GMSUISettings.

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

Posizionamento della barra di avanzamento del viaggio

• Il lato sinistro della barra è allineato approssimativamente con la parte sinistra del tachimetro, il logo Google e il pulsante Ricentra (se visibile). La larghezza è di 12 pt.
• La barra di avanzamento del viaggio risponde in modo dinamico 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 viaggio rimane ad almeno 170 pt dalla parte superiore dello schermo, con un'altezza massima della barra di 400 pt.
• Se la barra di avanzamento del percorso si sovrappone all'intestazione di 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 Configurare 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 colore del 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 velocità di 16 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.

mapView.settings.shouldDisplaySpeedometer = true

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 i marcatori di destinazione per un determinato percorso impostando la proprietà showsDestinationMarkers di GMSUISettings. L'esempio seguente mostra come disattivare gli indicatori di destinazione.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

Funzionalità dell'esperienza su Maps

L'SDK Navigation ti consente di apportare ulteriori personalizzazioni all'esperienza di navigazione per i tuoi utenti. Le modifiche apportate all'istanza vengono applicate al successivo aggiornamento dell'app da parte dell'utente.

Evidenziazione della destinazione e ingressi

Quando viene creata una destinazione con un placeID, l'edificio della destinazione viene evidenziato e, se possibile, viene mostrata un'icona di ingresso. Questi segnali 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 Navigare un percorso includono l'evidenziazione della destinazione e le etichette degli ingressi, 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).

Disattivare 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 attivati, 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 l'alto o verso il basso per inclinare la videocamera.
• rotateGestures : controlla se i gesti di rotazione sono attivati o disattivati. Se questa opzione è abilitata, 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.

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

Controlli di posizione ed elementi dell'interfaccia utente

Puoi posizionare i controller e altri elementi UI in base alla posizione dell'intestazione e del piè di pagina di navigazione utilizzando le seguenti proprietà:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

Il seguente esempio di codice mostra l'utilizzo delle guide di layout per posizionare una coppia di etichette nella visualizzazione mappa:

/* 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

/* 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 gli itinerari configurando GMSNavigationRoutingOptions e impostando alternateRoutesStrategy con uno dei seguenti valori di enumerazione:

Esempio

Il seguente esempio di codice mostra come nascondere completamente gli itinerari alternativi.

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];