Modyfikowanie interfejsu użytkownika

Za pomocą pakietu SDK nawigacji na iOS możesz modyfikować wrażenia użytkownika związane z mapą, określając, które z wbudowanych elementów i elementów interfejsu użytkownika mają się wyświetlać na mapie oraz które gesty mają być obsługiwane. Możesz też zmienić wygląd wizualny interfejsu nawigacji. Wskazówki dotyczące dozwolonych modyfikacji interfejsu nawigacji znajdziesz na stronie zasad.

Elementy sterujące mapy

Pakiet SDK do nawigacji udostępnia wbudowane elementy interfejsu użytkownika podobne do tych, które występują w aplikacji Mapy Google na iOS. Możesz włączać i wyłączać widoczność tych elementów sterujących za pomocą klasy GMSUISettings. Zmiany wprowadzone w tej klasie są od razu widoczne na mapie.

Kompas

Pakiet SDK nawigacji udostępnia grafikę kompasu, która w określonych okolicznościach i tylko wtedy, gdy jest włączona, pojawia się w prawym górnym rogu mapy. Gdy użytkownik kliknie kompas, kamera powróci do pozycji z kierunkiem 0 stopni (orientacja domyślna), a kompas zniknie po chwili.

Jeśli nawigacja jest włączona, a tryb kamery ustawiony na „Podążanie”, kompas pozostaje widoczny. Kliknięcie kompasu powoduje przełączanie się między perspektywą z wykrzywionego i panoramy.

Aby uniknąć rozpraszania uwagi kierowcy, kompas pozostaje w tym samym położeniu, jeśli nagłówek (w trybie poziomym) rozszerza się i koliduje z domyślnym położeniem kompasu. Jeśli dodasz element sterujący niestandardowego nagłówka lub widok akcesorium nagłówka, kompas zostanie ukryty, aby uniknąć konfliktów w interfejsie.

Kompas obsługuje tryb dzienny i nocny, a także tryb ciemny.

Kompas jest domyślnie wyłączony. Możesz włączyć kompas, ustawiając właściwość compassButton w elementach GMSUISettings na true. Nie możesz jednak wymusić wyświetlania kompasu przez cały czas.

mapView.settings.compassButton = true

mapView.settings.compassButton = YES;

Przycisk Moja lokalizacja

Przycisk Moja lokalizacja pojawia się w prawym dolnym rogu ekranu tylko, gdy jest włączony. Gdy użytkownik kliknie przycisk, kamera wykona animację, aby ustawić ostrość na jego bieżącej lokalizacji (jeśli jest ona znana). Możesz włączyć przycisk, ustawiając właściwość myLocationButton w elementach GMSUISettings na true.

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

Przycisk Wyśrodkuj

Gdy nawigacja jest włączona, przycisk wyśrodkowania pojawia się, gdy użytkownik przewija widok mapy, i znika, gdy użytkownik klika, aby ponownie wyśrodkować mapę. Aby umożliwić wyświetlanie przycisku „Ostatnie”, ustaw właściwość recenterButtonEnabled w elementach GMSUISettings na true. Aby zapobiec wyświetlaniu przycisku recentera, ustaw wartość parametru recenterButtonEnabled na false.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

Akcesoria interfejsu mapy

Pakiet Navigation SDK udostępnia elementy interfejsu użytkownika, które pojawiają się podczas nawigacji i są podobne do tych, które można znaleźć w aplikacji Mapy Google na iOS. Możesz dostosować widoczność lub wygląd tych elementów zgodnie z opisem w tej sekcji. Zmiany, które tu wprowadzisz, będą widoczne w przyszłej podróży użytkownika.

Nagłówek i stopka elementów nawigacyjnych

Podczas nawigacji nagłówek nawigacji wyświetla się u góry ekranu, a stopka nawigacji – u dołu. W nagłówku nawigacji wyświetlane są nazwa ulicy i kierunek następnego skrętu na trasie, a także kierunek następnego skrętu. W stopce nawigacji wyświetla się szacowany czas i odległość do miejsca docelowego oraz szacowany czas dotarcia.

