탐색 UI 수정

Android용 Navigation SDK를 사용하면 지도에 표시할 기본 제공 UI 컨트롤과 요소를 결정하여 지도의 사용자 환경을 수정할 수 있습니다. 탐색 UI의 시각적 모양을 조정할 수도 있습니다. 탐색 UI에서 허용되는 수정사항에 대한 가이드라인은 정책 페이지를 참고하세요.

이 문서에서는 지도의 사용자 인터페이스를 두 가지 방법으로 수정하는 방법을 설명합니다.

지도 UI 컨트롤

지도 UI 컨트롤은 탐색 뷰의 상단에 있습니다. Android용 Navigation SDK는 내장 레이아웃이 변경될 때 맞춤 컨트롤의 위치를 자동으로 변경합니다. 레이아웃의 각 위치에 하나의 맞춤 컨트롤을 설정할 수 있습니다. 맞춤 컨트롤은 하나의 UI 요소가 될 수도 있고, 디자인에 더 많은 것이 필요한 경우 여러 UI 요소와 함께 ViewGroup를 사용할 수도 있습니다.

setCustomControl 메서드CustomControlPosition enum에 정의된 대로 위치를 제공합니다.

  • SECONDARY_HEADER (세로 모드일 때만 나타남)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

운전자에게 탑승자의 위치를 알려주는 UI 컨트롤의 다양한 위치의 예를 보여줍니다.

맞춤 컨트롤 위치

커스텀 보조 헤더 추가

기본적으로 탐색 모드의 화면 레이아웃은 기본 헤더 아래에 위치한 보조 헤더의 위치를 제공합니다. 이 보조 헤더는 차선 안내와 같이 필요한 경우 표시됩니다. 앱에서는 이 레이아웃의 보조 헤더 위치를 맞춤 콘텐츠에 사용할 수 있습니다. 이 기능을 사용하면 컨트롤은 기본 보조 헤더 콘텐츠를 모두 포함합니다. 탐색 뷰에 배경이 있으면 배경은 보조 헤더로 덮여 제자리에 유지됩니다. 앱에서 맞춤 컨트롤을 삭제하면 기본 보조 헤더가 그 자리에 표시될 수 있습니다.

커스텀 보조 헤더의 위치는 상단 가장자리가 기본 헤더의 하단 가장자리에 맞춰 정렬됩니다. 이 위치는 portrait mode에서만 지원됩니다. landscape mode에서는 보조 헤더를 사용할 수 없으며 레이아웃이 변경되지 않습니다.

  1. 맞춤 UI 요소 또는 ViewGroup을 사용하여 Android 뷰를 만듭니다.
  2. XML을 확장하거나 맞춤 뷰를 인스턴스화하여 보조 헤더로 추가할 뷰의 인스턴스를 가져옵니다.
  3. CustomControlPosition이 SECONDARY_HEADER로 설정된 NavigationView.setCustomControl 또는 SupportNavigationFragment.setCustomControl를 사용합니다.

    아래 예에서는 프래그먼트를 만들고 보조 헤더 위치에 맞춤 컨트롤을 추가합니다.

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

보조 헤더 삭제

보조 헤더를 삭제하고 기본 콘텐츠로 돌아가려면 setCustomControl 메서드를 사용합니다.

뷰를 null로 설정하여 뷰를 삭제합니다.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

탐색 뷰 하단에 맞춤 컨트롤 추가

앱에서 탐색 뷰의 하단 가장자리에 정렬된 맞춤 컨트롤을 지정할 수 있습니다. 앱에서 맞춤 컨트롤을 추가하면 다시 가운데로 배치 버튼과 Google 로고가 위로 이동하여 이를 수용합니다.

  1. 추가하려는 UI 요소 또는 뷰 그룹을 사용하여 Android View를 만듭니다.
  2. 탐색 뷰 또는 프래그먼트를 만듭니다.
  3. 탐색 뷰 또는 프래그먼트에서 setCustomControl 메서드를 호출하고 사용할 컨트롤과 위치를 지정합니다.

