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 i gesti che consenti. Puoi anche modificare dell'interfaccia utente di navigazione. Consulta le Pagina Norme per le linee guida sulle modifiche accettabili all'interfaccia utente di navigazione.

Controlli UI mappa

L'SDK di navigazione fornisce alcuni controlli dell'interfaccia utente integrati simili a quelli presenti nell'applicazione Google Maps per iOS. Puoi attiva/disattiva la visibilità di questi controlli utilizzando la classe GMSUISettings. Le modifiche che apporti in questo corso si riflettono immediatamente sulla mappa.

Nota: ogni controllo ha una posizione predeterminata rispetto al bordo del mappa. Puoi allontanare i controlli dai bordi spaziatura interna per la 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 quando in un bucket in cui è abilitato il controllo delle versioni. La bussola appare solo quando la fotocamera è orientata in modo da avere una orientamento diverso dal nord esatto (un'orientamento diverso da zero). Quando l'utente fa clic sul bussola, la fotocamera si anima di nuovo in una posizione con un rilevamento pari a zero (il orientamento predefinito) e la bussola svanisce poco dopo.

Se la navigazione è attiva e la modalità fotocamera è attiva sia impostato su "segui" la bussola rimane visibile e tocca la bussola consente di passare dalla prospettiva inclinata a quella panoramica e viceversa.

La bussola è disattivata per impostazione predefinita. Puoi attivare la bussola impostando il Proprietà compassButton da GMSUISettings a true. Tuttavia, non puoi forza la visualizzazione della bussola.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Pulsante La mia posizione

Il pulsante La mia posizione viene visualizzato solo nell'angolo in basso a destra dello schermo quando il pulsante La mia posizione è abilitato. Quando un utente fa clic sul pulsante, la videocamera si anima per mettere a fuoco la posizione attuale dell'utente è attualmente noto. Puoi attivare il pulsante impostando il parametro Proprietà myLocationButton da GMSUISettings a true.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Pulsante Ricentra

Quando la navigazione è abilitata, il pulsante Ricentra viene visualizzato quando l'utente scorre la visualizzazione mappa e scompare quando l'utente tocca per centrare nuovamente la mappa. Per consentire visualizzare il pulsante di ricentramento, imposta la proprietà recenterButtonEnabled di GMSUISettings a true. Per evitare che venga visualizzato il pulsante di ricentramento, imposta Da recenterButtonEnabled a false.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Accessori UI mappa

L'SDK di navigazione fornisce gli accessori UI visualizzati durante la navigazione, simili a quelle presenti nell'applicazione Google Maps per iOS. Puoi modificare la visibilità o l'aspetto visivo di questi controlli descritti in questa sezione. Le modifiche che apporti qui vengono applicate durante la prossimo viaggio.

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 in basso. L'intestazione di navigazione mostra nome della via e direzione per la prossima svolta del percorso, nonché direzione della svolta successiva. Il piè di pagina di navigazione mostra il tempo stimato e la distanza dalla destinazione, nonché l'orario di arrivo stimato.

Puoi attivare/disattivare la visibilità dell'intestazione e del piè di pagina di navigazione e i relativi colori in modo programmatico mediante le seguenti proprietà:

• navigationHeaderEnabled: determina se l'intestazione di navigazione è visibile (il valore predefinito è true).
• navigationFooterEnabled: stabilisce se il piè di pagina di navigazione è visibile (il valore predefinito è true).
• navigationHeaderPrimaryBackgroundColor: imposta il principale colore di sfondo per l'intestazione della navigazione.
• navigationHeaderSecondaryBackgroundColor: imposta il secondario colore di sfondo per l'intestazione della navigazione.

L'esempio di codice che segue mostra l'attivazione della visibilità per l'intestazione e piè di pagina, quindi di impostare navigationHeaderPrimaryBackgroundColor sul blu e navigationHeaderSecondaryBackgroundColor al 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 intestazione dell'accessorio di navigazione

Puoi personalizzare l'app sostituendo la visualizzazione dell'intestazione di navigazione secondaria con la tua vista accessori personalizzata. Per farlo, crei una vista implementa il protocollo GMSNavigationAccessoryView. Questo protocollo ha uno metodo obbligatorio: -heightForAccessoryViewConstrainedToSize:onMapView:. Stai date le dimensioni massime disponibili per la tua visualizzazione nel MapView in questione e deve fornire l'altezza richiesta dalla visualizzazione.

Puoi quindi passare questa vista a mapView chiamando setHeaderAccessoryView: MapView anima tutte le visualizzazioni correnti, poi le anima nella sequenza vista. L'intestazione della navigazione deve essere visibile per consentire la visualizzazione personalizzata display.

Nota: su alcuni smartphone, MapView può essere troppo breve in modalità Orizzontale. la visualizzazione personalizzata verrà nascosta.

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

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

Esempio

L'esempio di codice seguente mostra una visualizzazione personalizzata che implementa la funzione protocollo GMSNavigationAccessoryView. Questa visualizzazione personalizzata viene quindi utilizzata per impostare vista 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];

Elenco indicazioni stradali

Nella tua app puoi fornire indicazioni stradali dettagliate. Nell'esempio che segue mostra un possibile modo per farlo. Questi passaggi possono variare a seconda dell'utente implementazione.

1. Attiva un pulsante del punto di ingresso dopo setDestinations su GMSNavigator (navigator) ha completato correttamente la navigazione e guidanceActive nel navigatore è stata abilitata.
2. Quando un utente tocca il pulsante del punto di ingresso, crea un GMSNavigationDirectionsListController (controller) con il navigatore associati a GMSMapView (mapView).
3. Aggiungi il controller a un'istanza di UIViewController (visualizza controller), e aggiungi directionsListView come vista secondaria del controller di visualizzazione. La È necessario chiamare i metodi reloadData e invalidateLayout sul controller come faresti con un UICollectionView.
4. Trasferisci il controller di visualizzazione alla gerarchia di controller di visualizzazione dell'app.

di Gemini Advanced.

Note:

• L'elenco delle indicazioni stradali non è destinato a essere riutilizzato e deve essere vengono ricreati per ogni sessione di navigazione.
• Il controller contiene solo un riferimento debole al navigatore.
• Per un esempio completo, fai riferimento all'app demo fornita nel pacchetto scaricato, menzionato nella sezione Configurare il progetto.

L'esempio di codice seguente 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)
  // 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 che si trova sul bordo destro finale. della mappa all'avvio della navigazione. Quando è attiva, mostra una panoramica di l'intero percorso, insieme alla destinazione dell'utente e alla sua posizione.

Offre agli utenti la possibilità di prevedere rapidamente eventuali problemi imminenti, come come il traffico, senza dover aumentare lo zoom. Possono quindi deviare il percorso se necessaria. Se l'utente reindirizza la corsa, la barra di avanzamento viene reimpostata come se da quel punto fosse iniziato un nuovo viaggio.

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 nel percorso.

• Percorso trascorso: la parte trascorsa del percorso.

Attiva la barra di avanzamento del percorso impostando il 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 nel mapView. Con questa funzionalità, l'utente può attivare la visualizzazione dei semafori o del segnale di stop lungo il percorso, fornendo un contesto migliore per una maggiore efficienza la precisione delle corse.

Per impostazione predefinita, i semafori e i segnali di stop sono disattivati nell'SDK di navigazione per iOS. Per attivare questa funzionalità, richiama le impostazioni GMSMapView in modo indipendente per ogni opzione: showsTrafficLights e showsStopSigns.

Swift

mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true

Objective-C

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

Controllo del tachimetro

Quando la navigazione è attivata e la modalità di viaggio è impostata su Auto, l'SDK di navigazione per iOS visualizza 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 per visualizzare un secondo tachimetro con la velocità attuale del conducente.

Puoi impostare i livelli di avviso per cambiare la formattazione del display del tachimetro Quando il conducente supera il limite di velocità di un determinato importo. Ad esempio: puoi specificare che la velocità corrente sia di colore rosso quando il valore un conducente supera il limite di velocità di 8 km/h 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 a true. Per disattivare la visualizzazione del controllo del limite di velocità, imposta Da shouldDisplaySpeedometer a false.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Per ulteriori informazioni sull'impostazione degli avvisi per il tachimetro, vedi Configura 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. Nell'esempio che segue mostra la disattivazione degli indicatori della destinazione.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Nota: puoi specificare un'immagine personalizzata come indicatore, ma l'SDK non lo supporta attualmente l'etichettatura di queste immagini con il testo. Per ulteriori informazioni, vedi Indicatori.

Funzionalità relative all'esperienza sulla mappa

L'SDK di navigazione consente di per personalizzare ulteriormente l'esperienza di navigazione. Ti cambia da apportare all'istanza durante il successivo aggiornamento dell'app da parte dell'utente.

Disattiva gesti mappa predefiniti

Puoi disattivare i gesti predefiniti sulla mappa impostando le proprietà del GMSUISettings, disponibile come proprietà della classe GMSMapView. I seguenti gesti possono essere attivati e disattivati in modo programmatico. Tieni presente che la disattivazione del gesto non limiterà l'accesso programmatico alla fotocamera impostazioni.

• scrollGestures: consente di stabilire se attivare o meno i gesti di scorrimento disattivata. Se questa impostazione è attiva, gli utenti possono scorrere per eseguire la panoramica della fotocamera.
• zoomGestures: consente di stabilire se attivare o meno i gesti di zoom o disabilitato. Se l'opzione è attiva, 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 scrollGestures attivi possono eseguire una panoramica della fotocamera fino al punto specificato.
• tiltGestures: consente di stabilire se attivare o meno i gesti di inclinazione disattivata. Se l'opzione è attiva, gli utenti possono scorrere verso il basso o verso l'alto con due dita per inclinare la fotocamera.
• rotateGestures: consente di stabilire se attivare o meno i gesti di rotazione o disabilitato. Se l'opzione è attiva, gli utenti possono usare un gesto di rotazione con due dita per Ruota la fotocamera.

In questo esempio, sono stati disattivati entrambi i gesti di panoramica e zoom.

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 dell'interfaccia utente in base alla posizione intestazione e piè di pagina di navigazione, utilizzando le seguenti proprietà:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Il seguente esempio di codice mostra l'utilizzo delle guide al layout per posizionare una coppia di 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 è piena di troppe informazioni, è possibile ridurre il disordine visualizzando meno percorsi alternativi rispetto a quello predefinito (due), oppure perché non mostra alcun percorso alternativo. 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
GMSNavigationAlternateRoutesStrategyAll	Predefinita. Mostra fino a due percorsi alternativi.
GMSNavigationAlternateRoutesStrategyOne	Visualizza un percorso alternativo (se disponibile).
GMSNavigationAlternateRoutesStrategyNone	Nasconde i percorsi alternativi.

Esempio

Il seguente esempio di codice mostra come nascondere completamente i percorsi 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){...}];

Avviso: questa funzionalità al momento non è compatibile con il percorso più breve. preferenza. L'utilizzo di entrambe le funzionalità contemporaneamente può produrre risposte comportamento degli utenti.