Modificar a IU de navegação

Com o SDK de Navigation para iOS, você pode modificar a experiência do usuário com seu mapa, determinando quais controles de interface integrados e elementos aparecem no mapa e quais gestos são permitidos. Também é possível modificar a aparência visual da interface de navegação. Consulte a página de políticas para ver as diretrizes sobre modificações aceitáveis na interface de navegação.

Controles de interface do mapa

O SDK do Navigation oferece controles de interface integrados semelhantes aos do app Google Maps para iOS. Para alterar a visibilidade desses controles, use a classe GMSUISettings. As mudanças feitas nessa classe são aplicadas imediatamente ao mapa.

Observação: cada controle tem uma posição predeterminada em relação à margem do mapa. Para mover os controles das bordas, adicione padding ao mapa.

Bússola

O SDK de Navegação fornece uma imagem de bússola que aparece no canto superior direito do mapa em circunstâncias específicas e somente quando ativada. Quando o usuário toca na bússola, a câmera volta para uma posição com direção zero (orientação padrão), e a bússola desaparece pouco tempo depois.

Se a navegação estiver ativada e o modo de câmera estiver definido como "seguindo", a bússola vai permanecer visível, e tocar nela vai alternar entre as perspectivas de câmera inclinada e de visão geral.

Para evitar a distração do motorista, a bússola permanece na mesma posição se o cabeçalho (no modo retrato) se expandir e entrar em conflito com a posição padrão da bússola. Se você adicionar um controle personalizado de cabeçalho secundário ou uma visualização de acessório de cabeçalho, a bússola será ocultada para evitar conflitos de interface.

A bússola é compatível com os modos diurno, noturno e escuro.

A bússola é ativada por padrão na versão 11.0.0 e em versões mais recentes. Para desativar a bússola, defina a propriedade compassButton de GMSUISettings como false.

Swift

mapView.settings.compassButton = false

Objective-C

mapView.settings.compassButton = NO;

Botão "Meu local"

O botão "Meu local" aparece no canto inferior direito da tela somente quando está ativado. Quando um usuário clica no botão, a câmera se move para focar no local atual do usuário, se ele for conhecido. Para ativar o botão, defina a propriedade myLocationButton de GMSUISettings como true.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Botão de recentralização

Quando a navegação está ativada, o botão de recentralização aparece quando o usuário rola a visualização do mapa e desaparece quando ele toca para recentralizar o mapa. Para permitir que o botão de centralização apareça, defina a propriedade recenterButtonEnabled de GMSUISettings como true. Para evitar que o botão de centralização apareça, defina recenterButtonEnabled como false.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Acessórios da interface do mapa

Observação: os controles de layout nesta seção, como setHeaderAccessoryView(_:), serão descontinuados. Para controlar o layout de toda a tela de navegação, use o recurso experimental de personalização de layout.

O SDK Navigation oferece acessórios de interface que aparecem durante a navegação, semelhantes aos encontrados no app Google Maps para iOS. É possível ajustar a visibilidade ou a aparência visual desses controles, conforme descrito nesta seção. As mudanças feitas aqui serão refletidas na próxima viagem do usuário.

Cabeçalho e rodapé de navegação

Durante a navegação, o cabeçalho aparece na parte de cima da tela, e o rodapé, na parte de baixo. O cabeçalho de navegação mostra o nome da rua e a direção da próxima curva no trajeto, além da direção da curva seguinte. O rodapé de navegação mostra o tempo e a distância estimados até o destino, bem como o horário previsto de chegada.

É possível alternar a visibilidade do cabeçalho e do rodapé de navegação e definir as cores de forma programática usando as seguintes propriedades:

• navigationHeaderEnabled: controla se o cabeçalho de navegação está visível (o padrão é true).
• navigationFooterEnabled: controla se o rodapé de navegação fica visível (o padrão é true).
• navigationHeaderPrimaryBackgroundColor : define a cor de fundo principal do cabeçalho de navegação.
• navigationHeaderSecondaryBackgroundColor : define a cor de plano de fundo secundária do cabeçalho de navegação.

