탐색 사용자 인터페이스 맞춤설정

탐색 사용자 인터페이스와 지도의 요소를 맞춤설정하고 지도에 맞춤 마커를 추가할 수 있습니다. 탐색 UI에 허용되는 수정사항에 관한 가이드라인은 정책 페이지를 참고하세요.

코드 보기

탐색 헤더 맞춤설정

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

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

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

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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));

교통정보 레이어 사용 중지

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

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

맞춤 마커 추가

지도에 맞춤 마커를 추가하여 애플리케이션 또는 사용자의 관심 장소를 나타낼 수 있습니다. 예를 들어 경로 끝에 있는 승차 위치를 나타낼 수 있습니다. NavigationMap.addMarker()를 사용하여 마커를 추가하고 NavigationMap.setOnMarkerClickListener()를 사용하여 마커의 탭을 리슨합니다.

아래 코드는 프로젝트의 드로어블 리소스인 R.drawable.ic_person_pin_48dp에 저장된 아이콘을 사용합니다. 앱에 맞는 모든 이미지를 사용할 수 있습니다.

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

맞춤 이미지를 마커로 지정할 수 있지만 SDK는 현재 이러한 이미지에 텍스트로 라벨을 지정하는 기능을 지원하지 않습니다. 자세한 내용은 마커 맞춤설정을 참고하세요.

플로팅 텍스트

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

제한 속도 표시

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

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

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

야간 모드 설정

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

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

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

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

경로 목록 표시

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

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

NaviagtionView에서처럼 수명 주기 이벤트를 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);