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

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

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

В Navigation SDK предусмотрены встроенные элементы управления, сходные с теми, которые используются в приложении "Google Карты" для iOS. Они отображаются и скрываются с помощью класса GMSUISettings. Изменения, выполненные для этого класса, сразу же отображаются на карте.

Компас

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

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

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

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

Компас включен по умолчанию в версии 11.0.0 и более поздних. Чтобы отключить компас, задайте для свойства compassButton объекта GMSUISettings значение false.

mapView.settings.compassButton = false

mapView.settings.compassButton = NO;

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

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

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

Кнопка "Центрировать"

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

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

Дополнительные элементы интерфейса карты

Navigation SDK предоставляет элементы интерфейса, которые появляются во время навигации, аналогичные тем, которые есть в приложении "Google Карты" для 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

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 анимирует любые текущие представления, а затем анимирует ваше пользовательское представление. Заголовок навигации должен быть виден, чтобы можно было показать пользовательское представление.

Чтобы удалить специальный заголовок, передайте параметру 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)

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

Цвета заголовков в режиме низкой освещенности

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

• Управлять тем, когда карта использует обычный режим и режим низкой освещенности, можно, задав для параметра GMSMapView.lightingMode значение GMSNavigationLightingMode. Подробнее о том, как настроить автоматическое переключение между режимами…
• Настройте основной и дополнительный цвета фона заголовка навигации в режиме низкой освещенности, задав свойства navigationHeaderPrimaryBackgroundColorNightMode и navigationHeaderSecondaryBackgroundColorNightMode для объекта GMSUISettings.

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

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

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)
  // Make sure 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];
  // Make sure 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

mapView.settings.navigationTripProgressBarEnabled = YES;

Расположение индикатора выполнения поездки

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

Prompt Visibility API (экспериментальный)

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

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

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

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

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

mapView.settings.shouldDisplaySpeedometer = true

mapView.settings.shouldDisplaySpeedometer = YES;

Подробнее о том, как настроить оповещения спидометра…

Маркеры целевых страниц

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

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

Функции карт

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

Выделение пункта назначения и входов

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

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

3D-здания во время навигации

По умолчанию 3D-здания показываются во время навигации. Чтобы отключить эту функцию, задайте для параметра buildingsEnabled значение false (Swift) или NO (Objective-C).

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

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

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

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

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

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

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

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

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

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

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

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

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

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

Пример

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

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