O exemplo de código a seguir mostra como ativar a visibilidade do cabeçalho e do rodapé, definir navigationHeaderPrimaryBackgroundColor como azul e navigationHeaderSecondaryBackgroundColor como vermelho.

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

Visualização do cabeçalho do acessório de navegação

É possível personalizar o app substituindo a visualização do cabeçalho de navegação secundário pela sua própria visualização de acessório personalizada. Para isso, crie uma visualização que implemente o protocolo GMSNavigationAccessoryView. Esse protocolo tem um método obrigatório: -heightForAccessoryViewConstrainedToSize:onMapView:. Você recebe o tamanho máximo disponível para sua visualização no mapView fornecido e precisa informar a altura necessária para sua visualização.

Em seguida, você pode transmitir essa visualização para o mapView chamando setHeaderAccessoryView:. O mapView anima todas as visualizações atuais e, em seguida, anima sua visualização personalizada. O cabeçalho de navegação precisa estar visível para que a visualização personalizada seja mostrada.

Observação: em alguns smartphones, o mapView pode ser muito curto no modo paisagem, e sua visualização personalizada ficará oculta.

Para remover a visualização de acessório do cabeçalho personalizado, transmita nil para setHeaderAccessoryView:.

Se a visualização precisar mudar de tamanho a qualquer momento, chame invalidateLayoutForAccessoryView:, transmitindo a visualização que precisa mudar de tamanho.

Exemplo

O exemplo de código a seguir demonstra uma visualização personalizada que implementa o protocolo GMSNavigationAccessoryView. Essa visualização personalizada é usada para definir uma visualização de acessório de cabeçalho de navegação personalizada.

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

Cores do cabeçalho do modo pouca luz

O SDK de navegação para iOS calcula o modo de iluminação sugerido com base na hora do dia e na localização atual do dispositivo e chama o método listener GMSNavigatorListener.didChangeSuggestedLightingMode quando o modo sugerido muda (por exemplo, ao nascer ou ao pôr do sol). É possível modificar de forma programática o comportamento do modo de pouca luz das seguintes maneiras:

• Defina um valor GMSNavigationLightingMode para GMSMapView.lightingMode e controle quando o mapa usa os modos normal e de pouca luz. Para mais informações sobre como ativar a troca automática do modo de iluminação, consulte Configurar os modos normal e de pouca luz.
• Personalize as cores de fundo principal e secundária do cabeçalho de navegação no modo de pouca luz definindo as propriedades navigationHeaderPrimaryBackgroundColorNightMode e navigationHeaderSecondaryBackgroundColorNightMode em GMSUISettings.

Lista de rotas

Você pode fornecer rotas guiadas no seu app. O exemplo a seguir mostra uma maneira de fazer isso. Essas etapas podem variar de acordo com sua implementação.

1. Ative um botão de ponto de entrada depois que setDestinations no GMSNavigator (navegador) for concluído e guidanceActive no navegador for ativado.
2. Quando um usuário tocar no botão do ponto de entrada, crie um GMSNavigationDirectionsListController (controlador) com o navegador associado ao GMSMapView (mapView).
3. Adicione o controlador a uma instância de UIViewController (controlador de visualização) e adicione directionsListView como uma subvisualização do controlador de visualização. Os métodos reloadData e invalidateLayout no controlador precisam ser chamados como se fossem um UICollectionView.
4. Envie o controlador de visualização para a hierarquia de controladores de visualização do app.

Observações:

• A lista de rotas não deve ser reutilizada, mas sim recriada para cada sessão de navegação.
• O controlador mantém apenas uma referência fraca ao navegador.
• Para um exemplo completo, consulte o app de demonstração fornecido no pacote baixado mencionado na seção Configurar seu projeto.

O exemplo de código a seguir mostra como adicionar um DirectionsListViewController.

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)
  // 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()
  })
  ...
}

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

...

Barra de progresso da viagem