Możesz włączać i wyłączać widoczność nagłówka i stopki nawigacji oraz ustawiać ich kolory za pomocą tych właściwości:

• navigationHeaderEnabled – określa, czy nagłówek nawigacji jest widoczny (wartość domyślna to true).
• navigationFooterEnabled – określa, czy stopka nawigacji jest widoczna (wartość domyślna to true).
• navigationHeaderPrimaryBackgroundColor – ustawia podstawowy kolor tła nagłówka nawigacji.
• navigationHeaderSecondaryBackgroundColor – ustawia dodatkowy kolor tła nagłówka nawigacji.

Poniższy przykład kodu pokazuje włączenie widoczności nagłówka i stopki, a następnie ustawienie koloru navigationHeaderPrimaryBackgroundColor na niebiesko, a navigationHeaderSecondaryBackgroundColor na czerwono.

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

Widok nagłówka akcesorium nawigacyjnego

Możesz dostosować swoją aplikację, zastępując widok nagłówka z dodatkowym menu nawigacji własnym widokiem akcesorium. Aby to zrobić, utwórz widok danych, który implementuje protokół GMSNavigationAccessoryView. Ten protokół ma 1 wymagany sposób: -heightForAccessoryViewConstrainedToSize:onMapView:. Dostępny jest maksymalny rozmiar widoku na danej mapie. Musisz podać wysokość wymaganą przez widok.

Następnie możesz przekazać ten widok do mapView, wywołując funkcję setHeaderAccessoryView:. Funkcja mapView powoduje animację wyjścia z bieżących widoków, a następnie animację wejścia do widoku niestandardowego. Aby widok niestandardowy był widoczny, nagłówek nawigacji musi być widoczny.

Aby usunąć widok akcesorium nagłówka niestandardowego, prześlij nil do setHeaderAccessoryView:.

Jeśli rozmiar widoku musi się zmieniać w dowolnym momencie, możesz wywołać funkcję invalidateLayoutForAccessoryView:, przekazując widok, którego rozmiar ma się zmienić.

Przykład

Poniższy przykład kodu pokazuje widok niestandardowy, który implementuje protokół GMSNavigationAccessoryView. Ten widok niestandardowy jest następnie używany do ustawiania widoku akcesorium nagłówka nawigacji niestandardowej.

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

Tryb nocny

Metoda listenera GMSNavigatorListener.didChangeSuggestedLightingMode jest wywoływana, gdy aktualizowane są szacowane warunki oświetlenia, na przykład gdy w bieżącej lokalizacji urządzenia zapada noc. Tryb nocny możesz zmodyfikować programowo na te sposoby:

• Wybierz, kiedy mają być używane tryb normalny i tryb słabego oświetlenia (nocny), korzystając z enumeracji GMSNavigationLightingMode.
• Wybierz kolory główne i dodatkowe tła trybu nocnego, ustawiając wartości właściwości navigationHeaderPrimaryBackgroundColorNightMode i navigationHeaderSecondaryBackgroundColorNightMode.

Lista tras

W aplikacji możesz podać szczegółowe instrukcje. Przykład poniżej pokazuje, jak to zrobić. Te kroki mogą się różnić w zależności od implementacji.

1. Włącz przycisk punktu wejścia po zakończeniu działania elementu setDestinations w komponencie GMSNavigator (element nawigacyjny) oraz po włączeniu elementu guidanceActive w komponencie nawigacynym.
2. Gdy użytkownik kliknie przycisk punktu wejścia, utwórz GMSNavigationDirectionsListController (kontroler) z nawigatorem powiązanym z elementem GMSMapView (mapView).
3. Dodaj kontroler do instancji UIViewController (kontroler widoku) i dodaj directionsListView jako podwidok kontrolera widoku. Metody reloadData i invalidateLayout na kontrolerze powinny być wywoływane tak samo jak w przypadku UICollectionView.
4. Przesuń kontroler widoku do hierarchii kontrolera widoku aplikacji.

Poniższy przykład kodu pokazuje dodawanie 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];
  ...
}

...

Pasek postępu podróży

