自訂導覽使用者介面

您可以自訂導覽使用者介面和地圖的元素，以及在地圖中加入自訂標記。如要瞭解 Navigation UI 可接受的修改規範，請參閱「政策」頁面。

查看程式碼

自訂導覽標題

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

您可以設定下列屬性：

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

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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));

關閉車流量圖層

使用 NavigationMap.setTrafficEnabled() 可啟用或停用地圖上的車流量圖層。這項設定會影響地圖上整體的車流密度指示，但不會影響導覽器繪製路線上的車流量指標。

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

新增自訂標記

您可以在地圖中加入自訂標記，用來標示應用程式或使用者的搜尋點。例如，您可能想要指出路線終點的上車地點。使用 NavigationMap.addMarker() 新增標記，並使用 NavigationMap.setOnMarkerClickListener() 來監聽標記的輕觸動作。

下方程式碼使用儲存在專案的可繪製資源 R.drawable.ic_person_pin_48dp 中的圖示。您可以使用任何適合應用程式的圖片。

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

您可以將自訂圖片指定為標記，但 SDK 目前不支援為這些圖片加上文字標籤。詳情請參閱「自訂標記」。

浮動文字

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

顯示速限

您可以透過程式輔助方式顯示或隱藏速限圖示。 您可以使用 NavigationFragment.setSpeedLimitIconEnabled()、NavigationView.setSpeedLimitIconEnabled() 或 SupportNavigationFragment.setSpeedLimitIconEnabled() 顯示或隱藏速限圖示。啟用後，在指引期間的底部角落會顯示速限圖示。這個圖示代表車輛行駛的道路速限。這個圖示只會顯示在可取得可靠速限資料的位置。

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

系統顯示較近期的按鈕時，會暫時隱藏速限圖示。

設定夜間模式

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

  • AUTO 可讓 Navigation SDK 根據裝置位置和當地時間決定適當的模式。
  • FORCE_NIGHT 會強制開啟夜間模式。
  • FORCE_DAY 會強制開啟日間模式。

以下範例顯示如何在導覽片段中強制開啟夜間模式：

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

顯示路線清單

首先，請建立資料檢視並加進階層。

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，就像和 NaviagtionView 一樣。例如：

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

隱藏替代路線

當使用者介麵包含太多資訊時，您可以選擇顯示比預設 (2) 少的替代路徑，或完全不顯示替代路徑，藉此減少介面雜亂情形。您可以在擷取路徑前設定這個選項，並使用下列其中一個列舉值呼叫 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);