Navigations-UI ändern

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

UI-Steuerelemente für Karten

Das Navigation SDK bietet einige integrierte UI-Steuerelemente, die denen in der Google Maps for iOS-App ähneln. Sie können die Sichtbarkeit dieser Steuerelemente mithilfe der Klasse GMSUISettings ändern. Änderungen, die Sie an dieser Klasse vornehmen, sind sofort auf der Karte zu sehen.

Hinweis :Jedes Steuerelement hat eine vordefinierte Position relativ zum Rand der Karte. Sie können die Steuerelemente weiter entfernt vom Kartenrand anzeigen lassen, indem Sie die Karte mit einem Innenrand versehen.

Kompass

Das Navigation SDK bietet eine Kompassgrafik, die unter bestimmten Umständen und nur dann oben rechts auf der Karte angezeigt wird, wenn sie aktiviert ist. Der Kompass wird nur dann angezeigt, wenn die Kamera eine andere Lage hat als genau nach Norden ausgerichtet ist (keine Null). Wenn der Nutzer auf den Kompass klickt, wird die Kamera an eine Position mit der Peilung von null (Standardausrichtung) zurückbewegt und der Kompass wird kurz darauf ausgeblendet.

Wenn die Navigation aktiviert und der Kameramodus auf „Folge ich“ eingestellt ist, bleibt der Kompass sichtbar und durch Antippen des Kompasses wird zwischen der geneigten und der Übersichtskamera gewechselt.

Standardmäßig ist der Kompass deaktiviert. Wenn Sie den Kompass aktivieren möchten, setzen Sie die Eigenschaft compassButton von GMSUISettings auf YES. Sie können jedoch nicht erzwingen, dass der Kompass immer angezeigt wird.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Schaltfläche „Mein Standort“

Die Schaltfläche „Mein Standort“ wird nur dann rechts unten auf dem Bildschirm angezeigt, wenn sie aktiviert ist. Wenn ein Nutzer auf die Schaltfläche klickt, wird die Kamera animiert und fokussiert den aktuellen Standort des Nutzers, sofern dessen Standort aktuell bekannt ist. Du kannst die Schaltfläche aktivieren, indem du das Attribut myLocationButton von GMSUISettings auf YES setzt.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Schaltfläche neu zentrieren

Ist die Navigation aktiviert, wird die Schaltfläche „Neu zentrieren“ angezeigt, wenn der Nutzer in der Kartenansicht scrollt. Sie wird ausgeblendet, wenn der Nutzer darauf tippt, um die Karte neu zu zentrieren. Damit die Schaltfläche zum Rezensieren eingeblendet wird, muss die Eigenschaft recenterButtonEnabled von GMSUISettings auf YES gesetzt werden. Wenn Sie nicht möchten, dass die Schaltfläche „Neu zentrieren“ angezeigt wird, legen Sie für recenterButtonEnabled den Wert NO fest.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Karten-UI-Zubehör

Das Navigation SDK stellt UI-Zubehör bereit, das während der Navigation ähnlich wie in der Google Maps App für iOS angezeigt wird. Sie können die Sichtbarkeit und visuelle Darstellung dieser Steuerelemente wie in diesem Abschnitt beschrieben anpassen. Hier vorgenommene Änderungen werden bei der nächsten Fahrt des Fahrers übernommen.

Navigationskopf- und -fußzeile

Während der Navigation wird die Navigationsüberschrift oben auf dem Bildschirm und die Navigationsfußzeile unten auf dem Bildschirm angezeigt. Der Navigationsheader zeigt den Straßennamen und die Richtung der nächsten Abzweigung auf der Route sowie die Richtung der folgenden Abzweigung. Die Navigationsfußzeile zeigt die geschätzte Zeit und Entfernung zum Ziel sowie die voraussichtliche Ankunftszeit an.

Mit den folgenden Eigenschaften können Sie die Sichtbarkeit der Kopf- und Fußzeile der Navigationsleiste umschalten und ihre Farben programmatisch festlegen:

• navigationHeaderEnabled: legt fest, ob die Navigationsüberschrift sichtbar ist. Der Standardwert ist true.
• navigationFooterEnabled: legt fest, ob die Navigationsfußzeile sichtbar ist. Der Standardwert ist true.
• navigationHeaderPrimaryBackgroundColor: Damit wird die primäre Hintergrundfarbe für den Navigationsheader festgelegt.
• navigationHeaderSecondaryBackgroundColor: Damit wird die sekundäre Hintergrundfarbe für den Navigationsheader festgelegt.