Pasek postępu podróży to pionowy pasek, który pojawia się po stronie początkowej mapy, gdy rozpoczyna się nawigacja. Gdy ta opcja jest włączona, wyświetla się przegląd całej podróży wraz z miejscem docelowym i bieżącą pozycją użytkownika.

Umożliwia użytkownikom szybkie przewidywanie nadchodzących problemów, takich jak korki, bez konieczności przybliżania mapy. W razie potrzeby może zmienić trasę przejazdu. Jeśli użytkownik zmieni trasę przejazdu, pasek postępu zostanie zresetowany, tak jakby od tego momentu rozpoczęła się nowa podróż.

Pasek postępu podróży wyświetla te wskaźniki stanu:

• Stan ruchu – stan zbliżającego się ruchu.

• Bieżąca lokalizacja – bieżąca lokalizacja kierowcy podczas podróży.

• Przebyty dystans na trasie – przebyty dystans na trasie.

Aby włączyć pasek postępu podróży, ustaw parametr navigationTripProgressBarEnabled w ustawieniach GMSUISettings.

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

Umieszczenie paska postępu podróży

• Lewa strona paska jest w przybliżeniu wyrównana z lewą stroną prędkościomierza, logo Google i przyciskiem Wyśrodkuj (jeśli jest widoczny). Szerokość to 12 punktów.
• Pasek postępu podróży reaguje dynamicznie na pionową przestrzeń na ekranie. Dół paska znajduje się 210 pikseli od dołu ekranu. Górna krawędź paska postępu wyjazdu znajduje się w odległości co najmniej 170 punktów od górnej krawędzi ekranu, a maksymalna wysokość paska wynosi 400 punktów.
• Jeśli pasek postępu podróży nakłada się na kartę zakrętu lub inne elementy interfejsu nawigacji, pojawia się pod tymi elementami.

Prompt Visibility API (eksperymentalny)

Interfejs API PromptVisibility umożliwia unikanie konfliktów między elementami interfejsu generowanymi przez pakiet SDK do nawigacji a Twoimi niestandardowymi elementami interfejsu. Wystarczy, że dodasz odbiornik wywołania zwrotnego, który będzie wywoływany przed wyświetleniem elementu interfejsu generowanego przez pakiet SDK do nawigacji i zaraz po jego usunięciu. Więcej informacji, w tym przykłady kodu, znajdziesz w sekcji Prompt Visibility API na stronie Konfigurowanie przerw w dostępie w czasie rzeczywistym.

sygnalizacja świetlna i znaki stopu;

Podczas aktywnej nawigacji w trybie mapView możesz włączyć wyświetlanie sygnalizacji świetlnej i znaków STOP, co zapewni dodatkowy kontekst dla tras i manewrów podczas podróży.

Domyślnie sygnalizacja świetlna i znaki stop są wyłączone w pakiecie SDK do nawigacji na iOS. Aby włączyć tę funkcję, wywołaj ustawienia GMSMapView dla każdej opcji osobno: showsTrafficLights i showsStopSigns.

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

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

Sterowanie prędkościomierzem

Gdy nawigacja jest włączona, a tryb podróży ustawiony na „Jazda”, w dolnym rogu mapy, na której wyświetla się aktualne ograniczenie prędkości, pakiet Navigation SDK dla iOS wyświetla kontrolkę ograniczenia prędkości. Gdy kierowca przekroczy ograniczenie prędkości, element sterujący rozszerzy się, aby wyświetlić drugi prędkościomierz z aktualną prędkością pojazdu.

Możesz ustawić poziomy alertów, aby zmienić format wyświetlania prędkościomierza, gdy kierowca przekroczy limit prędkości o określoną wartość. Możesz na przykład określić, że bieżąca prędkość wyświetla się w czerwonym kolorze, gdy kierowca przekroczy ograniczenie prędkości o 5 mph, a w czerwonym tle, gdy przekroczy je o 10 mph.

Aby wyświetlić kontrolę limitu prędkości, ustaw właściwość shouldDisplaySpeedometer w elementach GMSUISettings na true. Aby wyłączyć wyświetlanie elementu sterującego ograniczeniem prędkości, ustaw wartość shouldDisplaySpeedometer na false.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