다음 예는 SupportNavigationFragment에 추가된 맞춤 View를 보여줍니다.

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);

맞춤 컨트롤 삭제

맞춤 컨트롤을 삭제하려면 setCustomControl 메서드를 사용하고 삭제하려는 컨트롤의 위치를 지정합니다.

이 위치의 뷰를 null로 설정합니다.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

지도 UI 액세서리

Android용 Navigation SDK는 Android용 Google 지도 애플리케이션에 있는 것과 유사하게 탐색 중에 표시되는 UI 액세서리를 제공합니다. 이 섹션에 설명된 대로 이러한 컨트롤의 공개 상태나 시각적 모양을 조정할 수 있습니다. 여기에서 변경한 사항은 운전자가 다음 이동 시 반영됩니다.

탐색 UI에 허용되는 수정사항에 관한 가이드라인은 정책 페이지를 참고하세요.

코드 보기

탐색 헤더 수정

SupportNavigationFragment.setStylingOptions() 또는 NavigationView.setStylingOptions()를 사용하여 탐색 헤더의 테마와 가능한 경우 헤더 아래에 표시되는 다음 회전 표시기를 변경합니다.

다음 속성을 설정할 수 있습니다.

속성 유형특성
배경 색상
  • 기본 주간 모드 - 탐색 헤더의 주간 색상
  • 보조 주간 모드 - 다음 회전 표시기의 주간 색상
  • 기본 야간 모드 - 탐색 헤더의 야간 색상
  • 보조 야간 모드 - 다음 방향 표시기의 야간 색상
안내를 위한 텍스트 요소
  • 텍스트 색상
  • 글꼴
  • 첫 번째 행의 텍스트 크기
  • 두 번째 행의 텍스트 크기
다음 단계를 위한 텍스트 요소
  • 글꼴
  • 거리 값의 텍스트 색상
  • 거리 값의 텍스트 크기
  • 거리 단위의 텍스트 색상
  • 거리 단위의 텍스트 크기
조작 아이콘
  • 큰 조작 아이콘의 색상
  • 작은 조작 아이콘의 색상
차선 안내
  • 추천 차선의 색상

다음 예는 스타일 지정 옵션을 설정하는 방법을 보여줍니다.

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));

교통정보 레이어 사용 중지

지도의 교통정보 레이어를 사용 설정 또는 사용 중지하려면 GoogleMap.setTrafficEnabled()를 사용하세요. 이 설정은 지도 전체에 표시되는 교통량 밀도 표시에 영향을 미칩니다. 하지만 탐색기가 표시하는 경로의 교통정보 표시에는 영향을 미치지 않습니다.

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));

신호등 및 정지 표지판을 사용 설정하세요.

지도 UI에서 신호등 및 정지 표지판을 사용 설정할 수 있습니다. 운전자는 이 기능을 통해 경로를 따라 신호등 또는 정지 표지판 아이콘을 표시할 수 있으므로 보다 효율적이고 정확한 이동을 위한 더 나은 컨텍스트를 제공할 수 있습니다.

기본적으로 내비게이션 SDK에서는 신호등과 정지 표지판이 사용 중지되어 있습니다. 이 기능을 사용 설정하려면 각 기능의 DisplayOptions를 독립적으로 호출하세요.

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

맞춤 마커 추가

Android용 Navigation SDK가 이제 마커에 Google Maps API를 사용합니다. 자세한 내용은 지도 API 문서를 참고하세요.

플로팅 텍스트

Google 저작자 표시를 포함하지 않는 경우 앱의 어디에나 플로팅 텍스트를 추가할 수 있습니다. Navigation SDK는 지도의 위도/경도 또는 라벨에 텍스트를 고정하는 기능을 지원하지 않습니다. 자세한 내용은 정보 창을 참고하세요.

제한 속도 표시

