Изменить интерфейс навигации

Используя Navigation SDK для iOS, вы можете изменить пользовательский опыт работы с картой, определив, какие встроенные элементы управления и элементы пользовательского интерфейса отображаются на карте и какие жесты вы разрешаете. Вы также можете изменить внешний вид Navigation UI. Ознакомьтесь со страницей Policies для получения рекомендаций по приемлемым изменениям Navigation UI.

Элементы управления пользовательским интерфейсом карты

Navigation SDK предоставляет некоторые встроенные элементы управления пользовательским интерфейсом, похожие на те, что есть в приложении Google Maps для iOS. Вы можете переключать видимость этих элементов управления с помощью класса GMSUISettings . Изменения, которые вы вносите в этот класс, немедленно отражаются на карте.

Примечание: Каждый элемент управления имеет предопределенное положение относительно края карты. Вы можете отодвинуть элементы управления от краев, добавив отступ к карте.

Компас

Navigation SDK предоставляет графический компас, который появляется в правом верхнем углу карты при определенных обстоятельствах и только если включен. Когда пользователь нажимает на компас, камера возвращается в положение с нулевым направлением (ориентация по умолчанию), а компас вскоре исчезает.

Если навигация включена и режим камеры установлен на «следование», компас остается видимым, а нажатие на компас переключает между наклонной и обзорной перспективами камеры.

Чтобы не отвлекать водителя, компас остается в том же положении, если заголовок (в портретном режиме) расширяется и конфликтует с положением компаса по умолчанию. Если вы добавляете дополнительный пользовательский элемент управления заголовка или вид аксессуара заголовка, компас скрывается, чтобы избежать конфликтов пользовательского интерфейса.

Компас поддерживает дневной и ночной режимы, а также темный режим.

Компас отключен по умолчанию. Вы можете включить компас, установив свойство compassButton GMSUISettings в true . Однако вы не можете заставить компас всегда отображаться.

Быстрый

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Кнопка «Мое местоположение»

Кнопка «Мое местоположение» отображается в правом нижнем углу экрана только в том случае, если кнопка «Мое местоположение» включена. Когда пользователь нажимает кнопку, камера анимируется, чтобы сфокусироваться на текущем местоположении пользователя, если местоположение пользователя в данный момент известно. Вы можете включить кнопку, установив свойство myLocationButton GMSUISettings в true .

Быстрый

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Кнопка перецентровки

Когда навигация включена, кнопка Recenterer появляется, когда пользователь прокручивает вид карты, и исчезает, когда пользователь нажимает, чтобы перецентрировать карту. Чтобы разрешить появление кнопки Recenterer, установите свойство recenterButtonEnabled GMSUISettings в true . Чтобы предотвратить появление кнопки Recenterer, установите свойство recenterButtonEnabled в false .

Быстрый

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Аксессуары пользовательского интерфейса карты

Navigation SDK предоставляет аксессуары пользовательского интерфейса, которые появляются во время навигации, аналогичные тем, что есть в приложении Google Maps для iOS. Вы можете настроить видимость или внешний вид этих элементов управления, как описано в этом разделе. Изменения, которые вы здесь вносите, отражаются во время следующей поездки пользователя.

Верхний и нижний колонтитулы навигации

Во время навигации заголовок навигации отображается в верхней части экрана, а нижний колонтитул навигации — в нижней. Заголовок навигации показывает название улицы и направление следующего поворота на маршруте, а также направление следующего поворота. Нижний колонтитул навигации показывает расчетное время и расстояние до пункта назначения, а также расчетное время прибытия.

Вы можете переключать видимость верхнего и нижнего колонтитула навигации и задавать их цвета программно, используя следующие свойства:

• navigationHeaderEnabled — управляет видимостью заголовка навигации (по умолчанию true ).
• navigationFooterEnabled — управляет видимостью нижнего колонтитула навигации (по умолчанию true ).
• navigationHeaderPrimaryBackgroundColor — задает основной цвет фона для заголовка навигации.
• navigationHeaderSecondaryBackgroundColor — задает вторичный цвет фона для заголовка навигации.