Więcej informacji o ustawianiu alertów dotyczących prędkościomierza znajdziesz w artykule Konfigurowanie alertów prędkościomierza.

znaczniki miejsca docelowego,

Możesz wyświetlać lub ukrywać znaczniki miejsc docelowych na danej trasie, ustawiając właściwość showsDestinationMarkers w elementach GMSUISettings. W tym przykładzie pokazujemy wyłączenie znaczników miejsca docelowego.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

Funkcje mapy

Navigation SDK umożliwia dalsze dostosowywanie nawigacji do potrzeb użytkowników. Zmiany wprowadzone w Twoim wystąpieniu zostaną odzwierciedlone podczas następnej aktualizacji aplikacji przez użytkownika.

Wyróżnianie celu podróży i wejść

Gdy miejsce docelowe zostanie utworzone z użyciem placeID, budynek docelowo będzie wyróżniony, a w miarę możliwości będzie wyświetlana ikona wejścia. Te wskazówki wizualne pomagają użytkownikom odróżnić poszczególne miejsca docelowe i do nich dotrzeć.

Aby utworzyć miejsce docelowe z wartością placeID, użyj jednego z inicjalizowanych parametrów GMSNavigationWaypoint, który akceptuje wartość placeID. Na przykład cele podróży utworzone w samouczku nawigacji zawierają podświetlenie celu podróży i etykiety wejścia, jeśli są dostępne.

Wyłączanie domyślnych gestów na mapie

Domyślne gesty na mapie możesz wyłączyć, ustawiając właściwości klasy GMSUISettings, która jest dostępna jako właściwość obiektu GMSMapView. Te gesty można włączać i wyłączać programowo. Pamiętaj, że wyłączenie gestu nie ograniczy dostępu programowego do ustawień aparatu.

• scrollGestures – określa, czy gesty przewijania są włączone czy wyłączone. Jeśli ta opcja jest włączona, użytkownicy mogą przesuwać palcem, aby przesuwać kamerę.
• zoomGestures – określa, czy gesty powiększania są włączone, czy wyłączone. Jeśli ta opcja jest włączona, użytkownicy mogą dwukrotnie dotknąć ekranu, dotknąć ekranu dwoma palcami lub ująć palcami ekran, aby zmienić powiększenie kamery. Pamiętaj, że dwukrotne kliknięcie lub ściąganie, gdy funkcja scrollGesturesjest włączona, może spowodować przewinięcie kamery do określonego punktu.
• tiltGestures – określa, czy gesty pochylania są włączone czy wyłączone. Jeśli ta opcja jest włączona, użytkownicy mogą przechylać kamerę, przesuwając 2 palcami w górę lub w dół.
• rotateGestures – określa, czy gesty obracania są włączone czy wyłączone. Jeśli ta opcja jest włączona, użytkownicy mogą obracać kamerę za pomocą gestu obrotu 2 palcami.

W tym przykładzie gesty przesuwania i powiększania zostały wyłączone.

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

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

Umieszczenie elementów sterujących i elementów interfejsu

Za pomocą tych właściwości możesz umieszczać elementy sterujące i inne elementy interfejsu względem pozycji nagłówka i stopki nawigacji:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

Ten przykład kodu pokazuje, jak za pomocą linii pomocniczych układu ustawić parę etykiet w widoku mapy:

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

Przykład użycia bottomTrailingButtonsLayoutGuide do umieszczenia przycisku zgłaszania utrudnień w czasie rzeczywistym znajdziesz w sekcji Konfigurowanie utrudnień w czasie rzeczywistym.

Ukrywanie alternatywnych tras

Gdy interfejs użytkownika jest zbyt zatłoczony, możesz ograniczyć ilość wyświetlanych informacji, wyświetlając mniej tras alternatywnych niż domyślnie (2 trasy) lub nie wyświetlając ich wcale. Możesz skonfigurować tę opcję przed pobraniem tras, konfigurując GMSNavigationRoutingOptions i ustawiając alternateRoutesStrategy na jedną z tych wartości:

Przykład

Poniższy przykład kodu pokazuje, jak ukryć alternatywne trasy.

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