Recurso experimental

A barra de progresso da viagem é uma barra vertical que aparece no lado inicial/principal do mapa quando a navegação começa. Quando ativado, ele mostra uma visão geral de uma viagem inteira, além do destino e da posição atual do usuário.

Isso permite que os usuários antecipem problemas, como trânsito, sem precisar aumentar o zoom. Em seguida, eles podem traçar um novo trajeto para a viagem, se necessário. Se o usuário traçar um novo trajeto, a barra de progresso será redefinida como se uma nova viagem tivesse começado a partir daquele ponto.

A barra de progresso da viagem mostra os seguintes indicadores de status:

• Status do trânsito: o status do trânsito à frente.

• Localização atual: o local atual do motorista na viagem.

• Route elapsed: a parte decorrida da viagem.

Ative a barra de progresso da viagem definindo a propriedade navigationTripProgressBarEnabled em GMSUISettings.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Posicionamento da barra de progresso da viagem

• O lado esquerdo da barra se alinha aproximadamente com o lado esquerdo do velocímetro, o logotipo do Google e o botão "Centralizar" (quando visível). A largura é de 12 pt.
• A barra de progresso da viagem responde dinamicamente ao espaço vertical na tela. A parte de baixo da barra está posicionada a 210 pt da parte de baixo da tela. A parte de cima da barra de progresso da viagem fica a pelo menos 170 pt da parte de cima da tela, e a altura máxima da barra é de 400 pt.
• Se a barra de progresso da viagem se sobrepuser ao cabeçalho de navegação ou a outros elementos da interface de navegação, ela vai aparecer abaixo desses outros elementos.

API Prompt Visibility (experimental)

Recurso experimental

A API Prompt Visibility permite evitar conflitos entre elementos da interface gerados pelo SDK Navigation e seus próprios elementos personalizados. Para isso, adicione um listener para receber um callback antes que um elemento da interface do SDK Navigation apareça e assim que ele for removido. Para mais informações, incluindo exemplos de código, consulte a seção API Prompt Visibility da página Configurar interrupções em tempo real.

Controle do velocímetro

Quando a navegação está ativada e o modo de viagem está definido como "Dirigindo", o SDK de Navegação para iOS mostra um controle de limite de velocidade no canto inferior do mapa, que indica o limite de velocidade atual. Quando o motorista ultrapassa o limite de velocidade, o controle se expande para mostrar um segundo velocímetro com a velocidade atual do motorista.

É possível definir níveis de alerta para mudar a formatação da tela do velocímetro quando o motorista ultrapassa o limite de velocidade em um valor especificado. Por exemplo, você pode especificar que a velocidade atual seja mostrada com um texto vermelho quando o motorista exceder o limite de velocidade em 5 mph e com um plano de fundo vermelho quando o motorista exceder o limite de velocidade em 10 mph.

Para mostrar o controle de limite de velocidade, defina a propriedade shouldDisplaySpeedometer de GMSUISettings como true. Para desativar a exibição do controle de limite de velocidade, defina shouldDisplaySpeedometer como false.

Swift

mapView.settings.shouldDisplaySpeedometer = true

Objective-C

mapView.settings.shouldDisplaySpeedometer = YES;

Para mais informações sobre como definir alertas para o velocímetro, consulte Configurar alertas do velocímetro.

Marcadores de destino

Para mostrar ou ocultar os marcadores de destino de um determinado trajeto, defina a propriedade showsDestinationMarkers de GMSUISettings. O exemplo a seguir mostra como desativar os marcadores de destino.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Observação: é possível especificar uma imagem personalizada como marcador, mas o SDK não permite rotular essas imagens com texto. Para mais informações, consulte Marcadores.

Recursos de experiência no mapa

O SDK de navegação permite que você personalize ainda mais a experiência de navegação dos usuários. As mudanças feitas na instância são refletidas na próxima atualização do app pelo usuário.

Destaque de destino e entradas