В следующем примере кода показано включение видимости верхнего и нижнего колонтитулов, а затем установка для navigationHeaderPrimaryBackgroundColor синего цвета и navigationHeaderSecondaryBackgroundColor красного цвета.

Быстрый

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

Вид заголовка навигационного аксессуара

Вы можете настроить свое приложение, заменив представление заголовка вторичной навигации на собственное настроенное дополнительное представление. Вы делаете это, создавая представление, реализующее протокол GMSNavigationAccessoryView . Этот протокол имеет один обязательный метод: -heightForAccessoryViewConstrainedToSize:onMapView: . Вам дается максимально доступный размер для вашего представления на данном mapView, и вы должны указать высоту, которую требует ваше представление.

Затем вы можете передать это представление в mapView, вызвав setHeaderAccessoryView: mapView анимирует все текущие представления, а затем анимирует ваше пользовательское представление. Заголовок навигации должен быть видимым, чтобы ваше пользовательское представление могло отображаться.

Примечание: на некоторых смартфонах mapView может быть слишком коротким в ландшафтном режиме, и ваш пользовательский вид будет скрыт.

Чтобы удалить пользовательский вид аксессуара заголовка, передайте nil в setHeaderAccessoryView: .

Если размер вашего представления должен измениться в любой момент, вы можете вызвать invalidateLayoutForAccessoryView: , передав представление, размер которого необходимо изменить.

Пример

Следующий пример кода демонстрирует пользовательское представление, реализующее протокол GMSNavigationAccessoryView . Это пользовательское представление затем используется для установки пользовательского представления аксессуаров заголовка навигации.

Быстрый

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

Ночной режим

Метод прослушивателя GMSNavigatorListener.didChangeSuggestedLightingMode запускается при обновлении предполагаемых условий освещения, например, когда в текущем местоположении устройства наступает ночь. Вы можете программно изменить поведение ночного режима следующими способами:

• Выберите, когда использовать обычный режим и режим низкой освещенности (ночь), с помощью перечисления GMSNavigationLightingMode .
• Выберите основной и дополнительный цвета фона ночного режима, задав значения для свойств navigationHeaderPrimaryBackgroundColorNightMode и navigationHeaderSecondaryBackgroundColorNightMode .

Список направлений

Вы можете предоставить пошаговые инструкции в своем приложении. Следующий пример показывает один из возможных способов сделать это. Эти шаги могут различаться в зависимости от вашей реализации.

1. Включите кнопку точки входа после успешного завершения setDestinations на GMSNavigator (навигаторе) и включения guidanceActive на навигаторе.
2. После того, как пользователь нажмет кнопку точки входа, создайте GMSNavigationDirectionsListController (контроллер) с навигатором, связанным с GMSMapView ( mapView ).
3. Добавьте контроллер к экземпляру UIViewController (контроллер представления) и добавьте directionsListView как подпредставление контроллера представления. Методы reloadData и invalidateLayout на контроллере следует вызывать так же, как и с UICollectionView .
4. Добавьте контроллер представления в иерархию контроллеров представления приложения.

Примечания:

• Список маршрутов не предназначен для повторного использования и должен создаваться заново для каждого сеанса навигации.
• Контроллер имеет лишь слабую связь с навигатором.
• Для получения полного образца обратитесь к демонстрационному приложению, предоставленному в загруженном пакете, упомянутом в разделе «Настройка вашего проекта» .

В следующем примере кода показано добавление 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()
  })
  ...
}

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

...

Индикатор хода поездки

Экспериментальная функция

Полоса хода поездки — это вертикальная полоса, которая появляется на начальной/ведущей стороне карты при запуске навигации. При включении она отображает обзор всей поездки вместе с пунктом назначения и текущим положением пользователя.

