Com o SDK do Navigation para Android, você pode modificar a experiência do usuário com seu mapa determinando quais dos controles e elementos de interface integrados aparecem no mapa. Você também pode ajustar a aparência da interface de navegação. Consulte a página de políticas para diretrizes sobre modificações aceitáveis na interface de navegação.
Este documento descreve como modificar a interface do usuário de seu mapa de duas maneiras:
Controles de interface do mapa
Os controles de interface do mapa ficam na parte superior da visualização de navegação. O SDK do Navigation para Android reposiciona automaticamente seus controles personalizados quando o
layout integrado muda. Para cada posição do layout, você pode definir um controle
personalizado. O controle personalizado pode ser um elemento da interface ou, se o design exigir
mais, você pode usar um ViewGroup
com vários elementos da interface.
O método setCustomControl
fornece posições conforme definido no tipo enumerado CustomControlPosition
:
SECONDARY_HEADER
(aparece apenas no modo retrato)BOTTOM_START_BELOW
BOTTOM_END_BELOW
A imagem mostra exemplos de várias posições de um controle de interface que informa ao motorista a localização de um passageiro.
Adicionar um cabeçalho secundário personalizado
Por padrão, os layouts de tela no modo de navegação fornecem uma posição para um cabeçalho secundário localizado abaixo do cabeçalho principal. Esse cabeçalho secundário aparece quando necessário, como na orientação de faixa. Seu app pode usar essa posição de cabeçalho secundária do layout para conteúdo personalizado. Quando você usa esse recurso, seu controle cobre qualquer conteúdo de cabeçalho secundário padrão. Se a visualização de navegação tiver um plano de fundo, ele permanecerá coberto pelo cabeçalho secundário. Quando o app remove o controle personalizado, qualquer cabeçalho secundário padrão pode aparecer no lugar.
A posição do cabeçalho secundário personalizada alinha a borda superior com a borda inferior do
cabeçalho principal. Essa posição só é compatível com portrait mode
. Em
landscape mode
, o cabeçalho secundário não está disponível, e o layout não
muda.
- Crie uma visualização do Android com o elemento de IU personalizado ou com o ViewGroup.
- Infle o XML ou instancie a visualização personalizada para receber uma instância da visualização a ser adicionada como cabeçalho secundário.
Use
NavigationView.setCustomControl
ouSupportNavigationFragment.setCustomControl
com CustomControlPosition como SECONDARY_HEADER.O exemplo abaixo cria um fragmento e adiciona um controle personalizado na posição do cabeçalho secundário.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER);
Remover um cabeçalho secundário
Para remover o cabeçalho secundário e retornar ao conteúdo padrão, use o
método setCustomControl
.
Defina a visualização como null
para removê-la.
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Adicionar um controle personalizado à parte de baixo da visualização de navegação
Seu app pode especificar um controle personalizado alinhado à borda de baixo da visualização de navegação. Quando o app adiciona o controle personalizado, o botão recentralizar e o logotipo do Google se movem para cima para acomodá-lo.
- Crie uma visualização do Android com o elemento da interface ou o grupo de visualizações que você quer adicionar.
- Criar a visualização ou o fragmento de navegação.
- Chame o método
setCustomControl
na visualização ou no fragmento de navegação e especifique o controle e a posição a serem usados.
O exemplo a seguir mostra um View
personalizado adicionado a um 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);
Remover um controle personalizado
Para remover o controle personalizado, use o método setCustomControl
e especifique a posição dele.
Defina a visualização como null
para essa posição.
mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);
Acessórios para interface de mapa
O SDK do Navigation para Android oferece acessórios de interface que aparecem durante a navegação semelhantes aos encontrados no app Google Maps para Android. É possível ajustar a visibilidade ou aparência desses controles, conforme descrito nesta seção. As mudanças feitas aqui são aplicadas na próxima viagem do motorista.
Consulte a página de políticas para diretrizes sobre modificações aceitáveis na interface de navegação.
Ver o código
Modificar o cabeçalho de navegação
Use SupportNavigationFragment.setStylingOptions()
ou
NavigationView.setStylingOptions()
para mudar o
tema do cabeçalho de navegação e o indicador da próxima curva que aparece
abaixo do cabeçalho, quando disponível.
É possível definir os seguintes atributos:
Tipo de atributo | Atributos |
---|---|
Cor do plano de fundo |
|
Elementos de texto para instruções |
|
Elementos de texto para as próximas etapas |
|
Ícones de manobra |
|
Orientação de faixa |
|
O exemplo abaixo mostra como definir opções de estilo:
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));
Desativar a camada de trânsito
Use GoogleMap.setTrafficEnabled()
para ativar ou desativar a camada de trânsito no mapa. Ela afeta as indicações da densidade de tráfego mostradas no mapa como um todo. No entanto, isso não afeta as indicações de trânsito no trajeto traçado pelo 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));
Ativar semáforos e sinais de parada
Você pode ativar semáforos e placas de parada na interface do mapa. Com esse recurso, o motorista pode ativar a exibição de semáforos ou ícones de sinalização de parada ao longo do trajeto, oferecendo um contexto melhor para viagens mais eficientes e precisas.
Por padrão, semáforos e sinais de parada ficam desativados no
SDK do Navigation. Para ativar esse recurso, chame DisplayOptions
para cada recurso de forma independente.
DisplayOptions displayOptions =
new DisplayOptions().showTrafficLights(true).showStopSigns(true);
Adicionar marcadores personalizados
O SDK do Navigation para Android agora usa as APIs do Google Maps para marcadores. Saiba mais na documentação da API Maps.
Texto flutuante
É possível adicionar texto flutuante em qualquer lugar do app, desde que ele não cubra a atribuição do Google. O SDK do Navigation não oferece suporte à ancoragem do texto em uma latitude/longitude no mapa ou em um rótulo. Acesse as Janelas de informações para mais detalhes.
Mostrar o limite de velocidade
Você pode mostrar ou ocultar programaticamente o ícone de limite de velocidade.
Use NavigationView.setSpeedLimitIconEnabled()
ou SupportNavigationFragment.setSpeedLimitIconEnabled()
para mostrar ou ocultar o ícone de limite de velocidade. Quando ativado, o ícone de limite de velocidade
é mostrado em um canto de baixo durante a orientação. O ícone mostra
o limite de velocidade da via em que o veículo está viajando. Ele
só aparece em locais onde dados confiáveis de limites de velocidade estão disponíveis.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
O ícone de limite de velocidade fica temporariamente oculto quando o botão "Recentralizar" é exibido.
Definir modo noturno
Você pode controlar o comportamento do modo noturno de forma programática.
Use NavigationView.setForceNightMode()
ou SupportNavigationFragment.setForceNightMode()
para ativar ou desativar o modo noturno ou permita que o SDK do Navigation para Android
o controle.
AUTO
Permite que o SDK do Navigation determine o modo adequado de acordo com a localização do dispositivo e o horário local.FORCE_NIGHT
força o modo noturno a ser ativado.FORCE_DAY
força o modo diurno a ser ativado.
O exemplo abaixo mostra como forçar a ativação do modo noturno em um fragmento de navegação:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Exibir lista de rotas
Primeiro, crie a visualização e adicione-a à sua hierarquia.
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));
}
Encaminhe eventos de ciclo de vida para a DirectionsListView
assim como
para NavigationView
. Exemplo:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Ocultando trajetos alternativos
Quando a interface do usuário fica sobrecarregada com muita informação, é possível reduzir a sobrecarga exibindo menos rotas alternativas do que o padrão (duas) ou não exibindo rotas alternativas. É possível configurar essa opção antes
de buscar as rotas chamando o método RoutingOptions.alternateRoutesStrategy()
com um dos seguintes valores de enumeração:
Valor de enumeração | Descrição |
---|---|
AlternateRoutesStrategy.SHOW_ALL | Padrão. Mostra até duas rotas alternativas. |
AlternateRoutesStrategy.SHOW_ONE | Mostra um trajeto alternativo (se houver). |
AlternateRoutesStrategy.SHOW_NONE | Oculta rotas alternativas. |
O exemplo de código a seguir demonstra como ocultar todas as rotas alternativas.
RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);
Barra de progresso da viagem
A barra de progresso da viagem é uma barra vertical que aparece na borda direita final do mapa quando a navegação é iniciada. Quando ativada, ela mostra uma visão geral de uma viagem inteira, com o destino e a posição atual do motorista.
Ele oferece aos motoristas a capacidade de prever rapidamente quaisquer problemas futuros, como o trânsito, sem precisar aumentar o zoom. Ela pode redirecionar a viagem, se necessário. Se o motorista redirecionar a viagem, a barra de progresso será redefinida como se uma nova viagem tivesse começado desse ponto.
A barra de progresso da viagem exibe os seguintes indicadores de status:
Trajeto decorrido: o trecho decorrido da viagem.
Posição atual: a localização atual do motorista na viagem.
Status do trânsito: o status do trânsito futuro.
Destino final: o destino final da viagem.
Ative a barra de progresso da viagem chamando o método setTripProgressBarEnabled()
em NavigationView ou SupportNavigationFragment.
Exemplo:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);