Cómo modificar la IU de navegación

Con el SDK de Navigation para iOS, puedes modificar la experiencia del usuario con tu mapa. Para ello, determina qué controles y elementos integrados de la IU aparecen en el mapa y qué gestos permites. También puedes modificar el aspecto visual de la IU de Navigation. Consulta la página de políticas para obtener lineamientos sobre las modificaciones aceptables de la IU de Navigation.

Controles de la IU del mapa

El SDK de Navigation proporciona algunos controles de la IU integrados similares a los que se encuentran en la aplicación de Google Maps para iOS. Puedes activar o desactivar la visibilidad de estos controles con la clase GMSUISettings. Los cambios que realices en esta clase se reflejarán de inmediato en el mapa.

Brújula

El SDK de Navigation proporciona un gráfico de brújula que, en ciertas circunstancias, aparece en la esquina superior derecha del mapa y solo cuando está habilitado. Cuando el usuario hace clic en la brújula, la cámara vuelve a una posición con un rumbo de cero (la orientación predeterminada), y la brújula se atenúa poco después.

Si la navegación está habilitada y el modo de cámara se establece en "following", la brújula permanece visible y, si la presionas, se alterna entre las perspectivas de cámara inclinada y de descripción general.

Para evitar la distracción del conductor, la brújula permanece en la misma posición si el encabezado (en modo Retrato) se expande y entra en conflicto con la posición predeterminada de la brújula. Si agregas un control personalizado de encabezado secundario o una vista de accesorio de encabezado, la brújula se ocultará para evitar conflictos en la IU.

La brújula admite los modos diurno y nocturno, así como el modo oscuro.

La brújula está habilitada de forma predeterminada en la versión 11.0.0 y posteriores. Puedes inhabilitar la brújula configurando la propiedad compassButton de GMSUISettings en false.

Swift

mapView.settings.compassButton = false

Objective-C

mapView.settings.compassButton = NO;

Botón Mi ubicación

El botón Mi ubicación aparece en la esquina inferior derecha de la pantalla solo cuando está habilitado. Cuando un usuario hace clic en el botón, la cámara se anima para enfocar la ubicación actual del usuario, si se conoce. Puedes habilitar el botón configurando la propiedad myLocationButton de GMSUISettings en true.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Botón Volver a centrar

Cuando la navegación está habilitada, el botón para volver a centrar aparece cuando el usuario se desplaza por la vista de mapa y desaparece cuando el usuario presiona para volver a centrar el mapa. Para permitir que aparezca el botón para volver a centrar, establece la propiedad recenterButtonEnabled de GMSUISettings en true. Para evitar que aparezca el botón para volver a centrar, establece recenterButtonEnabled en false.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Accesorios de la IU del mapa

El SDK de Navigation proporciona accesorios de la IU que aparecen durante la navegación, similares a los que se encuentran en la aplicación de Google Maps para iOS. Puedes ajustar la visibilidad o el aspecto visual de estos controles como se describe en esta sección. Los cambios que realices aquí se reflejarán en el próximo viaje del usuario.

Durante la navegación, el encabezado de navegación aparece en la parte superior de la pantalla y el pie de página de navegación aparece en la parte inferior. El encabezado de navegación muestra el nombre de la calle y la dirección del próximo giro en la ruta, así como la dirección del giro siguiente. En el pie de página de navegación, se muestran el tiempo y la distancia estimados hasta el destino, así como la hora estimada de llegada.

Puedes activar o desactivar la visibilidad del encabezado y el pie de navegación, y establecer sus colores de forma programática con las siguientes propiedades:

En el siguiente ejemplo de código, se muestra cómo activar la visibilidad del encabezado y el pie de página, y, luego, establecer navigationHeaderPrimaryBackgroundColor en azul y navigationHeaderSecondaryBackgroundColor en rojo.

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

Puedes personalizar tu app reemplazando la vista del encabezado de navegación secundario por tu propia vista de accesorios personalizada. Para ello, crea una vista que implemente el protocolo GMSNavigationAccessoryView. Este protocolo tiene un método obligatorio: -heightForAccessoryViewConstrainedToSize:onMapView:. Se te proporciona el tamaño máximo disponible para tu vista en el objeto mapView determinado, y debes proporcionar la altura que requiere tu vista.

Luego, puedes pasar esta vista a mapView llamando a setHeaderAccessoryView:. La vista de mapa muestra una animación de salida de las vistas actuales y, luego, una animación de entrada de tu vista personalizada. El encabezado de navegación debe estar visible para que se pueda mostrar tu vista personalizada.

Para quitar la vista de accesorio del encabezado personalizado, pasa nil a setHeaderAccessoryView:.

