修改導覽 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 檢視畫面。
  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 檢視畫面。
  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 Maps for Android 應用程式中的 UI 配件。您可以按照本節所述調整這些控制項的顯示設定或外觀。您在這裡所做的變更會反映到下一個導航工作階段。

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

查看程式碼

修改導覽標頭

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

您可以設定以下屬性：

屬性類型屬性
背景顏色
  • 主要日模式 - 導覽標題的日間顏色
  • 日間模式 - 下一個轉彎指示的日間顏色
  • 主要夜間模式 - 導覽標題的夜間顏色
  • 次要夜間模式 - 下一個轉彎指示的夜間顏色
操作說明的文字元素
  • 文字顏色
  • Font
  • 第一列的文字大小
  • 第二列的文字大小
後續步驟的文字元素
  • 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() 顯示或隱藏速限圖示。啟用時，速限圖示會在指引的右下角顯示。圖示會顯示車輛行駛的速限。圖示只會顯示在可使用可靠的速限資料的位置。

// 顯示「速限」圖示 mNavFragment.setSpeedLimitIconEnabled(true);

顯示最近使用的按鈕時，速限圖示會暫時隱藏。

設定夜間模式

您可以透過程式輔助方式控制夜間模式的行為。您可以使用 NavigationView.setForceNightMode() 或 SupportNavigationFragment.setForceNightMode() 開啟或關閉夜間模式，或由 Android 版 Navigation SDK 控制夜間模式。

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