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

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

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

地図 UI コントロール

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

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

  • SECONDARY_HEADER(ポートレート モードでのみ表示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

この画像は、乗客の現在地をドライバーに知らせる UI コントロールのさまざまな位置の例を示しています。

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

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

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

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

  1. カスタム UI 要素または ViewGroup を使用して Android ビューを作成します。
  2. XML をインフレートするか、カスタムビューをインスタンス化して、セカンダリ ヘッダーとして追加するビューのインスタンスを取得します。
  3. NavigationView.setCustomControl または SupportNavigationFragment.setCustomControl を CustomControlPosition で SECONDARY_HEADER とともに使用します。

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

     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 アクセサリ

Android 向け Navigation SDK には、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);

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

Android 向け Navigation SDK で、マーカーに 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);