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

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

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

マップ UI コントロール

地図 UI コントロールはナビゲーション ビューの上にあります。Navigation SDK for Android では、組み込みのレイアウトが変更されると、カスタム コントロールが自動的に再配置されます。レイアウトの位置ごとにカスタム コントロールを 1 つ設定できます。カスタム コントロールは 1 つの UI 要素にすることができます。また、設計上より多くの UI 要素が必要な場合は、複数の UI 要素を含む ViewGroup を使用することも可能です。

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

  • SECONDARY_HEADER(縦表示でのみ表示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

たとえば、以下の画像は、配車サービスの運転手に乗車時の乗客の位置情報を通知する UI コントロールのさまざまな位置の例を示しています。

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

カスタムのセカンダリ ヘッダーを追加する

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

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

  1. カスタム UI 要素または ViewGroup を使用して、Android ビューを作成します。
  2. XML をインフレートするか、カスタムビューをインスタンス化して、セカンダリ ヘッダーとして追加するビューのインスタンスを取得します。
  3. SECONDARY_HEADER として CustomControlPosition とともに 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 ビューを作成します。
  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 のアクセサリ

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

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

コードを表示する

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

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

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

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

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

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() を使用します。有効にすると、案内中に下隅に速度制限アイコンが表示されます。このアイコンは、車両が走行している道路の制限速度を示します。このアイコンは、信頼性の高い制限速度データを利用できる場所にのみ表示されます。

// 制限速度アイコンを表示する 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);