속도 제한 아이콘을 프로그래매틱 방식으로 표시하거나 숨길 수 있습니다. NavigationView.setSpeedLimitIconEnabled() 또는 SupportNavigationFragment.setSpeedLimitIconEnabled()를 사용하여 속도 제한 아이콘을 표시하거나 숨깁니다. 사용 설정하면 안내 중에 속도 제한 아이콘이 하단 모서리에 표시됩니다. 아이콘은 차량이 운행하는 도로의 속도 제한을 표시합니다. 이 아이콘은 신뢰할 수 있는 속도 제한 데이터를 사용할 수 있는 위치에만 표시됩니다.

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

중심 재설정 버튼이 표시될 때 속도 제한 아이콘이 일시적으로 숨겨집니다.

야간 모드 설정

야간 모드의 동작을 프로그래매틱 방식으로 제어할 수 있습니다. NavigationView.setForceNightMode() 또는 SupportNavigationFragment.setForceNightMode()를 사용하여 야간 모드를 사용 설정 또는 중지하거나 Android용 Navigation SDK가 제어하도록 합니다.

  • AUTO Navigation SDK가 기기 위치 및 현지 시간에 따라 적절한 모드를 결정할 수 있습니다.
  • FORCE_NIGHT: 야간 모드를 강제로 사용 설정합니다.
  • FORCE_DAY: 주간 모드를 강제로 사용 설정합니다.

다음 예는 탐색 프래그먼트 내에서 야간 모드를 강제로 사용 설정하는 방법을 보여줍니다.

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

경로 목록 표시

먼저 뷰를 만들고 계층 구조에 추가합니다.

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));
}

NavigationView에서와 마찬가지로 수명 주기 이벤트를 DirectionsListView에 전달해야 합니다. 예를 들면 다음과 같습니다.

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

대체 경로 숨기기

사용자 인터페이스가 너무 많은 정보로 인해 혼잡해지면 기본 경로보다 적은 대체 경로 (2개)를 표시하거나 대체 경로를 전혀 표시하지 않음으로써 혼란을 줄일 수 있습니다. 경로를 가져오기 전에 다음 열거형 값 중 하나로 RoutingOptions.alternateRoutesStrategy() 메서드를 호출하여 이 옵션을 구성할 수 있습니다.

열거형 값설명
AlternateRoutesStrategy.SHOW_ALL 기본값입니다. 최대 2개의 대체 경로를 표시합니다.
AlternateRoutesStrategy.SHOW_ONE 대체 경로 하나를 표시합니다 (사용 가능한 경우).
AlternateRoutesStrategy.SHOW_NONE 대체 경로를 숨깁니다.

다음 코드 예는 대체 경로를 모두 숨기는 방법을 보여줍니다.

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

이동 진행률 표시줄

내비게이션에 이동 진행률 표시줄이 추가되었습니다.

이동 진행률 표시줄은 내비게이션이 시작될 때 지도의 오른쪽 끝에 표시되는 세로 막대입니다. 사용 설정하면 운전자의 목적지 및 현재 위치와 함께 전체 경로에 관한 개요가 표시됩니다.

운전자는 이를 통해 교통정보와 같은 향후 문제를 확대하지 않고도 빠르게 예측할 수 있습니다. 그런 다음 필요한 경우 이동 경로를 변경할 수 있습니다. 운전자가 이동 경로를 변경하면 진행률 표시줄이 그 지점에서 새 이동이 시작된 것처럼 재설정됩니다.

이동 진행률 표시줄에는 다음과 같은 상태 표시기가 표시됩니다.

  • 경과된 경로: 이동에서 경과된 부분입니다.

  • 현재 위치: 여정에서 운전자의 현재 위치입니다.

  • 트래픽 상태: 예정된 트래픽의 상태입니다.

  • 최종 목적지: 최종 이동 목적지

NavigationView 또는 SupportNavigationFragment에서 setTripProgressBarEnabled() 메서드를 호출하여 이동 진행률 표시줄을 사용 설정합니다. 예를 들면 다음과 같습니다.

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