ナビゲーション ユーザー インターフェースをカスタマイズする

ナビゲーション ユーザー インターフェースと地図の要素をカスタマイズし、カスタム マーカーを地図に追加できます。Navigation UI に対して許容される変更のガイドラインについては、ポリシーページをご覧ください。

コードの確認

ナビゲーション ヘッダーをカスタマイズする

NavigationFragment.setStylingOptions() または NavigationView.setStylingOptions() を使用して、ナビゲーション ヘッダーのテーマと、ヘッダーの下に表示される次のターン インジケーター(使用可能な場合)を変更します。

次の属性を設定できます。

属性タイプ属性
背景色
  • メインの日モード - ナビゲーション ヘッダーの日中の色
  • 第二日モード - 次のターンインジケータの昼間色
  • メインの夜間モード - ナビゲーション ヘッダーの夜間の色
  • サブの夜間モード - 次のターン インジケーターの夜間の色
手順のテキスト要素
  • テキストの色
  • Font
  • 1 行目の文字サイズ
  • 2 行目の文字サイズ
次のステップのテキスト要素
  • Font
  • 距離値のテキストの色
  • 距離値のテキストサイズ
  • 距離単位のテキストの色
  • 距離単位のテキストサイズ
運転アイコン
  • 大きい操縦アイコンの色
  • 小さな操縦アイコンの色
車線案内
  • 推奨車線の色

次の例は、スタイル オプションを設定する方法を示しています。

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 代替ルートを 1 つ表示します(利用可能な場合)。
AlternateRoutesStrategy.SHOW_NONE 別のルートを非表示にします。

次のコードサンプルは、代替ルートを完全に非表示にする方法を示しています。

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