Cómo modificar la IU de navegación

Con el SDK de Navigation para Android, puedes modificar la experiencia del usuario con mapa determinando en cuáles de los controles y elementos integrados de la IU aparecerán el mapa. También puedes ajustar el aspecto visual de la IU de navegación. Recomendar a la página Políticas de pautas sobre modificaciones aceptables en la IU de navegación.

En este documento, se describe cómo modificar la interfaz de usuario de tu mapa de dos maneras:

Controles de la IU del mapa

Los controles de la IU del mapa se sitúan en la parte superior de la vista de navegación. El El SDK de Navigation para Android reposiciona automáticamente tus controles personalizados cuando cambia el diseño integrado. Para cada posición del diseño, puedes definir un control personalizado. El control personalizado puede ser un elemento de la IU o, si tu diseño requiere más, puedes usar un ViewGroup con varios elementos de la IU.

El setCustomControl método proporciona posiciones, como se define en la CustomControlPosition enum:

  • SECONDARY_HEADER (solo aparece en modo vertical)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

Por ejemplo, en las siguientes imágenes se muestran ejemplos de varias posiciones de un control de IU que informan al conductor de transporte compartido sobre la ubicación del pasajero durante un punto de partida.

Control personalizado
Posiciones

Agregar un encabezado secundario personalizado

De forma predeterminada, los diseños de pantalla en el modo de navegación proporcionan una posición para un encabezado ubicado debajo del encabezado principal. Este encabezado secundario aparece cuando necesario, como con la indicación de carril. Tu app puede usar este encabezado secundario posición del diseño para el contenido personalizado. Cuando usas esta función, tus abarca todo el contenido del encabezado secundario predeterminado. Si tu vista de navegación tiene un fondo, ese fondo permanece en su lugar, cubierto por el encabezado secundario. Cuando tu app quita el control personalizado, cualquier encabezado secundario predeterminado puede en su lugar.

La posición del encabezado secundario personalizado alinea su borde superior con el borde inferior de el encabezado principal. Esta posición solo se admite en portrait mode. En landscape mode, el encabezado secundario no está disponible y el diseño no cambio.

  1. Crea una vista de Android. con el elemento de IU personalizado o ViewGroup.
  2. Aumenta el XML o crea una instancia de la vista personalizada para obtener una instancia de la para agregar como un encabezado secundario.
  3. Usa NavigationView.setCustomControl o SupportNavigationFragment.setCustomControl con CustomControlPosition como SECONDARY_HEADER

    En el siguiente ejemplo, se crea un fragmento y se agrega un control personalizado en el posición del encabezado secundario.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

Cómo quitar un encabezado secundario

Para quitar el encabezado secundario y volver al contenido predeterminado, usa la setCustomControl.

Establece la vista en null para quitarla.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Agrega un control personalizado en la parte inferior de la vista de navegación

Tu app puede especificar un control personalizado alineado con el borde inferior de la una vista de navegación. Cuando tu app agrega el control personalizado, el botón para volver a centrar y y el logotipo de Google se mueve hacia arriba para ubicarlo.

  1. Crea una vista de Android. con el elemento de la IU o el grupo de vistas que quieres agregar.
  2. Crea la vista de navegación o el fragmento.
  3. Llama al método setCustomControl en el fragmento o la vista de navegación. especificar el control y la posición a usar.

En el siguiente ejemplo, se muestra un View personalizado agregado a un SupportNavigationFragment

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

Cómo quitar un control personalizado

Para quitar el control personalizado, usa el método setCustomControl y especifica la del control que deseas eliminar.

Establece la vista en null para esa posición.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Accesorios de IU de mapas

El SDK de Navigation para Android proporciona accesorios de IU que aparecen en similares a los de la aplicación de Google Maps para Android. Puedes ajustar la visibilidad o el aspecto visual de estos controles de la siguiente manera: que se describe en esta sección. Los cambios que realices aquí se reflejarán en los próximos sesión de navegación.

Consulta las Políticas para obtener pautas sobre modificaciones aceptables a la IU de navegación.

Consulta el código

Cómo modificar el encabezado de navegación

Usa SupportNavigationFragment.setStylingOptions() o NavigationView.setStylingOptions() para cambiar el tema del encabezado de navegación y el indicador de próximo giro que aparecerá debajo del encabezado cuando esté disponible.

Puedes establecer los siguientes atributos:

Tipo de atributoAtributos
Color de fondo
  • Modo diurno principal: el color diurno del encabezado de navegación
  • Modo diurno secundario: el color diurno del indicador de próximo giro
  • Modo nocturno principal: el color nocturno del encabezado de navegación
  • Modo nocturno secundario: el color nocturno del indicador de próximo giro
Elementos de texto para instrucciones
  • Color del texto
  • Fuente
  • Tamaño del texto de la primera fila
  • Tamaño del texto de la segunda fila
Elementos de texto para los próximos pasos
  • Fuente
  • Color del texto del valor de distancia
  • Tamaño del texto del valor de distancia
  • Color del texto de las unidades de distancia
  • Tamaño del texto de las unidades de distancia
