Navigations-UI ändern

Mit dem Navigation SDK for iOS können Sie die Nutzerfreundlichkeit Ihrer Karte ändern, indem Sie festlegen, welche der integrierten UI-Steuerelemente und -Elemente auf der Karte angezeigt werden und welche Touch-Gesten Sie zulassen. Sie können auch das Erscheinungsbild der Navigations-UI ändern. Auf der Seite mit den Richtlinien finden Sie Richtlinien zu zulässigen Änderungen an der Navigations-UI.

Steuerelemente für die Kartenoberfläche

Das Navigation SDK bietet einige integrierte UI-Steuerelemente, die denen in der Google Maps App für iOS ähneln. Die Sichtbarkeit dieser Steuerelemente lässt sich mit der Klasse GMSUISettings aktivieren und deaktivieren. Änderungen, die Sie an dieser Klasse vornehmen, werden sofort auf der Karte übernommen.

Kompass

Das Navigations-SDK bietet eine Kompassgrafik, die unter bestimmten Umständen und nur bei aktiviertem SDK in der oberen rechten Ecke der Karte angezeigt wird. Der Kompass wird nur dann angezeigt, wenn die Kamera nicht genau nach Norden ausgerichtet ist (eine andere Richtung als Norden). Wenn der Nutzer auf den Kompass klickt, wird die Kamera animiert zurück in eine Position mit einer Richtung von null (die Standardausrichtung) und der Kompass verschwindet kurz darauf.

Wenn die Navigation aktiviert und der Kameramodus auf „Folgen“ eingestellt ist, bleibt der Kompass sichtbar. Wenn Sie auf den Kompass tippen, wechseln Sie zwischen der Kameraperspektive mit Neigung und der Übersichtsperspektive.

Standardmäßig ist der Kompass deaktiviert. Sie können den Kompass aktivieren, indem Sie das Attribut compassButton von GMSUISettings auf true festlegen. Es lässt sich jedoch nicht erzwingen, dass der Kompass immer angezeigt wird.

mapView.settings.compassButton = true

mapView.settings.compassButton = YES;

Schaltfläche „Mein Standort“

Die Schaltfläche „Mein Standort“ wird rechts unten auf dem Bildschirm nur angezeigt, wenn sie aktiviert ist. Wenn ein Nutzer auf die Schaltfläche klickt, wird die Kamera animiert, um den Fokus auf den aktuellen Standort des Nutzers zu legen, sofern dieser bekannt ist. Sie können die Schaltfläche aktivieren, indem Sie die myLocationButton-Eigenschaft von GMSUISettings auf true festlegen.

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

Schaltfläche „Letzte“

Wenn die Navigation aktiviert ist, wird die Schaltfläche zum Zentrieren der Karte angezeigt, wenn der Nutzer in der Kartenansicht scrollt. Sie verschwindet, wenn der Nutzer darauf tippt, um die Karte wieder zu zentrieren. Wenn die Schaltfläche „Neuere zuerst“ angezeigt werden soll, legen Sie die recenterButtonEnabled-Eigenschaft von GMSUISettings auf true fest. Wenn die Schaltfläche „Zuletzt aufgerufen“ nicht angezeigt werden soll, setzen Sie recenterButtonEnabled auf false.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

UI-Zubehör für Karten

Das Navigation SDK bietet UI-Zubehör, das während der Navigation angezeigt wird und dem in der Google Maps App für iOS ähnelt. Sie können die Sichtbarkeit oder das visuelle Erscheinungsbild dieser Steuerelemente wie in diesem Abschnitt beschrieben anpassen. Änderungen, die Sie hier vornehmen, werden bei der nächsten Fahrt des Nutzers berücksichtigt.

Kopf- und Fußzeile der Navigation

Während der Navigation wird die Navigationsüberschrift oben auf dem Bildschirm und die Navigationsfußzeile unten angezeigt. In der Navigationsüberschrift werden der Straßenname und die Richtung für die nächste Abbiegung auf der Route sowie die Richtung der nächsten Abbiegung angezeigt. In der Navigationsfußzeile werden die geschätzte Zeit und Entfernung zum Ziel sowie die voraussichtliche Ankunftszeit angezeigt.

Mit den folgenden Properties können Sie die Sichtbarkeit der Navigationsüberschrift und -fußzeile umschalten und ihre Farben programmatisch festlegen:

• navigationHeaderEnabled: Gibt an, ob die Navigationsleiste sichtbar ist (Standardwert: true).
• navigationFooterEnabled: Gibt an, ob die Navigationsfußzeile sichtbar ist (Standardwert: true).
• navigationHeaderPrimaryBackgroundColor: Legt die primäre Hintergrundfarbe für die Navigationsleiste fest.
• navigationHeaderSecondaryBackgroundColor: Hiermit wird die sekundäre Hintergrundfarbe für die Navigationsleiste festgelegt.

