Modificar a IU de navegação

Com o SDK do Navigation para Android, você pode modificar a experiência do usuário com seu mapa determinando em quais dos controles e elementos integrados da interface do usuário aparecem no mapa. Também é possível ajustar a aparência da interface de navegação. Indicar 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 O SDK do Navigation para Android reposiciona automaticamente seus controles personalizados quando o layout integrado for alterado. Para cada posição do layout, é possível definir um controle personalizado. O controle personalizado pode ser um elemento da interface do usuário ou, se seu design precisar de mais, você pode usar um ViewGroup com vários elementos de interface.

O setCustomControl método fornece posições conforme definido no CustomControlPosition tipo enumerado:

  • SECONDARY_HEADER (aparece apenas no modo retrato)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

Por exemplo, as imagens abaixo mostram exemplos de várias posições de um controle de interface que informam o local do passageiro durante o embarque.

Controle personalizado Posições

Adicionar um cabeçalho secundário personalizado

Por padrão, os layouts de tela no modo de navegação fornecem uma posição para uma imagem 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 esse cabeçalho secundário a posição do layout do conteúdo personalizado. Quando você usa esse recurso, abrange todo o conteúdo do cabeçalho secundário padrão. Se a visualização de navegação tiver um plano de fundo, esse segundo plano permanece no lugar, coberto pelo cabeçalho secundário. Quando seu app remove o controle personalizado, qualquer cabeçalho secundário padrão pode aparecem no lugar.

A posição personalizada do cabeçalho secundário alinha a borda superior à borda inferior do no cabeçalho principal. Essa posição só é compatível com portrait mode. Em landscape mode, o cabeçalho secundário não estará disponível, e o layout não mudar.

  1. Criar uma visualização do Android com o elemento personalizado da IU ou ViewGroup.
  2. Infle o XML ou instancie a visualização personalizada para receber uma instância do visualização para adicionar como cabeçalho secundário.

  3. Use NavigationView.setCustomControl ou SupportNavigationFragment.setCustomControl com CustomControlPosition como SECUNDÁRIA_TÍTULO.

    O exemplo abaixo cria um fragmento e adiciona um controle personalizado no na posição secundária do cabeçalho.

     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

O app pode especificar um controle personalizado alinhado à borda inferior da visualização de navegação. Quando seu app adiciona o controle personalizado, o botão recentralizar e o logotipo do Google se mover para cima para acomodá-lo.

  1. Criar uma visualização do Android com o elemento da interface ou o grupo de visualização que você quer adicionar.
  2. Criar a visualização ou o fragmento de navegação.
  3. Chame o método setCustomControl na visualização ou no fragmento de navegação. especificar o controle e a posição a serem usados.
.

O exemplo a seguir mostra um View personalizado adicionado a uma 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 do controle que você quer remover.

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 fornece acessórios de interface que aparecem durante navegação semelhante à do aplicativo Google Maps para Android. Você pode ajustar a visibilidade ou aparência desses controles conforme descritos nesta seção. As alterações que você fizer aqui serão refletidas nas próximas sessão de navegação.

Consulte as Políticas página para conferir as diretrizes modificações aceitáveis na interface de navegação.

Ver o código

Modificar o cabeçalho de navegação

Usar SupportNavigationFragment.setStylingOptions() ou NavigationView.setStylingOptions() para alterar o tema do cabeçalho de navegação e o indicador da próxima curva que aparecerá abaixo do cabeçalho quando disponível.

É possível definir os seguintes atributos:

Tipo de atributoAtributos
Cor do plano de fundo
  • Modo diurno principal: a cor diurna do cabeçalho de navegação
  • Modo diurno secundário: a cor diurna do indicador da próxima curva
  • Modo noturno principal: a cor noturna do cabeçalho de navegação.
  • Modo noturno secundário: a cor noturna do indicador da próxima curva.
Elementos de texto para instruções
  • Cor do texto
  • Fonte
  • Tamanho do texto da primeira linha
  • Tamanho do texto da segunda linha
Elementos de texto para as próximas etapas
  • Fonte
  • Cor do texto do valor da distância
  • Tamanho do texto do valor da distância
  • Cor do texto das unidades de distância
  • Tamanho do texto das unidades de distância
Ícones de manobra
  • Cor do ícone da manobra grande
  • Cor do ícone da pequena manobra
Orientação de faixa
  • Cor da faixa recomendada

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

Usar GoogleMap.setTrafficEnabled() para ativar ou desativar a camada de trânsito no mapa. Essa configuração afeta indicações da densidade de tráfego mostradas no mapa como um todo. No entanto, ela 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 usuário pode ativar a exibição de semáforos ou ícones de sinalização de parada ao longo do trajeto, fornecendo um contexto melhor para viagens mais eficientes e precisas.

Por padrão, semáforos e sinais de parada são 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. Acesse o Documentação da API Maps para mais informações.

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 a uma latitude/longitude no mapa ou um rótulo. Vá para Informações windows para conferir mais informações imprecisas ou inadequadas.

Mostrar o limite de velocidade

Você pode mostrar ou ocultar programaticamente o ícone de limite de velocidade. Usar NavigationView.setSpeedLimitIconEnabled() ou SupportNavigationFragment.setSpeedLimitIconEnabled() para mostrar ou ocultar o ícone de limite de velocidade. Quando ativado, o ícone de limite de velocidade é exibido em um canto inferior durante as orientações. O ícone mostra o limite de velocidade da via em que o veículo está viajando. O ícone só aparece em locais em que dados confiáveis sobre limites de velocidade estejam disponíveis.

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

O ícone de limite de velocidade fica temporariamente oculto quando o botão "Recentralizar" é exibidos.

Definir modo noturno

Você pode controlar o comportamento do modo noturno de forma programática. Usar NavigationView.setForceNightMode() ou SupportNavigationFragment.setForceNightMode() ativar ou desativar o modo noturno ou permita que o SDK do Navigation para Android controlá-la.

  • AUTO Permite que o SDK do Navigation determine o 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 a seguir mostra como forçar a ativação do modo noturno em uma navegação fragmento:

// 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 da mesma forma que eles estão com NavigationView. Exemplo:

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

Ocultando trajetos alternativos

Quando a interface do usuário fica cheia de informações demais, você pode reduzir a desordem ao exibir menos rotas alternativas do que o padrão (duas); ou e não exibe trajetos alternativos. É possível configurar essa opção antes você busca as rotas chamando o método RoutingOptions.alternateRoutesStrategy() com um dos seguintes valores de enumeração:

Valor de enumeraçãoDescriçã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

Barra de progresso da viagem adicionada à navegação.

A barra de progresso da viagem é uma barra vertical que aparece no lado direito do mapa quando a navegação é iniciada. Quando ativada, ela mostra uma visão geral viagem inteira, com o destino e a posição atual do usuário.

Eles oferecem aos usuários a capacidade de antecipar rapidamente problemas futuros, como quanto o tráfego, sem precisar aumentar o zoom. Eles podem redirecionar a viagem se necessários. Se o usuário redirecionar a viagem, a barra de progresso será redefinida como se um novo viagem começou 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 usuário 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(). ativado NavigationView ou SupportNavigationFragment. Exemplo:

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