Si tu vista debe cambiar de tamaño en cualquier momento, puedes llamar a invalidateLayoutForAccessoryView: y pasar la vista que necesita cambiar de tamaño.

Ejemplo

En el siguiente ejemplo de código, se muestra una vista personalizada que implementa el protocolo GMSNavigationAccessoryView. Luego, esta vista personalizada se usa para establecer una vista de accesorio de encabezado de navegación 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];

Colores del encabezado del modo de poca luz

El SDK de Navigation para iOS calcula el modo de iluminación sugerido según la hora del día y la ubicación actual del dispositivo, y llama al método de objeto de escucha GMSNavigatorListener.didChangeSuggestedLightingMode cuando cambia el modo sugerido (como al amanecer o al atardecer). Puedes modificar el comportamiento del modo de luz tenue de forma programática de las siguientes maneras:

Lista de instrucciones sobre cómo llegar

Puedes proporcionar instrucciones paso a paso en tu app. En el siguiente ejemplo, se muestra una forma posible de hacerlo. Estos pasos pueden variar según tu propia implementación.

  1. Habilita un botón de punto de entrada después de que setDestinations en el GMSNavigator (navegador) se haya completado correctamente y se haya habilitado guidanceActive en el navegador.
  2. Cuando un usuario presiona el botón de punto de entrada, crea un GMSNavigationDirectionsListController (controlador) con el navegador asociado al GMSMapView (mapView).
  3. Agrega el controlador a una instancia de UIViewController (controlador de vista) y agrega directionsListView como una vista secundaria del controlador de vista. Los métodos reloadData y invalidateLayout del controlador se deben llamar como se haría con un UICollectionView.
  4. Envía el controlador de vista a la jerarquía de controladores de vista de la app.

En el siguiente ejemplo de código, se muestra cómo agregar un 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 progreso del viaje

Se agregó la barra de progreso del viaje a la navegación.

La barra de progreso del viaje es una barra vertical que aparece en el lado de inicio o de avance del mapa cuando comienza la navegación. Cuando se habilita, muestra un resumen de todo el viaje, junto con el destino y la posición actual del usuario.

Esto permite que los usuarios anticipen rápidamente cualquier problema próximo, como el tráfico, sin necesidad de acercar la imagen. Luego, puede cambiar la ruta del viaje si es necesario. Si el usuario cambia la ruta del viaje, la barra de progreso se restablece como si se hubiera iniciado un viaje nuevo desde ese punto.

La barra de progreso del viaje muestra los siguientes indicadores de estado:

  • Estado del tráfico: Es el estado del tráfico próximo.

  • Ubicación actual: Es la ubicación actual del conductor durante el viaje.

  • Ruta transcurrida: Es la parte transcurrida del viaje.

Habilita la barra de progreso del viaje configurando la propiedad navigationTripProgressBarEnabled en GMSUISettings.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Posicionamiento de la barra de progreso del viaje

  • El lado izquierdo de la barra se alinea aproximadamente con el lado izquierdo del velocímetro, el logotipo de Google y el botón Volver a centrar (cuando está visible). El ancho es de 12 pt.
  • La barra de progreso del viaje responde de forma dinámica al espacio vertical de la pantalla. La parte inferior de la barra se ubica a 210 pt de la parte inferior de la pantalla. La parte superior de la barra de progreso del viaje permanece a al menos 170 pt de la parte superior de la pantalla, con una altura máxima de la barra de 400 pt.
  • Si la barra de progreso del viaje se superpone con el encabezado de navegación o con otros elementos de la IU de Navigation, aparecerá debajo de esos otros elementos.

API de Prompt Visibility (experimental)

La API de Prompt Visibility te permite evitar conflictos entre los elementos de la IU generados por el SDK de Navigation y tus propios elementos de la IU personalizados agregando un objeto de escucha para recibir una devolución de llamada antes de que aparezca un elemento de la IU del SDK de Navigation y tan pronto como se quite el elemento. Para obtener más información, incluidas muestras de código, consulta la sección API de Prompt Visibility de la página Configura interrupciones en tiempo real.

Control del velocímetro

Cuando la navegación está habilitada y el modo de viaje se establece en conducción, el SDK de Navigation para iOS muestra un control de límite de velocidad en la esquina inferior del mapa que indica el límite de velocidad actual. Cuando el conductor supera el límite de velocidad, el control se expande para mostrar un segundo velocímetro con la velocidad actual del conductor.

Puedes establecer niveles de alerta para cambiar el formato de la pantalla del velocímetro cuando el conductor supera el límite de velocidad en una cantidad específica. Por ejemplo, puedes especificar que la velocidad actual se muestre con un color de texto rojo cuando el conductor supere el límite de velocidad en 8 km/h y con un color de fondo rojo cuando lo supere en 16 km/h.