Im folgenden Codebeispiel wird die Sichtbarkeit für Kopf- und Fußzeile aktiviert und dann navigationHeaderPrimaryBackgroundColor auf blau und navigationHeaderSecondaryBackgroundColor auf rot gesetzt.

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

Navigationszubehör – Kopfzeilenansicht

Sie können Ihre App anpassen, indem Sie die Kopfzeile der sekundären Navigation durch eine benutzerdefinierte Ansicht für Zubehör ersetzen. Dazu erstellen Sie eine Ansicht, die das GMSNavigationAccessoryView-Protokoll implementiert. Für dieses Protokoll ist eine Methode erforderlich: -heightForAccessoryViewConstrainedToSize:onMapView:. Sie erhalten die maximale verfügbare Größe für Ihre Ansicht in der angegebenen Kartenansicht und müssen die für Ihre Ansicht erforderliche Höhe angeben.

Sie können diese Ansicht dann an die mapView übergeben, indem Sie setHeaderAccessoryView: aufrufen. Die mapView animiert alle aktuellen Ansichten heraus und dann Ihre benutzerdefinierte Ansicht hinein. Die Navigationsleiste muss sichtbar sein, damit die benutzerdefinierte Ansicht angezeigt werden kann.

Wenn Sie die Ansicht für das benutzerdefinierte Header-Zubehör entfernen möchten, übergeben Sie nil an setHeaderAccessoryView:.

Wenn die Größe Ihrer Ansicht jederzeit geändert werden muss, können Sie invalidateLayoutForAccessoryView: aufrufen und die Ansicht übergeben, deren Größe geändert werden soll.

Beispiel

Das folgende Codebeispiel zeigt eine benutzerdefinierte Ansicht, die das GMSNavigationAccessoryView-Protokoll implementiert. Diese benutzerdefinierte Ansicht wird dann verwendet, um eine benutzerdefinierte Ansicht für den Navigationsheader festzulegen.

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

Wegbeschreibungsliste

Sie können in Ihrer App eine detaillierte Anleitung bereitstellen. Das folgende Beispiel zeigt eine mögliche Vorgehensweise. Diese Schritte können je nach Implementierung variieren.

1. Aktivieren Sie eine Schaltfläche für den Einstiegspunkt, nachdem setDestinations auf dem GMSNavigator (Navigator) erfolgreich abgeschlossen wurde und guidanceActive auf dem Navigator aktiviert wurde.
2. Wenn ein Nutzer auf die Schaltfläche für den Einstiegspunkt tippt, erstellen Sie eine GMSNavigationDirectionsListController (Controller) mit dem Navigator, der mit der GMSMapView (mapView) verknüpft ist.
3. Fügen Sie den Controller einer Instanz von UIViewController (View Controller) hinzu und fügen Sie die directionsListView als untergeordnete Ansicht des View Controllers hinzu. Die Methoden reloadData und invalidateLayout auf dem Controller sollten wie bei einem UICollectionView aufgerufen werden.
4. Den View Controller in die View Controller-Hierarchie der App einfügen

Das folgende Codebeispiel zeigt das Hinzufügen eines 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)
  // 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()
  })
  ...
}

- (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];
  ...
}

...

Fortschrittsanzeige für Fahrt

Die Fortschrittsanzeige für die Fahrt ist eine vertikale Leiste, die rechts am Ende der Karte angezeigt wird, wenn die Navigation gestartet wird. Wenn diese Option aktiviert ist, wird eine Übersicht für eine gesamte Fahrt sowie das Ziel und der aktuelle Standort des Nutzers angezeigt.

So können Nutzer schnell auf anstehende Probleme wie Staus reagieren, ohne heranzoomen zu müssen. Sie können die Fahrt dann bei Bedarf neu planen. Wenn der Nutzer die Route ändert, wird die Fortschrittsanzeige zurückgesetzt, als würde an diesem Punkt eine neue Fahrt gestartet.

In der Fortschrittsanzeige der Fahrt werden die folgenden Statussymbole angezeigt:

• Verkehrsstatus: Der Status des anstehenden Verkehrs.

• Aktueller Standort: Der aktuelle Standort des Fahrers während der Fahrt.

• Verstrichene Route: Der zurückgelegte Teil der Fahrt.

Aktivieren Sie die Fortschrittsanzeige für Fahrten, indem Sie das Attribut navigationTripProgressBarEnabled in GMSUISettings festlegen.

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

Ampeln und Stoppschilder

Sie können Ampel und Stoppschilder in den mapView aktivieren. Mit dieser Funktion können Nutzer die Anzeige von Ampeln oder Haltebuchten entlang ihrer Route aktivieren, um einen besseren Kontext für effizientere und genauere Fahrten zu erhalten.

Im Navigation SDK for iOS sind Ampel- und Stoppschilder standardmäßig deaktiviert. Wenn Sie diese Funktion aktivieren möchten, rufen Sie die GMSMapView-Einstellungen für jede Option separat auf: showsTrafficLights und showsStopSigns.

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

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