Íconos de maniobra
  • Color del ícono de maniobra grande
  • Color del ícono de maniobra pequeña
Indicación de carril
  • Color del carril o carriles recomendados

En el siguiente ejemplo, se muestra cómo configurar las opciones de diseño:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

Desactiva la capa de tráfico

Usa GoogleMap.setTrafficEnabled() para habilitar o inhabilitar la capa de tráfico en el mapa. Esta configuración afecta la indicaciones de la densidad del tráfico que se muestran en el mapa en su totalidad. Sin embargo, no afectará las indicaciones de tráfico en la ruta trazada por el navegador.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

Habilitar semáforos y señales de alto

Puedes habilitar los semáforos y las señales de alto en la IU del mapa. Con esta función, el usuario puede habilitar la visualización de semáforos o iconos de señales de alto en su ruta, que proporciona un mejor contexto para viajes más eficientes y precisos.

De forma predeterminada, los semáforos y las señales de alto están inhabilitados en el SDK de Navigation. Para habilitar esta función, llama a DisplayOptions para cada función de forma independiente.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Agrega marcadores personalizados

El SDK de Navigation para Android ahora usa las APIs de Google Maps para los marcadores. Ve a la sección Documentación de la API de Google Maps para obtener más información.

Texto flotante

Puedes agregar texto flotante en cualquier parte de tu aplicación, siempre y cuando no cubra los Atribución de Google. El SDK de Navigation no admite ancla el texto a una latitud y longitud en el mapa, o a una etiqueta. Ve a Información. ventanas para obtener más información información.

Cómo mostrar el límite de velocidad

Puedes ocultar o mostrar de manera programática el ícono de límite de velocidad. Usa NavigationView.setSpeedLimitIconEnabled() o SupportNavigationFragment.setSpeedLimitIconEnabled() para ocultar o mostrar el ícono de límite de velocidad. Cuando esté habilitado, el ícono de límite de velocidad se muestra en una esquina inferior durante la guía. El ícono muestra el límite de velocidad. de la ruta por la que viaja el vehículo. El ícono solo aparece en ubicaciones. donde estén disponibles datos confiables sobre los límites de velocidad.

 // Display the Speed Limit icon 
 mNavFragment.setSpeedLimitIconEnabled(true);

El ícono de límite de velocidad está oculto temporalmente cuando se desactiva el botón para volver a centrar que se muestra.

Configurar modo nocturno

Puedes controlar de manera programática el comportamiento del modo nocturno. Usa NavigationView.setForceNightMode() o SupportNavigationFragment.setForceNightMode() para activar o desactivar el modo nocturno, o bien dejar que el SDK de Navigation para Android controlarlo.

  • AUTO permite que el SDK de Navigation determine la modo adecuado según la ubicación del dispositivo y la hora local.
  • FORCE_NIGHT fuerza el modo nocturno.
  • FORCE_DAY fuerza el modo diurno.

En el siguiente ejemplo, se muestra cómo forzar la activación del modo nocturno en una navegación fragmento:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

Mostrar lista de instrucciones sobre cómo llegar

Primero, crea la vista y agrégala a tu jerarquía.

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

Asegúrate de reenviar los eventos de ciclo de vida a DirectionsListView del mismo modo que lo hacen están con NavigationView. Por ejemplo:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

Ocultando rutas alternativas

Cuando la interfaz de usuario está desordenada con demasiada información, puedes reducir el desorden mostrando menos rutas alternativas que la predeterminada (dos) ya que no muestran ninguna ruta alternativa. Puedes configurar esta opción antes Recuperas las rutas llamando a RoutingOptions.alternateRoutesStrategy(). con uno de los siguientes valores de enumeración:

Valor de enumeraciónDescripción
AlternateRoutesStrategy.SHOW_ALL Predeterminado. Muestra hasta dos rutas alternativas.
AlternateRoutesStrategy.SHOW_ONE Muestra una ruta alternativa (si hay una disponible).
AlternateRoutesStrategy.SHOW_NONE Oculta las rutas alternativas.

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

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

Barra de progreso del viaje

La barra de progreso del viaje agregada a la navegación.

La barra de progreso del viaje es una barra vertical que aparece en el borde derecho final. del mapa cuando se inicia la navegación. Cuando está habilitada, muestra una descripción general de un todo el viaje, junto con el destino y la posición actual del usuario.

Ofrece a los usuarios la posibilidad de anticipar rápidamente cualquier problema futuro, como como el tráfico, sin necesidad de acercar la imagen. Entonces, pueden redirigir el viaje si necesario. Si el usuario redirige el viaje, la barra de progreso se restablece como si un nuevo viaje haya comenzado a partir de ese punto.

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

  • Ruta transcurrida: Es la parte transcurrida del viaje.

  • Posición actual: La ubicación actual del usuario en el viaje.

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

  • Destino final: el destino final del viaje.

Habilita la barra de progreso del viaje llamando al método setTripProgressBarEnabled() activado NavigationView o SupportNavigationFragment. Por ejemplo:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);