Im folgenden Codebeispiel wird gezeigt, wie Sie die Sichtbarkeit der Kopf- und Fußzeile aktivieren und dann navigationHeaderPrimaryBackgroundColor auf Blau und navigationHeaderSecondaryBackgroundColor auf Rot setzen.

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

Kopfzeilenansicht für Navigationszubehör

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

Diese Ansicht können Sie dann an die Kartenansicht übergeben, indem Sie setHeaderAccessoryView: aufrufen. Mit der Funktion „mapView“ werden alle aktuellen Ansichten animiert und dann in Ihrer benutzerdefinierten Ansicht animiert. Die Navigationsüberschrift muss sichtbar sein, damit Ihre benutzerdefinierte Ansicht angezeigt werden kann.

Hinweis :Auf einigen Smartphones kann das Feld „mapView“ im Querformat zu kurz sein und Ihre benutzerdefinierte Ansicht wird ausgeblendet.

Übergeben Sie nil an setHeaderAccessoryView:, um die benutzerdefinierte Header-Zubehöransicht zu entfernen

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, in der das GMSNavigationAccessoryView-Protokoll implementiert wird. Diese benutzerdefinierte Ansicht wird dann verwendet, um eine benutzerdefinierte Zubehöransicht für Navigationsheader festzulegen.

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

Routenliste

Sie können in Ihrer App detaillierte Wegbeschreibungen bereitstellen. Das folgende Beispiel zeigt eine Möglichkeit. Diese Schritte können je nach Implementierung variieren.

1. Aktivieren Sie eine Einstiegspunktschaltfläche, nachdem setDestinations im GMSNavigator (Navigation) abgeschlossen und guidanceActive im 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 der GMSMapView (mapView) zugeordnet ist.
3. Fügen Sie den Controller einer Instanz von UIViewController (View-Controller) hinzu und fügen Sie directionsListView als Unteransicht des Ansicht-Controllers hinzu. Die Methoden reloadData und invalidateLayout für den Controller sollten wie bei einer UICollectionView aufgerufen werden.
4. Übertragen Sie den Ansichts-Controller in die Hierarchie des Ansichts-Controllers.

Hinweise:

• Die Routenliste ist nicht zur Wiederverwendung gedacht und sollte für jede Navigationssitzung neu erstellt werden.
• Der Controller enthält nur einen schwachen Bezug auf den Navigator.
• Ein vollständiges Beispiel finden Sie in der Demo-App, die im heruntergeladenen Paket im Abschnitt Projekt einrichten enthalten ist.

Das folgende Codebeispiel zeigt, wie ein DirectionsListViewController hinzugefügt wird.

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

...

Fortschrittsanzeige für die Fahrt

Die Fortschrittsanzeige der Fahrt ist ein vertikaler Balken, der zu Beginn der Navigation am rechten unteren Rand der Karte angezeigt wird. Wenn diese Option aktiviert ist, wird eine Übersicht für die gesamte Fahrt zusammen mit dem Ziel des Fahrers und der aktuellen Position angezeigt.

So haben Fahrer die Möglichkeit, bevorstehende Probleme wie den Verkehr schnell vorherzusehen, ohne heranzuzoomen. Bei Bedarf können sie die Fahrt dann neu berechnen. Wenn der Fahrer die Route neu berechnet, wird die Fortschrittsanzeige zurückgesetzt, als ob eine neue Fahrt an diesem Punkt begonnen hätte.

In der Fortschrittsanzeige der Fahrt werden die folgenden Statusanzeigen angezeigt:

• Traffic-Status: Der Status des kommenden Traffics.

• Aktueller Standort: Der aktuelle Standort des Fahrers auf der Fahrt.

• Verstrichene Route: die verstrichene Zeit

Aktivieren Sie die Fortschrittsanzeige der Fahrt, indem Sie die Eigenschaft navigationTripProgressBarEnabled in den GMSUISettings festlegen.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Ampeln und Stoppschilder

Im mapView kannst du Ampeln und Stoppschilder aktivieren. Mit dieser Funktion kann der Fahrer die Anzeige von Ampeln oder Symbolen für Stoppschilder entlang der Route aktivieren und so einen besseren Kontext für effizientere und präzisere Fahrten bereitstellen.

Standardmäßig sind Ampeln und Stoppschilder im Navigation SDK for iOS deaktiviert. Rufen Sie zum Aktivieren dieser Funktion die GMSMapView-Einstellungen für jede Option einzeln auf: showsTrafficLights und showsStopSigns.

