Navigations-UI ändern

Mit dem Navigation SDK for iOS können Sie die Nutzerfreundlichkeit Ihrer Karte anpassen. Dazu legen Sie fest, welche der integrierten UI-Steuerelemente und -Elemente auf der Karte erscheinen und welche Touch-Gesten zulässig sind. Sie können auch die visuelle Darstellung der Navigations-UI ändern. Auf der Richtlinienseite finden Sie Richtlinien zu zulässigen Änderungen an der Navigationsoberfläche.

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 an dieser Klasse werden sofort auf der Karte angezeigt.

Kompass

Das Navigation SDK bietet eine Kompassgrafik, die unter bestimmten Umständen und nur bei aktiviertem SDK oben rechts auf der Karte erscheint. Der Kompass wird nur angezeigt, wenn die Kamera nicht genau nach Norden ausgerichtet ist (eine Abweichung von null). Wenn der Nutzer auf den Kompass klickt, wird die Kamera mit einer Animation an eine Position mit Nullrichtung, d. h. der Standardausrichtung, zurückbewegt und der Kompass wird anschließend allmählich ausgeblendet.

Wenn die Navigation aktiviert ist und der Kameramodus auf „Folgen“ eingestellt ist, bleibt der Kompass sichtbar. Durch Tippen auf den Kompass 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 compassButton-Attribut 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 nur dann rechts unten auf dem Bildschirm angezeigt, wenn die Schaltfläche „Mein Standort“ aktiviert ist. Wenn ein Nutzer auf die Schaltfläche klickt, richtet sich die Kamera auf den aktuellen Standort des Nutzers aus, sofern dieser bekannt ist. Sie können die Schaltfläche aktivieren, indem Sie die myLocationButton-Eigenschaft von GMSUISettings auf true setzen.

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“ angezeigt werden soll, legen Sie die Eigenschaft recenterButtonEnabled von GMSUISettings auf true fest. Wenn die Schaltfläche „Neuere“ 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 ähnlich wie in der Google Maps App für iOS angezeigt wird. 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.

Navigationsheader und -fußzeile

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 geschätzte Ankunftszeit angezeigt.

Mit den folgenden Properties kannst du 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 (Standard ist true).
• navigationHeaderPrimaryBackgroundColor: Hiermit wird die primäre Hintergrundfarbe für die Navigationsleiste festgelegt.
• navigationHeaderSecondaryBackgroundColor: Hiermit wird die sekundäre Hintergrundfarbe für die Navigationsleiste festgelegt.

Im folgenden Codebeispiel wird die Sichtbarkeit für den Header und den Footer aktiviert und dann navigationHeaderPrimaryBackgroundColor auf „blau“ und navigationHeaderSecondaryBackgroundColor auf „rot“ festgelegt.

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

Kopfzeilenanzeige für Navigationszubehör

Sie können Ihre App anpassen, indem Sie die Ansicht der sekundären Navigationsleiste durch eine benutzerdefinierte Ansicht für die Zusatzfunktionen ersetzen. Dazu erstellen Sie eine Ansicht, die das GMSNavigationAccessoryView-Protokoll implementiert. Dieses Protokoll hat eine erforderliche Methode: -heightForAccessoryViewConstrainedToSize:onMapView:. Sie sehen 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 du die Ansicht für das benutzerdefinierte Header-Zubehör entfernen möchtest, übergebe nil an setHeaderAccessoryView:.

Wenn die Größe der 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 einen GMSNavigationDirectionsListController (Controller) mit dem Navigator, der mit der GMSMapView (mapView) verknüpft ist.
3. Fügen Sie den Controller einer Instanz von UIViewController (Ansichtscontroller) hinzu und fügen Sie directionsListView als untergeordnete Ansicht des Ansichtscontrollers hinzu. Die Methoden reloadData und invalidateLayout auf dem Controller sollten wie bei einer 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 die aktuelle Position 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 die Property navigationTripProgressBarEnabled in GMSUISettings festlegen.

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

Ampeln und Stoppschilder

Sie können Ampeln und Stoppschilder in der mapView aktivieren. Mit dieser Funktion können Nutzer die Anzeige von Ampeln oder Haltestellensymbolen entlang ihrer Route aktivieren. So erhalten sie einen besseren Kontext für effizientere und genauere Fahrten.

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 unabhängig voneinander auf: showsTrafficLights und showsStopSigns.

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

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

Tachosteuerung

Wenn die Navigation aktiviert ist und der Mobilitätsmodus auf „Autofahren“ festgelegt ist, zeigt das Navigations-SDK für iOS unten auf 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 Wert ü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 Geschwindigkeitsbegrenzung anzeigen möchten, legen Sie die Eigenschaft shouldDisplaySpeedometer von GMSUISettings auf true fest. Wenn die Geschwindigkeitsbegrenzung nicht angezeigt werden soll, setzen Sie shouldDisplaySpeedometer auf false.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

Weitere Informationen zum Festlegen von Geschwindigkeitswarnungen finden Sie unter Geschwindigkeitswarnungen 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;

Funktionen der Kartenansicht

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 Aktualisieren der App durch den Nutzer übernommen.

Standard-Karten-Gesten 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. 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 beim Doppeltippen oder Auseinander- und Zusammenziehen auf den angegebenen Punkt schwenkt.
• 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: Steuert, ob Touch-Gesten für Drehbewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera mit einer Drehung 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-Glieder 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, indem Sie weniger als die standardmäßigen zwei anzeigen oder gar keine alternativen Routen anzeigen. Sie können diese Option vor dem Abrufen der Routen konfigurieren, indem Sie GMSNavigationRoutingOptions konfigurieren und alternateRoutesStrategy auf einen der folgenden Aufzählungswerte festlegen:

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