修改導覽 UI

使用 Android 適用的 Navigation SDK，即可指定要在地圖上顯示哪些內建 UI 控制項和元素，藉此修改地圖的使用者體驗。您也可以調整導覽 UI 的視覺外觀。請參閱政策頁面，瞭解導覽 UI 的可接受修改方式。

本文件說明如何以兩種方式修改地圖的使用者介面：

地圖 UI 控制項

地圖 UI 控制項位於導覽檢視畫面上方。當內建版面配置變更時，Android 適用的 Navigation SDK 會自動重新調整自訂控制項的位置。您可以為版面配置的每個位置設定一個自訂控制項。自訂控制項可以是單一 UI 元素，或者如果您的設計需要更多，可以將 ViewGroup 與多個 UI 元素搭配使用。

setCustomControl 方法會提供 CustomControlPosition 列舉中定義的位置：

  • SECONDARY_HEADER (僅以直向模式顯示)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

舉例來說，下方圖片顯示 UI 控制項的不同位置範例，該控制項用來通知代僱駕駛服務司機在上車期間的目前所在位置。

自訂控制項位置

新增自訂次要標頭

根據預設，導覽模式下的畫面版面配置提供了位於主要標頭下方的次要標頭的位置。需要時 (例如車道指引) 會顯示這個次要標頭。您的應用程式可將版面配置的次要標頭位置用於自訂內容。使用這項功能時，控制項會覆蓋任何預設的次要標頭內容。如果導覽檢視區塊有背景，該背景會保持原樣，並被次要標頭覆蓋。應用程式移除自訂控制項後，任何預設的次要標頭都可以出現在其位置。

自訂次要標題位置會將頂端邊緣與主要標題的底部邊緣對齊。這個位置僅支援 portrait mode。在 landscape mode 中，無法使用次要標頭，版面配置也不會變更。

  1. 使用自訂 UI 元素或 ViewGroup 建立 Android View。
  2. 以 XML 格式顯示或以例項化方式建立自訂檢視畫面，以便取得檢視畫面的例項，並新增為次要標頭。

  3. 將 NavigationView.setCustomControl 或 SupportNavigationFragment.setCustomControl 與 CustomControlPosition 搭配使用，做為 NICARY_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 View。
  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 提供 UI 配件，可在導航期間顯示類似於 Google 地圖 Android 應用程式中的配件。您可以按照本節所述調整這些控制項的顯示設定或外觀。您在這裡所做的變更會在下一個導覽工作階段中反映。

如要瞭解可接受的導覽 UI 修改方式，請參閱政策頁面。

查看程式碼

修改導覽標頭

使用 SupportNavigationFragment.setStylingOptions() 或 NavigationView.setStylingOptions() 變更導航標頭的佈景主題，以及標頭下方顯示的下一個轉彎指標 (如有)。

您可以設定下列屬性：

屬性類型屬性
背景顏色
  • 主要日模式 - 導覽標題的日間顏色
  • 日間模式 - 下一個轉彎指示的日間顏色
  • 主要夜間模式：導覽標頭的夜間顏色
  • 次要夜間模式 - 下一個轉彎指示的夜間顏色
操作說明的文字元素
  • 文字顏色
  • 字型
  • 第一列的文字大小
  • 第二列的文字大小
後續步驟的文字元素
  • 字型
  • 距離值的文字顏色
  • 距離值的文字大小
  • 距離單位的文字顏色
  • 距離單位的文字大小
移動圖示
  • 大型動畫圖示的顏色
  • 小型廠牌圖示的顏色
車道指引
  • 建議車道或車道的顏色

以下範例說明如何設定樣式選項：

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 地圖 API 做為標記。詳情請參閱 Maps API 說明文件。

浮動文字

您可以在應用程式中的任何位置新增浮動文字，前提是該文字不包含 Google 歸因。Navigation SDK 不支援將文字錨定至地圖上的經緯度或標籤。詳情請參閱「資訊視窗」。

顯示速限

你可以透過程式輔助方式顯示或隱藏速限圖示。使用 NavigationView.setSpeedLimitIconEnabled() 或 SupportNavigationFragment.setSpeedLimitIconEnabled() 顯示或隱藏速限圖示。啟用時，速限圖示會在指引的右下角顯示。這個圖示會顯示車輛行經道路的速限。這個圖示只會顯示在可取得可靠速限資料的位置。

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

顯示 recenter 按鈕時，速限圖示會暫時隱藏。

設定夜間模式

您可以透過程式設計控制夜間模式的行為。使用 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));
}

請務必將生命週期事件轉送至 DirectionsListView，就和使用 NavigationView 一樣。例如：

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

隱藏替代路線

如果使用者介面過於雜亂，您可以顯示比預設路徑更少的替代路徑 (第二條)，或是不顯示任何替代路徑，以減少畫面過於雜亂。您可以在擷取路線之前設定這個選項，方法是呼叫 RoutingOptions.alternateRoutesStrategy() 方法，並使用下列其中一個列舉值：

列舉值說明
AlternateRoutesStrategy.SHOW_ALL 預設。最多顯示兩個替代路線。
AlternateRoutesStrategy.SHOW_ONE 顯示一個替代路線 (如有)。
AlternateRoutesStrategy.SHOW_NONE 隱藏替代路線。

以下程式碼範例示範如何完全隱藏替代路線。

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

行程進度列

導航畫面新增行程進度列。

行程進度列是指在導航開始時，在地圖右側邊緣顯示的垂直列。啟用後，系統會顯示整趟行程的概覽，以及使用者的目的地和目前位置。

使用者不必放大，即可快速預測即將發生的問題 (例如流量)。必要時，他們也可以重新規劃路線。如果使用者重新規劃行程，進度列會像從該點開始新行程一樣重設。

行程進度列會顯示下列狀態指標：

  • 路線已經過了 - 行程的經過部分。

  • 目前位置：使用者在行程中目前的位置。

  • 流量狀態：近期流量的狀態。

  • 最終目的地：最終的行程目的地。

在 NavigationView 或 SupportNavigationFragment 上呼叫 setTripProgressBarEnabled() 方法，啟用行程進度列。例如：

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