Swift

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

Objective-C

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

Tachosteuerung

Wenn die Navigation aktiviert ist, wird im Navigation SDK for iOS unten auf der Karte ein Steuerelement für die Geschwindigkeitsbegrenzung mit der aktuellen Geschwindigkeitsbegrenzung angezeigt. Wenn der Fahrer die Geschwindigkeit überschreitet, wird der Steuerelement maximiert und es wird ein zweiter Tachometer mit der aktuellen Geschwindigkeit des Fahrers angezeigt.

Sie können Warnstufen festlegen, um die Formatierung der Tachoanzeige zu ändern, wenn der Fahrer die Geschwindigkeitsbegrenzung um einen bestimmten Wert überschreitet. Sie können beispielsweise festlegen, dass die aktuelle Geschwindigkeit in einer roten Textfarbe angezeigt wird, wenn der Fahrer die Geschwindigkeitsbegrenzung um 8 km/h überschreitet, und mit einer roten Hintergrundfarbe, wenn der Fahrer die Geschwindigkeitsbegrenzung um 16 km/h überschreitet.

Wenn die Einstellung für die Geschwindigkeitsbegrenzung angezeigt werden soll, setzen Sie die Eigenschaft shouldDisplaySpeedometer von GMSUISettings auf YES. Wenn Sie die Anzeige der Geschwindigkeitsbegrenzung deaktivieren möchten, setzen Sie shouldDisplaySpeedometer auf NO.

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Weitere Informationen zum Einrichten von Benachrichtigungen für den Tachometer finden Sie unter Tachometer-Benachrichtigungen konfigurieren.

Zielmarkierungen

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

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Hinweis :Sie können als Markierung ein benutzerdefiniertes Bild angeben. Das SDK unterstützt jedoch derzeit nicht das Labeling dieser Bilder mit Text. Weitere Informationen finden Sie unter Markierungen.

Funktionen in Google Maps

Mit dem Navigation SDK können Sie die Navigation weiter anpassen. Änderungen, die Sie an der Instanz vornehmen, werden beim nächsten Update der Anwendung durch den Treiber übernommen.

Standardgesten für Karten deaktivieren

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

• scrollGestures: legt fest, ob Scrollbewegungen aktiviert oder deaktiviert sind. Ist die Geste aktiviert, können Benutzer die Kamera durch eine Wischbewegung schwenken.
• zoomGestures: legt fest, ob Zoombewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer zum Zoomen der Kamera doppeltippen, mit zwei Fingern tippen oder die Finger auseinander- und zusammenziehen. Wenn scrollGestures aktiviert ist, wird die Kamera durch Doppeltippen oder Zusammenziehen der Finger auf den angegebenen Punkt geschwenkt.
• tiltGestures: legt fest, ob Neigebewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera neigen, indem sie mit zwei Fingern vertikal nach unten oder oben wischen.
• rotateGestures: legt fest, ob Drehbewegungen aktiviert oder deaktiviert sind. Wenn diese Option aktiviert ist, können Nutzer die Kamera mit einer Drehbewegung mit zwei Fingern drehen.

In diesem Beispiel wurden sowohl Schwenk- als auch Zoombewegungen deaktiviert.

Swift

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

Objective-C

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

Steuerelemente für Position und UI-Elemente

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

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Im folgenden Codebeispiel wird gezeigt, wie mithilfe der Layoutanleitungen ein Labelpaar in der Kartenansicht positioniert wird:

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;

Alternative Routen ausblenden

Wenn die Benutzeroberfläche mit zu vielen Informationen unübersichtlich wird, können Sie weniger alternative Routen als die Standardrouten (zwei) oder gar keine anzeigen lassen. Sie können diese Option konfigurieren, bevor Sie die Routen abrufen. Dazu konfigurieren Sie GMSNavigationRoutingOptions und legen einen der folgenden Aufzählungswerte für alternateRoutesStrategy fest:

Aufzählungswert	Beschreibung
GMSNavigationAlternativeRoutesStrategyAlle	Standard. Zeigt bis zu zwei alternative Routen an.
GMSNavigationAlternativeRoutesStrategyOne	Zeigt eine alternative Route an (falls verfügbar).
GMSNavigationAlternateRoutesStrategyNone	Alternative Routen werden ausgeblendet.

Beispiel

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

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

Warnung: Dieses Feature ist derzeit nicht mit der kürzesten Routingeinstellung für Routen kompatibel. Die gleichzeitige Verwendung beider Features kann zu unerwartetem Verhalten führen.