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

Android 用の Navigation SDK を使用すると、 表示する組み込みの UI コントロールと要素を 表示されます。ナビゲーション UI の見た目も調整できます。参照 ポリシーページにアクセスして、 ナビゲーション UI の許容される変更に関するガイドラインです。

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

で確認できます。

マップ UI コントロール

地図 UI コントロールはナビゲーション ビューの上にあります。「 Navigation SDK for Android でカスタム コントロールの位置が自動的に変更される 初期化スクリプトをトリガーしますレイアウトの位置ごとに、 1 つのカスタムコントロールですカスタム コントロールは 1 つの UI 要素にすることも、デザインが 必要な場合は、複数の UI 要素で ViewGroup を使用できます。

setCustomControl メソッド CustomControlPosition で定義されている位置を示します。 enum:

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

たとえば、以下の画像は UI コントロールのさまざまな位置の例です。 乗客の現在地をライドシェアの運転手に知らせる仕組みです。

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

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

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

カスタムのセカンダリ ヘッダー位置は、ヘッダーの上端から あります。この位置は portrait mode でのみサポートされています。イン landscape mode の場合、セカンダリ ヘッダーは使用できず、レイアウトも使用できません。 あります。

  1. Android ビューを作成する カスタム UI 要素または ViewGroup でグループ化します。
  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. Android ビューを作成する 追加する UI 要素またはビューグループに置き換えます。
  2. ナビゲーション ビューまたはフラグメントを作成します。
  3. ナビゲーション ビューまたはフラグメントで setCustomControl メソッドを呼び出し、 使用するコントロールと位置を指定します。
で確認できます。

次の例は、カスタム ViewSupportNavigationFragment:

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 には、アプリの画面上に表示される UI アクセサリが Android 向け Google マップ アプリとはよく似ています。 これらのコントロールの表示 / 非表示は、次の手順で調整できます。 必要があります。ここで加えた変更は、次の期間に反映されます。 あります。

詳しくは、ポリシー ページ 修正案を修正する必要があります。

コードを表示する

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

使用 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 がテキストのアンカーをサポートしていない 地図上の緯度と経度、またはラベルにマッピングできます。[情報] に移動します。 Windows の 情報です。

制限速度を表示する

制限速度アイコンは、プログラムで表示 / 非表示を切り替えることができます。使用 NavigationView.setSpeedLimitIconEnabled() または SupportNavigationFragment.setSpeedLimitIconEnabled() 制限速度アイコンの表示と非表示を切り替えます。有効にすると、速度制限アイコン ガイダンス中に画面下隅に表示されます。アイコンは制限速度を表します 通行する道路を定義します。このアイコンが表示されるのは地域のみです 信頼できる制限速度データを利用できる場所です。

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

中央揃えボタンを押すと、速度制限アイコンが一時的に非表示になります 表示されます。

夜間モードを設定する

夜間モードの動作をプログラムで制御できます。使用 NavigationView.setForceNightMode() または SupportNavigationFragment.setForceNightMode() 夜間モードのオンとオフを切り替えるか、 制御します。

  • AUTO: Navigation SDK が 自動的に適切なモードに切り替わります。
  • FORCE_NIGHT: 夜間モードを強制的にオンにします。
  • FORCE_DAY は、日中モードを強制的にオンにします。

次の例は、ナビゲーション内で夜間モードを強制的にオンにする方法を示しています。 Fragment:

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

ライフサイクル イベントと同様に、DirectionsListView に転送してください。 NavigationView と一緒です。例:

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

ルートの進行状況バー

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

ルートの進行状況バーは、ページの右端に表示される垂直バーです。 ナビゲーション開始時に地図の位置が下がります。有効にすると、プロジェクトの概要が表示され、 ユーザーの目的地と現在地とともに ルート全体を表示します

ユーザーは、 自動的に表示できます。次の場合はルートを変更できます。 できます。ユーザーがルートを変更すると、進行状況バーが新しいルートのようにリセットされます。 その時点からルートが開始されます

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

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

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

  • トラフィックのステータス - 今後のトラフィックのステータス。

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

で確認できます。

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

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