ナビゲーション UI を変更する

Navigation SDK for Android を使用すると、マップに表示する組み込みの UI コントロールや要素を指定することで、地図のユーザー エクスペリエンスを変更できます。ナビゲーション UI の外観を調整することもできます。ナビゲーション UI で許可される変更に関するガイドラインについては、ポリシー ページをご覧ください。

このドキュメントでは、次の 2 つの方法で地図のユーザー インターフェースを変更する方法について説明します。

地図の UI コントロール

ナビゲーション ビューにカスタム UI 要素を配置して適切な位置に配置するには、マップ UI コントロールを使用することをおすすめします。組み込みのレイアウトが変更されると、Navigation SDK for Android によってカスタム コントロールの位置が自動的に変更されます。位置ごとに、一度に 1 つのカスタム コントロール ビューを設定できます。デザインに複数の UI 要素が必要な場合は、それらを ViewGroup 内に配置して setCustomControl メソッドに渡すことができます。

setCustomControl メソッドは、CustomControlPosition 列挙型で定義されている位置を提供します。

  • SECONDARY_HEADER(ポートレート モードでのみ表示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
縦向きのカスタム コントロールの位置。
縦向きのカスタム コントロールの位置
横向き用のカスタム コントロールの位置。
横向き時のカスタム コントロールの位置

カスタム コントロールを追加する

  1. カスタム UI 要素または ViewGroup を使用して Android View を作成します。
  2. XML をインフレートするか、カスタムビューをインスタンス化して、ビューのインスタンスを取得します。
  3. CustomControlPosition 列挙型から選択したカスタム コントロールの位置を指定して、NavigationView.setCustomControl または SupportNavigationFragment.setCustomControl を使用します。

    以下の例では、フラグメントを作成し、セカンダリ ヘッダーの位置にカスタム コントロールを追加しています。

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

カスタム コントロールを削除する

カスタム コントロールを削除するには、null ビュー パラメータと選択したカスタム コントロールの位置を指定して setCustomControl メソッドを呼び出します。

たとえば、次のスニペットは、カスタムのセカンダリ ヘッダーを削除してデフォルトのコンテンツに戻します。

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

カスタム コントロールの位置

Secondary header

縦向きのセカンダリ ヘッダーのカスタム コントロールの位置。
縦向きでの副次的なヘッダーのカスタム コントロールの位置

このカスタム コントロールの位置を使用するには、位置 CustomControlPosition.SECONDARY_HEADERsetCustomControl に渡します。

デフォルトでは、ナビゲーション モードの画面レイアウトは、プライマリ ヘッダーの下にあるセカンダリ ヘッダーの位置を提供します。このセカンダリ ヘッダーは、車線案内など、必要に応じて表示されます。アプリでは、このレイアウトのセカンダリ ヘッダー位置をカスタム コンテンツに使用できます。この機能を使用すると、デフォルトのセカンダリ ヘッダー コンテンツが制御対象になります。ナビゲーション ビューに背景がある場合、その背景はセカンダリ ヘッダーで覆われてそのまま残ります。アプリでカスタム コントロールを削除すると、その場所にデフォルトのセカンダリ ヘッダーが表示されることがあります。

カスタム セカンダリ ヘッダーの位置は、上端がプライマリ ヘッダーの下端と揃います。この位置は portrait mode でのみサポートされています。landscape mode では、セカンダリ ヘッダーを使用できず、レイアウトは変更されません。

ボトムスタート

縦向き時のカスタム コントロールの下端の開始位置。
縦向きでのカスタム コントロールの下部開始位置
横向きのカスタム コントロールの下部開始位置。
横向き時のカスタム コントロールの下端位置

このカスタム コントロールの位置を使用するには、位置 CustomControlPosition.BOTTOM_START_BELOWsetCustomControl に渡します。

このカスタム コントロールの位置は、地図の左下にあります。portrait modelandscape mode の両方で、ETA カードまたはカスタム フッターの上に配置されます(どちらも存在しない場合は地図の下部に配置されます)。また、カスタム コントロール ビューの高さに合わせて、再中央ボタンや Google ロゴなどの Nav SDK 要素が上に移動します。このコントロールは、表示される地図の境界内に配置されるため、地図の下端または左端に追加されたパディングによって、このコントロールの位置も変更されます。

下端

縦向きのカスタム コントロールの下端の位置。
縦向きの下端のカスタム コントロールの位置
横向き時のカスタム コントロールの下端の位置。
横向きの下端のカスタム コントロールの位置

このカスタム コントロールの位置を使用するには、位置 CustomControlPosition.BOTTOM_END_BELOWsetCustomControl に渡します。

このカスタム コントロールの位置は、地図の下端の隅にあります。portrait mode では、到着予定時刻カードやカスタム フッターの上に配置されます(どちらもない場合、地図の下部に配置されます)。landscape mode では、地図の下部に配置されます。端側(LTR では右側)に表示される Nav SDK 要素は、カスタム コントロール ビューの高さに合わせて上に移動します。このコントロールは、表示される地図の境界内に配置されます。地図の下端または端にパディングを追加すると、このコントロールの位置も変更されます。

縦向きのフッター カスタム コントロールの位置。
縦向きでのフッターのカスタム コントロールの位置
横向き時のフッターのカスタム コントロールの位置。
横向き時のフッター カスタム コントロールの位置

このカスタム コントロールの位置を使用するには、位置 CustomControlPosition.FOOTERsetCustomControl に渡します。

このカスタム コントロールの位置は、カスタム フッタービュー用に設計されています。Nav SDK の到着予定時刻カードが表示されている場合は、このコントロールがその上に表示されます。指定されていない場合、コントロールは地図の下部に配置されます。BOTTOM_START_BELOWBOTTOM_END_BELOW のカスタム コントロールとは異なり、このコントロールは表示可能な地図の境界の外側に配置されます。つまり、地図に追加されても、このコントロールの位置は変わりません。

portrait mode では、カスタム フッターはフル幅です。カスタム コントロール フッターの上に、CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW の両方のカスタム コントロールと、中央を再配置するボタンや Google ロゴなどの Nav SDK UI 要素が配置されています。chevron のデフォルトの位置は、カスタム フッターの高さを考慮して設定されます。

landscape mode では、Nav SDK ETA カードと同様に、カスタム フッターは半分幅で開始側(LTR の左側)に揃えられます。CustomControlPosition.BOTTOM_START_BELOW の位置のカスタム コントロールと、再中心ボタンや Google ロゴなどの Nav SDK UI 要素は、カスタム コントロール フッターの上に配置されます。CustomControlPosition.BOTTOM_END_BELOW 位置のカスタム コントロールと、端(LTR の場合は右側)に沿った Nav SDK UI 要素は、地図の下端に沿って配置されます。カスタム フッターが存在する場合、フッターは地図の端まで拡張されないため、矢印のデフォルトの位置は変わりません。

CustomControlPosition.BOTTOM_START_BELOWCustomControlPosition.BOTTOM_END_BELOW の位置にあるカスタム コントロールと、再中央ボタンや Google ロゴなどの Nav SDK UI 要素は、カスタム コントロールのフッターの上に配置されます。

マップ UI のアクセサリ

Navigation SDK for Android には、Android 向け Google マップ アプリと同様のナビゲーション中に表示される UI アクセサリが用意されています。これらのコントロールの表示または外観は、このセクションで説明するように調整できます。ここで行った変更は、次のナビゲーション セッション中に反映されます。

ナビゲーション UI で許可される変更に関するガイドラインについては、ポリシー ページをご覧ください。

コードを表示する

ナビゲーション ヘッダーを変更する

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

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

属性タイプ属性
背景色
  • メインの日中モード - ナビゲーション ヘッダーの昼間の色
  • セカンダリ デイモード - 次の曲がり角インジケーターの昼間の色
  • プライマリ ナイトモード - ナビゲーション ヘッダーの夜間の色
  • セカンダリ ナイトモード - 次の曲がり角インジケーターの夜間色
手順のテキスト要素
  • テキストの色
  • フォント
  • 1 行目のテキストサイズ
  • 2 行目のテキストサイズ
次のステップのテキスト要素
  • フォント
  • 距離値のテキストの色
  • 距離値のテキストサイズ
  • 距離単位のテキストの色
  • 距離単位のテキストサイズ
操作アイコン
  • 大きな操作アイコンの色
  • 小さい操作アイコンの色
車線案内
  • 推奨レーンの色

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

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 で有効にできます。この機能により、ユーザーはルート沿いの信号機や一時停止標識アイコンの表示を有効にして、より効率的で正確な移動に役立つコンテキストを提供できます。

デフォルトでは、Navigation SDK では信号と停止標識は無効になっています。この機能を有効にするには、機能ごとに DisplayOptions を個別に呼び出します。

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

カスタム マーカーを追加する

Navigation SDK for Android では、マーカーに Google Maps API が使用されるようになりました。詳しくは、Maps API のドキュメントをご覧ください。

フローティング テキスト

フローティング テキストは、Google のアトリビューションを覆わない限り、アプリ内の任意の場所に追加できます。Navigation SDK では、地図上の緯度 / 経度やラベルにテキストを固定することはできません。詳しくは、情報ウィンドウをご覧ください。

制限速度を表示する

制限速度アイコンは、プログラムで表示 / 非表示を切り替えることができます。制限速度アイコンの表示と非表示を切り替えるには、NavigationView.setSpeedLimitIconEnabled() または SupportNavigationFragment.setSpeedLimitIconEnabled() を使用します。有効にすると、ナビゲーション中に速度制限アイコンが画面の下隅に表示されます。このアイコンは、車両が走行している道路の制限速度を示します。このアイコンは、信頼できる制限速度データが利用可能な場所にのみ表示されます。

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

中央揃えボタンが表示されている場合、速度制限アイコンは一時的に非表示になります。

夜間モードを設定する

夜間モードの動作はプログラムで制御できます。夜間モードのオンとオフを切り替えるには、NavigationView.setForceNightMode() または SupportNavigationFragment.setForceNightMode() を使用します。また、Navigation SDK for Android によって制御することもできます。

  • 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 別のルートがある場合は、そのルートを 1 つ表示します。
AlternateRoutesStrategy.SHOW_NONE 別のルートを非表示にします。

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

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

ルートの進行状況バー

ナビゲーションに追加されたルートの進行状況バー。

ルートの進行状況バーは、ナビを開始すると地図の右端に縦方向に表示されるバーです。有効にすると、ルート全体の概要と、ユーザーの目的地と現在地が表示されます。

これにより、ユーザーはズームインしなくても、交通などの今後の問題をすばやく予測できます。必要に応じてルートを変更できます。ユーザーがルートを変更すると、その地点から新しいルートとして開始されたかのように、進行状況バーがリセットされます。

ルートの進行状況バーには、次のステータス インジケーターが表示されます。

  • ルートの経過時間 - ルートの経過時間。

  • 現在の位置 - ルート内のユーザーの現在地。

  • 交通状況 - 今後の交通状況。

  • 最終目的地 - 最終的な目的地。

NavigationView または SupportNavigationFragmentsetTripProgressBarEnabled() メソッドを呼び出して、ルートの進行状況バーを有効にします。例:

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