Предоставляет пользователям возможность быстро предвидеть любые предстоящие проблемы, такие как пробки, без необходимости увеличивать масштаб. Затем они могут изменить маршрут поездки, если это необходимо. Если пользователь изменяет маршрут поездки, полоса прогресса сбрасывается, как будто новая поездка началась с этой точки.

На панели хода поездки отображаются следующие индикаторы состояния:

• Статус трафика — статус предстоящего трафика.

• Текущее местоположение — текущее местоположение водителя в поездке.

• Пройденный маршрут — пройденная часть пути.

Включите индикатор выполнения поездки, установив свойство navigationTripProgressBarEnabled в GMSUISettings .

Быстрый

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Расположение полосы хода поездки

• Левая сторона панели примерно совпадает с левой стороной спидометра, логотипа Google и кнопки Re-center (если она видна). Ширина — 12 пт.
• Полоса хода поездки динамически реагирует на вертикальное пространство на экране. Нижняя часть полосы расположена на расстоянии 210 pt от нижнего края экрана. Верхняя часть полосы хода поездки остается на расстоянии не менее 170 pt от верхнего края экрана, максимальная высота полосы составляет 400 pt.
• Если индикатор выполнения поездки перекрывается карточкой поворота или другими элементами навигационного интерфейса, он отображается под этими элементами.

API быстрой видимости (экспериментальный)

Экспериментальная функция

API Prompt Visibility позволяет избегать конфликтов между элементами пользовательского интерфейса, созданными Navigation SDK, и вашими собственными пользовательскими элементами пользовательского интерфейса, добавляя слушателя для получения обратного вызова перед тем, как элемент пользовательского интерфейса Navigation SDK появится, и как только элемент будет удален. Для получения дополнительной информации, включая примеры кода, см. раздел API Prompt Visibility на странице Configure real-time-disruptions .

Светофоры и знаки «Стоп»

Вы можете включить отображение светофоров и знаков остановки во время активной навигации в mapView , что обеспечивает дополнительный контекст для маршрутов и маневров поездки.

По умолчанию светофоры и знаки остановки отключены в Navigation SDK для iOS. Чтобы включить эту функцию, вызовите настройки GMSMapView для каждой опции независимо: showsTrafficLights и showsStopSigns .

Примечание: Светофоры также могут отображаться на карте в режимах, отличных от навигации. Возможность настройки отображения светофоров с помощью showsTrafficLights влияет только на светофоры в активном режиме навигации.

Быстрый

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

Objective-C

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

Управление спидометром

Когда навигация включена и режим путешествия установлен на вождение, Navigation SDK для iOS отображает элемент управления ограничением скорости в нижнем углу карты, который показывает текущее ограничение скорости. Когда водитель превышает ограничение скорости, элемент управления расширяется, чтобы отобразить второй спидометр с текущей скоростью водителя.

Вы можете задать уровни оповещения, чтобы изменить форматирование отображения спидометра, когда водитель превышает ограничение скорости на указанную величину. Например, вы можете указать, что текущая скорость будет отображаться красным цветом текста, когда водитель превысит ограничение скорости на 5 миль/ч, и красным цветом фона, когда водитель превысит ограничение скорости на 10 миль/ч.

Для отображения элемента управления ограничением скорости установите свойство shouldDisplaySpeedometer GMSUISettings в true . Для отключения отображения элемента управления ограничением скорости установите свойство shouldDisplaySpeedometer в значение false .

Быстрый

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Дополнительную информацию о настройке оповещений для спидометра см. в разделе Настройка оповещений спидометра .

Маркеры назначения

Вы можете показать или скрыть маркеры назначения для заданного маршрута, установив свойство showsDestinationMarkers для GMSUISettings . В следующем примере показано отключение маркеров назначения.

Быстрый

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Примечание: Вы можете указать пользовательское изображение в качестве маркера, но SDK в настоящее время не поддерживает маркировку этих изображений текстом. Для получения дополнительной информации см. раздел Маркеры .