Tachometersteuerung

Wenn die Navigation aktiviert ist und der Mobilitätsmodus auf „Autofahren“ eingestellt ist, zeigt das Navigation SDK for iOS in der unteren Ecke der Karte ein Steuerelement für die Geschwindigkeitsbegrenzung an, das die aktuelle Geschwindigkeitsbegrenzung anzeigt. Wenn der Fahrer das Tempolimit überschreitet, wird das Steuerelement maximiert und ein zweiter Tachometer mit der aktuellen Geschwindigkeit des Fahrers angezeigt.

Sie können Warnstufen festlegen, um die Formatierung des Tachometers zu ändern, wenn der Fahrer das Tempolimit um einen bestimmten Betrag überschreitet. Sie können beispielsweise festlegen, dass die aktuelle Geschwindigkeit in roter Schrift angezeigt wird, wenn der Fahrer das Tempolimit um 8 km/h überschreitet, und in roter Hintergrundfarbe, wenn er es um 16 km/h überschreitet.

Wenn Sie die Steuerung für die zulässige Höchstgeschwindigkeit anzeigen lassen möchten, legen Sie die Eigenschaft shouldDisplaySpeedometer von GMSUISettings auf true fest. Wenn Sie die Anzeige der Geschwindigkeitsregelung deaktivieren möchten, setzen Sie shouldDisplaySpeedometer auf false.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

Weitere Informationen zum Festlegen von Benachrichtigungen für den Tachometer finden Sie unter Tachometerbenachrichtigungen konfigurieren.

Zielmarkierungen

Sie können die Zielmarkierungen für eine bestimmte Route ein- oder ausblenden, indem Sie die Eigenschaft showsDestinationMarkers von GMSUISettings festlegen. Im folgenden Beispiel werden die Zielmarkierungen deaktiviert.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

Kartenfunktionen

Mit dem Navigation SDK können Sie die Navigation für Ihre Nutzer weiter anpassen. Änderungen, die Sie an Ihrer Instanz vornehmen, werden beim nächsten Update der App durch den Nutzer übernommen.

Standard-Touch-Gesten für Karten deaktivieren

Sie können die Standard-Touch-Gesten auf der Karte deaktivieren, indem Sie Eigenschaften der Klasse GMSUISettings festlegen. Diese ist als Eigenschaft der GMSMapView verfügbar. Die folgenden Gesten können programmgesteuert aktiviert bzw. deaktiviert werden. Hinweis: Wenn Sie die Geste deaktivieren, wird der programmatische Zugriff auf die Kameraeinstellungen nicht eingeschränkt.

• scrollGestures: Hiermit wird festgelegt, ob Scroll-Gesten aktiviert oder deaktiviert sind. Ist die Geste aktiviert, können Benutzer die Kamera durch eine Wischbewegung schwenken.
• zoomGestures: Hiermit wird festgelegt, ob Zoom-Gesten aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer durch Doppeltippen, Tippen mit zwei Fingern oder Ziehen auseinander- und zusammen, um heran- oder herauszuzoomen. Wenn scrollGestures aktiviert ist, kann es passieren, dass die Kamera durch Doppeltippen oder Zusammenziehen des Bildausschnitts auf den angegebenen Punkt schwenken wird.
• tiltGestures: Hiermit wird festgelegt, ob Neigungsgesten aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera durch Wischen mit zwei Fingern nach unten oder oben neigen.
• rotateGestures: Hiermit wird festgelegt, ob Touch-Gesten für Drehbewegungen aktiviert oder deaktiviert sind. Wenn diese Funktion aktiviert ist, können Nutzer die Kamera mit einer Drehgeste mit zwei Fingern drehen.

In diesem Beispiel sind sowohl die Schwenk- als auch die Zoom-Gesten deaktiviert.

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

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

Positionierungssteuerungen und UI-Elemente

Mit den folgenden Eigenschaften können Sie Steuerelemente und andere UI-Elemente relativ zur Position der Navigationsüberschrift und ‑fußzeile positionieren:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Im folgenden Codebeispiel wird gezeigt, wie Sie mithilfe der Layout-Hilfslinien zwei Labels in der Kartenansicht positionieren:

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

Ausweichrouten ausblenden

Wenn die Benutzeroberfläche zu überladen ist, können Sie die Anzahl der alternativen Routen reduzieren. Sie können entweder weniger als die standardmäßigen zwei alternativen Routen anzeigen lassen oder gar keine. Sie können diese Option konfigurieren, bevor Sie die Routen abrufen. Konfigurieren Sie dazu GMSNavigationRoutingOptions und legen Sie alternateRoutesStrategy auf einen der folgenden Werte fest:

Beispiel

Im folgenden Codebeispiel wird gezeigt, wie alternative Routen vollständig ausgeblendet werden.

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