Com o SDK de navegação para Android, você pode modificar a experiência do usuário com seu mapa, determinando quais controles de interface e elementos integrados aparecem no mapa. Também é possível ajustar a aparência 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.
Neste documento, descrevemos como modificar a interface do usuário do mapa de duas maneiras:
Controles de interface do mapa
Para colocar elementos de interface personalizados na visualização de navegação, use os controles de interface do mapa para
o posicionamento adequado. Quando o layout integrado muda, o SDK do Navigation para Android reposiciona automaticamente os controles personalizados.
É possível definir uma visualização de controle personalizada por vez para cada posição. Se o design exigir vários elementos da interface, coloque-os em um ViewGroup e transmita-os para o método setCustomControl.
O método
setCustomControl
fornece posições conforme definido no tipo enumerado
CustomControlPosition:
SECONDARY_HEADER(aparece apenas no modo retrato)BOTTOM_START_BELOWBOTTOM_END_BELOWFOOTER
Adicionar um controle personalizado
- Crie uma visualização do Android com o elemento da interface ou ViewGroup personalizado.
- Infle o XML ou instancie a visualização personalizada para receber uma instância da visualização.
Use
NavigationView.setCustomControlouNavigationFragment.setCustomControlcom a posição do controle personalizado escolhida no tipo enumeradoCustomControlPosition.O exemplo a seguir 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 controle personalizado
Para remover um controle personalizado, chame o método setCustomControl com um parâmetro de visualização null e a posição escolhida para o controle personalizado.
Por exemplo, o snippet a seguir remove qualquer cabeçalho secundário personalizado e retorna ao conteúdo padrão:
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
Posições de controle personalizadas
Cabeçalho secundário
Para usar essa posição de controle personalizado, transmita a posição
CustomControlPosition.SECONDARY_HEADER para setCustomControl.
Por padrão, os layouts de tela no modo de navegação oferecem 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. O app pode usar essa posição de cabeçalho secundário do layout para conteúdo personalizado. Quando você usa esse recurso, seu controle abrange qualquer conteúdo de cabeçalho secundário padrão. Se a visualização de navegação tiver um plano de fundo, ele vai permanecer no lugar, coberto pelo cabeçalho secundário. Quando o app remove o controle personalizado, qualquer cabeçalho secundário padrão pode aparecer no lugar dele.
A posição do cabeçalho secundário personalizado alinha a borda superior com a borda inferior do
cabeçalho principal. Essa posição só é aceita em portrait mode. No
landscape mode, o cabeçalho secundário não está disponível, e o layout não
muda.
Início inferior
Para usar essa posição de controle personalizado, transmita a posição
CustomControlPosition.BOTTOM_START_BELOW para setCustomControl.
Essa posição de controle personalizado fica no canto inferior inicial do mapa. Em ambos os casos,
portrait mode e landscape mode, ele fica acima do cartão de HEC e/ou do rodapé
personalizado (ou na parte de baixo do mapa, se nenhum deles estiver presente), e os elementos do SDK de navegação,
incluindo o botão de centralização e o logotipo do Google, se movem para cima para acomodar
a altura da visualização de controle personalizada. Esse controle fica dentro dos limites visíveis do mapa. Portanto, qualquer padding adicionado às bordas inferior ou inicial do mapa também vai mudar a posição dele.
Parte de baixo
Para usar essa posição de controle personalizado, transmita a posição
CustomControlPosition.BOTTOM_END_BELOW para setCustomControl.
Essa posição de controle personalizado fica no canto inferior do mapa. No portrait mode, ele fica acima do cartão HEC e/ou do rodapé personalizado (ou na parte de baixo do mapa, se nenhum deles estiver presente), mas no landscape mode ele fica alinhado com a parte de baixo do mapa. Todos os elementos do SDK de navegação visíveis na lateral final
(lado direito em LTR) se movem para cima para acomodar a altura da visualização de controle
personalizada. Esse controle fica posicionado dentro dos limites visíveis do mapa. Portanto, qualquer padding adicionado às bordas inferior ou final do mapa também vai mudar a posição desse controle.
Footer
Para usar essa posição de controle personalizado, transmita a posição
CustomControlPosition.FOOTER para setCustomControl.
Essa posição de controle personalizado foi projetada para uma visualização de rodapé personalizada. Se o cartão HEC do SDK de navegação estiver visível, esse controle vai ficar acima dele. Caso contrário, o controle será alinhado com a parte de baixo do mapa. Ao contrário dos controles personalizados BOTTOM_START_BELOW e BOTTOM_END_BELOW, esse controle fica fora dos limites visíveis do mapa. Isso significa que qualquer padding adicionado ao mapa não muda a posição dele.
No portrait mode, o rodapé personalizado tem largura total. Os controles personalizados nas posições
CustomControlPosition.BOTTOM_START_BELOW e
CustomControlPosition.BOTTOM_END_BELOW, bem como os elementos da interface do SDK de navegação,
como o botão de recentralização e o logotipo do Google, ficam acima do
rodapé do controle personalizado. A posição padrão da divisa considera a altura personalizada do rodapé.
Em landscape mode, o rodapé personalizado tem metade da largura e está alinhado ao lado
inicial (lado esquerdo em LTR), assim como o cartão HEC do SDK de navegação. Os controles personalizados na
posição CustomControlPosition.BOTTOM_START_BELOW e os elementos da interface do SDK de navegação,
como o botão de recentralização e o logotipo do Google, ficam acima do rodapé
do controle personalizado. Os controles personalizados na posição CustomControlPosition.BOTTOM_END_BELOW e todos os elementos da interface do SDK de navegação no lado final (lado direito em LTR) permanecem alinhados com a parte de baixo do mapa. A posição padrão da divisa não muda quando há um rodapé personalizado, já que ele não se estende até o lado final do mapa.
Os controles personalizados nas posições CustomControlPosition.BOTTOM_START_BELOW e CustomControlPosition.BOTTOM_END_BELOW, bem como os elementos da interface do SDK de navegação, como o botão de recentralização e o logotipo do Google, ficam acima do rodapé do controle personalizado.
Acessórios da interface do 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 a aparência visual desses controles, conforme descrito nesta seção. As mudanças feitas aqui serão aplicadas na próxima sessão de navegação.
Consulte a página de políticas para ver as diretrizes sobre modificações aceitáveis na interface de navegação.
Ver o código
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.
Para criar um destino com um placeID, use o método
Waypoint.Builder.setPlaceIdString().
Modificar o cabeçalho de navegação
Use
NavigationFragment.setStylingOptions()
ou
NavigationView.setStylingOptions()
para mudar o tema do cabeçalho de navegação e o indicador de 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 |
|
| Indicação de faixa |
|
O exemplo a seguir mostra como definir as opções de estilo:
private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
.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. Essa configuração afeta as indicações de densidade de trânsito 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));
Semáforos e placas de pare
Durante a navegação ativa, o mapa mostra semáforos e placas de "Pare" para dar aos usuários mais contexto sobre o trajeto e as próximas manobras. A partir da versão 8.0.0, não é possível desativar esse recurso.
Adicionar marcadores personalizados
O SDK do Navigation para Android agora usa as APIs Google Maps para marcadores. Acesse a documentação da API Maps para mais informações.
Texto flutuante
Você pode adicionar texto flutuante em qualquer lugar do app, desde que ele não cubra a atribuição do Google. O SDK de navegação não permite fixar o texto em uma latitude/longitude no mapa ou em um marcador. Acesse Janelas de informações para saber mais.
Mostrar o limite de velocidade
É possível mostrar ou ocultar o ícone de limite de velocidade de forma programática. Use
NavigationView.setSpeedLimitIconEnabled()
ou
NavigationFragment.setSpeedLimitIconEnabled()
para mostrar ou ocultar o ícone de limite de velocidade. Quando ativado, o ícone de limite de velocidade aparece em um canto inferior durante a navegação. O ícone mostra o limite de velocidade
da via em que o veículo está. O ícone só aparece em locais
com dados confiáveis sobre o limite de velocidade.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
O ícone de limite de velocidade fica temporariamente oculto quando o botão de centralização é mostrado.
Definir o modo noturno
É possível controlar o comportamento do modo noturno de forma programática. Use
NavigationView.setForceNightMode()
ou
NavigationFragment.setForceNightMode()
para ativar ou desativar o modo noturno ou deixe que o SDK de navegação para Android
o controle.
AUTO: permite que o SDK de navegação determine o modo apropriado de acordo com o local do dispositivo e o horário local.FORCE_NIGHTforça o modo noturno.FORCE_DAYforça o modo diurno.
O exemplo a seguir mostra como forçar a ativação do modo noturno em um fragmento de navegação:
// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);
Mostrar 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 os eventos de ciclo de vida para o DirectionsListView, assim como
são encaminhados para o NavigationView. Exemplo:
protected void onResume() {
super.onResume();
directionsListView.onResume();
}
Ocultar rotas alternativas
Quando a interface do usuário fica sobrecarregada com muitas 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 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 uma rota alternativa (se houver). |
| AlternateRoutesStrategy.SHOW_NONE | Oculta rotas alternativas. |
O exemplo de código a seguir demonstra como ocultar totalmente 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 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 futuros, como trânsito, sem precisar aumentar o zoom. Em seguida, eles podem traçar um novo trajeto, se necessário. Se o usuário mudar o trajeto da viagem, a barra de progresso será redefinida como se uma nova viagem tivesse começado a partir desse ponto.
A barra de progresso da viagem mostra os seguintes indicadores de status:
Route elapsed: a parte do trajeto que já foi percorrida.
Posição atual: a localização atual do usuário na viagem.
Status do trânsito: o status do trânsito à frente.
Destino final: o destino final da viagem.
Ative a barra de progresso da viagem chamando o método setTripProgressBarEnabled() em NavigationView ou NavigationFragment.
Exemplo:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);
Posicionamento da barra de progresso da viagem
- O lado esquerdo da barra fica mais ou menos alinhado com o lado esquerdo do velocímetro, o logotipo do Google e o botão "Recentralizar" (quando visível). A largura é de 12 dp.
- A barra de progresso da viagem mantém uma altura estática. Para se adaptar às limitações de espaço vertical em dispositivos menores, a visibilidade e a altura da barra de progresso da viagem se adaptam com base em pontos de interrupção especificados na altura da tela. Esses pontos de interrupção são independentes da orientação do dispositivo e do espaço que o mapa realmente ocupa na tela:
- Se a barra de progresso da viagem se sobrepuser ao card de conversão ou a outros elementos da interface de navegação, ela vai aparecer abaixo deles.
| Altura da tela | Visibilidade da barra de progresso da viagem | Altura da barra de progresso da viagem | Posição do eixo Y da barra de progresso da viagem |
|---|---|---|---|
| Pequeno: 0 dp - 551 dp | Não visível | N/A | N/A |
| Médio: 552 dp - 739 dp | Visível | 130 dp | Acima dos controles do lado inicial (velocímetro / logotipo do Google / botão "Recentralizar") |
| Grande: 740 dp ou mais | Visível | 290 dp | Acima dos controles do lado inicial (velocímetro / logotipo do Google / botão "Recentralizar") |
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 clica 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. É possível definir se a bússola está ativada
usando o método
compassEnabled
na classe GoogleMapOptions.
Desativar construções em 3D
Para dispositivos com desempenho limitado, é possível desativar a exibição de construções em 3D chamando GoogleMap.setBuildingsEnabled(false).
API Prompt Visibility (experimental)
A API Prompt Visibility permite evitar conflitos entre elementos da interface gerados pelo SDK de navegação e seus próprios elementos personalizados. Para isso, adicione um listener para receber um callback antes que um elemento da interface do SDK de navegação apareça e assim que o elemento 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.