Con el SDK de Navigation para Android, puedes modificar la experiencia del usuario con tu mapa determinando qué controles y elementos integrados de la IU aparecerán en el mapa. También puedes ajustar el aspecto visual de la IU de navegación. Consulta la página Políticas para obtener lineamientos sobre las 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 encuentran en la parte superior de la vista de navegación. El SDK de Navigation para Android reposiciona automáticamente tus controles personalizados cuando cambia el diseño integrado. Puedes configurar un control personalizado para cada posición del diseño. 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 método setCustomControl
proporciona posiciones como se define en la enumeración CustomControlPosition
:
SECONDARY_HEADER
(solo aparece en modo vertical)BOTTOM_START_BELOW
BOTTOM_END_BELOW
En la imagen, se muestran ejemplos de varias posiciones de un control de la IU que informa al conductor sobre la ubicación de un pasajero.
Agrega 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 secundario ubicado debajo del principal. Este encabezado secundario aparece cuando es necesario, como con las indicaciones de carril. Tu app puede usar esta posición del encabezado secundario del diseño para el contenido personalizado. Cuando usas esta función, tu control cubre cualquier contenido de encabezado secundario predeterminado. Si tu vista de navegación tiene un fondo, este permanecerá en su lugar, cubierto por el encabezado secundario. Cuando tu app quita el control personalizado, puede aparecer cualquier encabezado secundario predeterminado en su lugar.
La posición del encabezado secundario personalizado alinea su borde superior con el borde inferior del 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 cambia.
- Crea una vista de Android con el elemento de IU personalizado o ViewGroup.
- Aumenta el XML o crea una instancia de la vista personalizada para obtener una instancia de la vista a fin de agregarla como encabezado secundario.
Usa
NavigationView.setCustomControl
oSupportNavigationFragment.setCustomControl
con CustomControlPosition como SECONDARY_HEADER.En el siguiente ejemplo, se crea un fragmento y se agrega un control personalizado en la posición del encabezado secundario.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER);
Quita un encabezado secundario
Para quitar el encabezado secundario y volver al contenido predeterminado, usa el método setCustomControl
.
Establece la vista en null
para quitarla.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Agrega un control personalizado a la parte inferior de la vista de navegación
Tu app puede especificar un control personalizado alineado con el borde inferior de la vista de navegación. Cuando tu app agrega el control personalizado, el botón para volver a centrar y el logotipo de Google se mueven hacia arriba para adaptarse a él.
- Crea una Android View con el elemento de la IU o el grupo de vistas que quieras agregar.
- Crea la vista o el fragmento de navegación.
- Llama al método
setCustomControl
en la vista o el fragmento de navegación, y especifica el control y la posición que se usarán.
En el siguiente ejemplo, se muestra un View
personalizado que se agregó 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 posición del control que deseas quitar.
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 durante la navegación similares a los que se encuentran en la aplicación de Google Maps para Android. 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 durante el próximo viaje del conductor.
Consulta la página Políticas para obtener lineamientos sobre modificaciones aceptables en la IU de navegación.
Consulta el código
Modifica 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 aparece debajo del encabezado cuando esté disponible.
Puedes configurar los siguientes atributos:
Tipo de atributo | Atributos |
---|---|
Color de fondo |
|
Elementos de texto para instrucciones |
|
Elementos de texto para los próximos pasos |
|
Íconos de maniobras |
|
Indicación de carril |
|
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));
Cómo desactivar la capa de tráfico
Utiliza GoogleMap.setTrafficEnabled()
para habilitar o inhabilitar la capa de tráfico en el mapa. Esta configuración afecta las indicaciones de densidad de tráfico que se muestran en el mapa en su totalidad. Sin embargo, no afecta las indicaciones de tráfico en la ruta que traza 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));
Habilita los semáforos y las 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 conductor puede habilitar la visualización de semáforos o íconos de señales de alto en su ruta, lo 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. Si quieres habilitar esta función, llama a DisplayOptions
para cada función de forma independiente.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Cómo agregar marcadores personalizados
El SDK de Navigation para Android ahora usa las APIs de Google Maps para los marcadores. Consulta la documentación de la API de Google Maps para obtener más información.
Texto flotante
Puedes agregar texto flotante en cualquier lugar de tu app, siempre que no abarque la atribución de Google. El SDK de Navigation no admite anclar el texto a una latitud o longitud en el mapa, ni a una etiqueta. Ve a Ventanas de información para obtener más detalles.
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 hay datos de límites de velocidad confiables disponibles.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
El ícono de límite de velocidad se oculta temporalmente cuando se muestra el botón de volver a centrar.
Configurar modo nocturno
Puedes controlar el comportamiento del modo nocturno de manera programática.
Usa NavigationView.setForceNightMode()
o SupportNavigationFragment.setForceNightMode()
para activar o desactivar el modo nocturno, o bien deja que el SDK de Navigation para Android lo controle.
AUTO
Permite que el SDK de Navigation determine el modo apropiado 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 un fragmento de navegación:
// 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
al igual que con NavigationView
. Por ejemplo:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Cómo ocultar rutas alternativas
Cuando la interfaz de usuario se satura con demasiada información, puedes reducir la sobrecarga si muestras menos rutas alternativas que las predeterminadas (dos) o no muestras ninguna ruta alternativa. Puedes configurar esta opción antes de recuperar las rutas mediante una llamada al método RoutingOptions.alternateRoutesStrategy()
con uno de los siguientes valores de enumeración:
Valor de enumeración | Descripció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 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 es una barra vertical que aparece en el borde derecho final del mapa cuando comienza la navegación. Cuando se habilita, muestra una descripción general de todo el viaje, junto con el destino del conductor y su posición actual.
Proporciona a los conductores la capacidad de anticipar con rapidez cualquier problema futuro, como el tráfico, sin necesidad de acercar la imagen. Luego, pueden redirigir el viaje si es necesario. Si el conductor redirecciona el viaje, la barra de progreso se restablece como si comenzara un nuevo viaje desde ese punto.
La barra de progreso del viaje muestra los siguientes indicadores de estado:
Ruta transcurrida: La parte transcurrida del viaje.
Posición actual: Es la ubicación actual del conductor en el viaje.
Estado del tráfico: El estado del tráfico próximo.
Destino final: El destino final del viaje.
Para habilitar la barra de progreso del viaje, llama al método setTripProgressBarEnabled()
en NavigationView o SupportNavigationFragment.
Por ejemplo:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);