Особенности карты

Navigation SDK предоставляет вам возможность вносить дальнейшие изменения в навигационный опыт для ваших пользователей. Изменения, которые вы вносите в свой экземпляр, отражаются во время следующего обновления пользователем вашего приложения.

Подсветка пунктов назначения и входов

Когда пункт назначения создается с placeID , здание пункта назначения будет выделено, а значок входа будет показан, когда это возможно. Эти визуальные подсказки помогают пользователям различать и направлять их к предполагаемому пункту назначения.

Чтобы создать пункт назначения с placeID , используйте один из инициализаторов GMSNavigationWaypoint , который принимает placeID . Например, пункты назначения, созданные в руководстве по навигации по маршруту, включают подсветку пункта назначения и метки входа, если они доступны.

Отключить жесты карты по умолчанию

Вы можете отключить жесты по умолчанию на карте, установив свойства класса GMSUISettings , который доступен как свойство GMSMapView . Следующие жесты можно включать и отключать программно. Обратите внимание, что отключение жеста не ограничит программный доступ к настройкам камеры.

• scrollGestures — управляет включением или отключением жестов прокрутки. Если включено, пользователи могут проводить пальцем, чтобы панорамировать камеру.
• zoomGestures — управляет включением или отключением жестов масштабирования. Если включено, пользователи могут дважды коснуться, коснуться двумя пальцами или свести пальцы, чтобы масштабировать камеру. Обратите внимание, что двойное касание или сведение пальцев, когда включено scrollGestures , может панорамировать камеру в указанную точку.
• tiltGestures — управляет включением или отключением жестов наклона. Если включено, пользователи могут использовать вертикальное движение двумя пальцами вниз или вверх, чтобы наклонить камеру.
• rotateGestures — управляет включением или отключением жестов поворота. Если включено, пользователи могут использовать жест поворота двумя пальцами для поворота камеры.

В этом примере жесты панорамирования и масштабирования отключены.

Быстрый

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

Objective-C

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

Расположение элементов управления и элементов пользовательского интерфейса

Вы можете расположить элементы управления и другие элементы пользовательского интерфейса относительно положения верхнего и нижнего колонтитула навигации, используя следующие свойства:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

Примечание: Чтобы гарантировать, что пользовательские элементы пользовательского интерфейса не блокируют никакие подсказки, отображаемые в Navigation SDK, убедитесь, что пользовательские элементы пользовательского интерфейса реализованы в подпредставлении mapView , а не в корневом представлении.

В следующем примере кода показано использование направляющих макета для размещения пары меток на карте:

Быстрый

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

Пример использования bottomTrailingButtonsLayoutGuide для размещения кнопки сообщения о сбоях в режиме реального времени см. в разделе Настройка сбоев в режиме реального времени .

Скрыть альтернативные маршруты

Когда пользовательский интерфейс становится перегруженным слишком большим количеством информации, вы можете уменьшить беспорядок, отображая меньше альтернативных маршрутов, чем по умолчанию (два), или не отображая альтернативных маршрутов вообще. Вы можете настроить эту опцию до того, как вы получите маршруты, настроив GMSNavigationRoutingOptions и установив alternateRoutesStrategy с одним из следующих значений перечисления:

Значение перечисления	Описание
GMНавигацияАльтернативные маршрутыСтратегияВсе	По умолчанию. Отображает до двух альтернативных маршрутов.
GMSNavigationАльтернативныеМаршрутыСтратегияОдин	Отображает один альтернативный маршрут (если он доступен).
GMНавигацияАльтернативные маршрутыСтратегияНет	Скрывает альтернативные маршруты.

Пример

В следующем примере кода показано, как полностью скрыть альтернативные маршруты.

Быстрый

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

Предупреждение: эта функция в настоящее время несовместима с предпочтением маршрутизации кратчайшего маршрута. Использование обеих функций одновременно может привести к неожиданному поведению.