Para mostrar el control de límite de velocidad, establece la propiedad shouldDisplaySpeedometer de GMSUISettings en true. Para inhabilitar la visualización del control de límite de velocidad, establece shouldDisplaySpeedometer en false.

Swift

mapView.settings.shouldDisplaySpeedometer = true

Objective-C

mapView.settings.shouldDisplaySpeedometer = YES;

Para obtener más información sobre cómo configurar alertas para el velocímetro, consulta Configura alertas del velocímetro.

Marcadores de destino

Puedes mostrar u ocultar los marcadores de destino de una ruta determinada configurando la propiedad showsDestinationMarkers de GMSUISettings. En el siguiente ejemplo, se muestra cómo desactivar los marcadores de destino.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Funciones de la experiencia de Maps

El SDK de Navigation te permite personalizar aún más la experiencia de navegación de tus usuarios. Los cambios que realices en tu instancia se reflejarán en la próxima actualización de tu app por parte del usuario.

Entradas y destinos destacados

Entradas y destinos destacados

Cuando se crea un destino con un placeID, se destacará el edificio de destino y, siempre que sea posible, se mostrará un ícono de entrada. Estas indicaciones visuales ayudan a los usuarios a distinguir y navegar hasta el destino deseado.

Para crear un destino con un placeID, usa uno de los inicializadores GMSNavigationWaypoint que aceptan un placeID. Por ejemplo, los destinos creados en el instructivo para navegar por una ruta incluyen el destacado de destinos y las etiquetas de entrada cuando están disponibles.

Visualización de edificios en 3D durante la navegación

Visualización de edificios en 3D durante la navegación

De forma predeterminada, los edificios 3D se muestran durante la navegación. Para inhabilitar esta función, establece buildingsEnabled en false (Swift) o NO (Objective-C).

Inhabilita los gestos predeterminados del mapa

Puedes inhabilitar los gestos predeterminados en el mapa configurando las propiedades de la clase GMSUISettings, que está disponible como una propiedad de GMSMapView. Los siguientes gestos pueden habilitarse y deshabilitarse de manera programática. Ten en cuenta que, si inhabilitas el gesto, no se limitará el acceso programático a la configuración de la cámara.

  • scrollGestures controla si los gestos de desplazamiento están habilitados o inhabilitados. Si se habilita, los usuarios pueden deslizar el dedo para desplazar la cámara.
  • zoomGestures: Controla si los gestos de zoom están habilitados o inhabilitados. Si está habilitada, los usuarios pueden presionar dos veces, presionar con dos dedos o pellizcar para acercar la cámara. Ten en cuenta que, cuando se habilitan los scrollGestures, presionar dos veces o pellizcar puede desplazar la cámara al punto especificado.
  • tiltGestures — Controla si los gestos de inclinación están habilitados o inhabilitados. Si se habilita, los usuarios pueden deslizar dos dedos verticalmente hacia abajo o hacia arriba para inclinar la cámara.
  • rotateGestures: Controla si los gestos de rotación están habilitados o inhabilitados. Si se habilita, los usuarios pueden usar un gesto de rotación con dos dedos para rotar la cámara.

En este ejemplo, se inhabilitaron los gestos de desplazamiento y zoom.

Swift

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

Objective-C

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

Cómo posicionar controles y elementos de la IU

Puedes posicionar los controles y otros elementos de la IU en relación con la posición del encabezado y el pie de página de navegación con las siguientes propiedades:

  • navigationHeaderLayoutGuide
  • navigationFooterLayoutGuide
  • bottomTrailingButtonsLayoutGuide

En el siguiente ejemplo de código, se muestra cómo usar las guías de diseño para posicionar un par de etiquetas en la vista del 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 un ejemplo de cómo usar un bottomTrailingButtonsLayoutGuide para colocar el botón de informes de interrupciones en tiempo real, consulta Configura las interrupciones en tiempo real.

Ocultar rutas alternativas

Cuando la interfaz de usuario se llena de demasiada información, puedes reducir el desorden mostrando menos rutas alternativas que las predeterminadas (dos) o no mostrando ninguna. Puedes configurar esta opción antes de recuperar las rutas configurando GMSNavigationRoutingOptions y estableciendo alternateRoutesStrategy con uno de los siguientes valores de enumeración:

Valor de enumeraciónDescripción
GMSNavigationAlternateRoutesStrategyAll Predeterminado. Muestra hasta dos rutas alternativas.
GMSNavigationAlternateRoutesStrategyOne Muestra una ruta alternativa (si hay una disponible).
GMSNavigationAlternateRoutesStrategyNone Oculta las rutas alternativas.

Ejemplo

En el siguiente ejemplo de código, se muestra cómo ocultar las rutas alternativas por completo.

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