Quando um destino é criado com um placeID, o edifício de destino é destacado, e um ícone de entrada é mostrado sempre que possível. Essas dicas visuais ajudam os usuários a distinguir e navegar até o destino pretendido.

Para criar um destino com um placeID, use um dos inicializadores GMSNavigationWaypoint que aceitam um placeID. Por exemplo, os destinos criados no tutorial de navegação em uma rota incluem destaque de destino e rótulos de entrada, quando disponíveis.

Observação: o SDK de navegação não é compatível com navegação em ambientes fechados. Para mapas internos sem navegação, use os métodos indoorEnabled e indoorDisplay da classe GMSMapView do SDK do Maps para iOS.

Exibição de construções em 3D durante a navegação

As construções em 3D são mostradas durante a navegação por padrão. Para desativar esse recurso, defina buildingsEnabled como false (Swift) ou NO (Objective-C).

Desativar gestos padrão do mapa

Para desativar os gestos padrão no mapa, defina as propriedades da classe GMSUISettings, que está disponível como uma propriedade de GMSMapView. Os gestos a seguir podem ser ativados e desativados programaticamente. A desativação do gesto não limita o acesso programático às configurações da câmera.

• scrollGestures: controla se os gestos de rolagem estão ativados ou desativados. Se ativada, os usuários podem deslizar para mover a câmera.
• zoomGestures — controla se os gestos de zoom estão ativados ou desativados. Se ativado, os usuários podem tocar duas vezes, tocar com dois dedos ou fazer o gesto de pinça para aumentar o zoom da câmera. Se scrollGestures estiver ativado, tocar duas vezes ou fazer o gesto de pinça pode mover a câmera para o ponto especificado.
• tiltGestures — controla se os gestos de inclinação estão ativados ou desativados. Se ativada, os usuários podem deslizar dois dedos verticalmente para baixo ou para cima para inclinar a câmera.
• rotateGestures: controla se os gestos de rotação estão ativados ou desativados. Se ativada, os usuários podem usar um gesto de rotação com dois dedos para girar a câmera.

Neste exemplo, os gestos de movimentação e zoom foram desativados.

Swift

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

Objective-C

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

Posicionar controles e elementos da interface

Observação: os guias de layout desta seção serão descontinuados. Para controlar o layout de toda a tela de navegação, use o recurso experimental de personalização de layout.

É possível posicionar controles e outros elementos da interface em relação à posição do cabeçalho e do rodapé de navegação usando as seguintes propriedades:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide
• bottomTrailingButtonsLayoutGuide

Observação: para garantir que os elementos personalizados da interface não bloqueiem as solicitações que aparecem no SDK de navegação, verifique se eles estão implementados em uma subvisualização de mapView, não na visualização raiz.

O exemplo de código a seguir mostra como usar os guias de layout para posicionar um par de rótulos na visualização do mapa:

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;

Para ver um exemplo de como usar um bottomTrailingButtonsLayoutGuide para posicionar o botão de relatório de interrupções em tempo real, consulte Configurar interrupções em tempo real.

Ocultar rotas alternativas

Quando a interface do usuário fica cheia de informações, você pode reduzir a confusão mostrando menos rotas alternativas do que o padrão (duas) ou não mostrando nenhuma rota alternativa. É possível configurar essa opção antes de buscar os trajetos configurando GMSNavigationRoutingOptions e definindo alternateRoutesStrategy com um dos seguintes valores de enumeração:

Valor de enumeração	Descrição
GMSNavigationAlternateRoutesStrategyAll	Padrão. Mostra até duas rotas alternativas.
GMSNavigationAlternateRoutesStrategyOne	Mostra uma rota alternativa (se houver).
GMSNavigationAlternateRoutesStrategyNone	Oculta rotas alternativas.

Exemplo

O exemplo de código a seguir demonstra como ocultar totalmente as rotas alternativas.

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

Aviso: esse recurso é incompatível com a preferência de trajeto mais curto. Usar os dois recursos ao mesmo tempo pode produzir um comportamento inesperado.