Sửa đổi giao diện người dùng điều hướng

Khi sử dụng SDK Điều hướng cho Android, bạn có thể sửa đổi trải nghiệm người dùng với bản đồ bằng cách xác định những thành phần và chế độ điều khiển giao diện người dùng tích hợp nào xuất hiện trên bản đồ. Bạn cũng có thể điều chỉnh giao diện người dùng điều hướng. Hãy tham khảo trang Chính sách để biết các nguyên tắc về những nội dung sửa đổi được chấp nhận đối với giao diện người dùng điều hướng.

Tài liệu này mô tả cách sửa đổi giao diện người dùng của bản đồ theo hai cách:

• Ánh xạ các chế độ điều khiển giao diện người dùng
• Phụ kiện giao diện người dùng của Maps

Lưu ý: Trong hầu hết các trường hợp, bạn nên sử dụng SupportNavigationFragment, đây là trình bao bọc cho NavigationView, thay vì tương tác trực tiếp với NavigationView. Để biết thêm thông tin, hãy xem phần Các phương pháp hay nhất để tương tác với bản đồ điều hướng .

Thận trọng: SDK Điều hướng của Android không hỗ trợ định kiểu bản đồ dựa trên đám mây bằng mã bản đồ.

Các thành phần điều khiển trên giao diện người dùng của bản đồ

Bạn nên sử dụng các thành phần điều khiển giao diện người dùng của bản đồ để đặt các thành phần giao diện người dùng tuỳ chỉnh trên thành phần hiển thị điều hướng nhằm đảm bảo vị trí phù hợp. Khi bố cục tích hợp thay đổi, Navigation SDK cho Android sẽ tự động định vị lại các chế độ điều khiển tuỳ chỉnh. Bạn có thể đặt một chế độ xem điều khiển tuỳ chỉnh tại mỗi vị trí. Nếu thiết kế của bạn yêu cầu nhiều thành phần trên giao diện người dùng, bạn có thể đặt các thành phần đó vào ViewGroup và truyền vào phương thức setCustomControl.

Phương thức setCustomControl cung cấp các vị trí như được xác định trong enum CustomControlPosition:

• SECONDARY_HEADER (chỉ xuất hiện ở chế độ dọc)
• BOTTOM_START_BELOW
• BOTTOM_END_BELOW
• FOOTER

Vị trí điều khiển tuỳ chỉnh cho hướng dọc

Vị trí điều khiển tuỳ chỉnh cho hướng ngang

Thêm một thành phần điều khiển tuỳ chỉnh

1. Tạo một Khung hiển thị Android bằng thành phần giao diện người dùng tuỳ chỉnh hoặc ViewGroup.
2. Tăng cường XML hoặc tạo bản sao thành phần hiển thị tuỳ chỉnh để lấy một bản sao của thành phần hiển thị.

3. Sử dụng NavigationView.setCustomControl hoặc SupportNavigationFragment.setCustomControl với vị trí điều khiển tuỳ chỉnh đã chọn trong enum CustomControlPosition.

   Lưu ý: Ứng dụng của bạn phải gọi phương thức này trên luồng giao diện người dùng.

   Ví dụ bên dưới tạo một mảnh và thêm một thành phần điều khiển tuỳ chỉnh ở vị trí tiêu đề phụ.

   Lưu ý: Mã trong ví dụ có dấu xuống dòng để hiển thị trong tài liệu. Hãy nhớ xoá những nội dung đó khi thích hợp.

    mNavFragment.setCustomControl(getLayoutInflater().
      inflate(R.layout.your_custom_control, null),
      CustomControlPosition.SECONDARY_HEADER);
    ```
   

Xoá một thành phần điều khiển tuỳ chỉnh

Để xoá một thành phần điều khiển tuỳ chỉnh, hãy gọi phương thức setCustomControl bằng tham số chế độ xem null và vị trí thành phần điều khiển tuỳ chỉnh đã chọn.

Ví dụ: đoạn mã sau đây sẽ xoá mọi tiêu đề phụ tuỳ chỉnh và quay lại nội dung mặc định:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Vị trí điều khiển tuỳ chỉnh

Tiêu đề phụ

Vị trí điều khiển tuỳ chỉnh của tiêu đề phụ theo hướng dọc

Để sử dụng vị trí điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.SECONDARY_HEADER đến setCustomControl.

Theo mặc định, bố cục màn hình ở chế độ điều hướng sẽ cung cấp vị trí cho tiêu đề phụ nằm bên dưới tiêu đề chính. Tiêu đề phụ này xuất hiện khi cần thiết, chẳng hạn như với tính năng chỉ đường theo làn đường. Ứng dụng của bạn có thể sử dụng vị trí tiêu đề phụ này của bố cục cho nội dung tuỳ chỉnh. Khi bạn sử dụng tính năng này, quyền kiểm soát của bạn sẽ bao gồm mọi nội dung tiêu đề phụ mặc định. Nếu thành phần hiển thị điều hướng của bạn có nền, thì nền đó vẫn ở nguyên vị trí, được tiêu đề phụ che phủ. Khi ứng dụng của bạn xoá thành phần điều khiển tuỳ chỉnh, mọi tiêu đề phụ mặc định đều có thể xuất hiện thay thế.

Vị trí tiêu đề phụ tuỳ chỉnh căn chỉnh cạnh trên cùng với cạnh dưới cùng của tiêu đề chính. Vị trí này chỉ được hỗ trợ trong portrait mode. Trong landscape mode, tiêu đề phụ không có sẵn và bố cục không thay đổi.

Bắt đầu từ dưới cùng

Vị trí điều khiển tuỳ chỉnh bắt đầu từ dưới cùng cho hướng dọc

Vị trí điều khiển tuỳ chỉnh bắt đầu ở dưới cùng cho hướng ngang

Để sử dụng vị trí điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.BOTTOM_START_BELOW đến setCustomControl.

Vị trí điều khiển tuỳ chỉnh này nằm ở góc dưới cùng của bản đồ. Trong cả portrait mode và landscape mode, thành phần này nằm phía trên thẻ ETA và/hoặc chân trang tuỳ chỉnh (hoặc dọc theo cuối bản đồ nếu không có thẻ ETA và chân trang tuỳ chỉnh nào), và các thành phần SDK điều hướng bao gồm cả nút căn giữa lại và biểu trưng Google sẽ di chuyển lên để tính đến chiều cao của thành phần hiển thị điều khiển tuỳ chỉnh. Thành phần điều khiển này được đặt bên trong ranh giới bản đồ hiển thị, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới cùng hoặc cạnh bắt đầu của bản đồ cũng sẽ thay đổi vị trí của thành phần điều khiển này.

Đầu dưới

Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng dọc

Vị trí điều khiển tuỳ chỉnh ở cuối dưới cùng cho hướng ngang

Để sử dụng vị trí điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.BOTTOM_END_BELOW đến setCustomControl.

Vị trí điều khiển tuỳ chỉnh này nằm ở góc dưới cùng của bản đồ. Trong portrait mode, phần này nằm phía trên thẻ ETA và/hoặc chân trang tuỳ chỉnh (hoặc dọc theo cuối bản đồ nếu không có thẻ ETA và chân trang tuỳ chỉnh), nhưng trong landscape mode, phần này được căn chỉnh với cuối bản đồ. Mọi thành phần SDK điều hướng hiển thị dọc theo cạnh cuối (bên phải theo hướng từ trái sang phải) sẽ di chuyển lên để tính đến chiều cao của thành phần hiển thị điều khiển tuỳ chỉnh. Thành phần điều khiển này được đặt bên trong ranh giới bản đồ hiển thị, vì vậy, mọi khoảng đệm được thêm vào cạnh dưới cùng hoặc cạnh cuối của bản đồ cũng sẽ thay đổi vị trí của thành phần điều khiển này.

Chân trang

Vị trí của thành phần điều khiển tuỳ chỉnh ở chân trang cho hướng dọc

Vị trí của thành phần điều khiển tuỳ chỉnh ở chân trang cho hướng ngang

Để sử dụng vị trí điều khiển tuỳ chỉnh này, hãy truyền vị trí CustomControlPosition.FOOTER đến setCustomControl.

Vị trí điều khiển tuỳ chỉnh này được thiết kế cho chế độ xem chân trang tuỳ chỉnh. Nếu thẻ ETA của SDK điều hướng hiển thị, thì chế độ điều khiển này sẽ nằm phía trên thẻ đó. Nếu không, thành phần điều khiển sẽ được căn chỉnh với phần dưới cùng của bản đồ. Không giống như các thành phần điều khiển tuỳ chỉnh BOTTOM_START_BELOW và BOTTOM_END_BELOW, thành phần điều khiển này được đặt bên ngoài ranh giới bản đồ hiển thị, nghĩa là mọi khoảng đệm được thêm vào bản đồ sẽ không thay đổi vị trí của thành phần điều khiển này.

Trong portrait mode, chân trang tuỳ chỉnh có chiều rộng đầy đủ. Các thành phần điều khiển tuỳ chỉnh ở cả vị trí CustomControlPosition.BOTTOM_START_BELOW và CustomControlPosition.BOTTOM_END_BELOW, cũng như các thành phần trên giao diện người dùng SDK điều hướng như nút căn giữa lại và biểu trưng Google, được đặt phía trên chân trang của thành phần điều khiển tuỳ chỉnh. Vị trí mặc định của biểu tượng mũi tên kép sẽ tính đến chiều cao chân trang tuỳ chỉnh.

Trong landscape mode, chân trang tuỳ chỉnh có chiều rộng bằng một nửa và được căn chỉnh với phía bắt đầu (bên trái theo LTR), giống như thẻ ETA của SDK điều hướng. Các thành phần điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_START_BELOW và các thành phần giao diện người dùng SDK điều hướng như nút căn giữa lại và biểu trưng Google được đặt phía trên chân trang của thành phần điều khiển tuỳ chỉnh. Các nút điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_END_BELOW và mọi thành phần giao diện người dùng SDK điều hướng dọc theo cạnh cuối (bên phải theo LTR) luôn được căn chỉnh với phần dưới cùng của bản đồ. Vị trí mặc định của biểu tượng mũi tên kép không thay đổi khi có chân trang tuỳ chỉnh vì chân trang không kéo dài đến cuối bản đồ.

Các thành phần điều khiển tuỳ chỉnh ở vị trí CustomControlPosition.BOTTOM_START_BELOW và CustomControlPosition.BOTTOM_END_BELOW, cũng như các thành phần giao diện người dùng SDK điều hướng như nút căn giữa lại và biểu trưng Google được đặt phía trên chân trang điều khiển tuỳ chỉnh.

Phụ kiện giao diện người dùng của Maps

Navigation SDK cho Android cung cấp các phụ kiện giao diện người dùng xuất hiện trong quá trình điều hướng tương tự như các phụ kiện trong ứng dụng Google Maps cho Android. Bạn có thể điều chỉnh chế độ hiển thị hoặc giao diện của các chế độ điều khiển này như mô tả trong phần này. Các thay đổi bạn thực hiện ở đây sẽ được phản ánh trong phiên điều hướng tiếp theo.

Hãy tham khảo trang Chính sách để biết các nguyên tắc về những nội dung sửa đổi được chấp nhận đối với giao diện người dùng điều hướng.

Xem mã

Hiển thị/Ẩn mã Java cho hoạt động điều hướng.

package com.example.navsdkcustomization;

import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CameraPerspective;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.Navigator;
import com.google.android.libraries.navigation.SimulationOptions;
import com.google.android.libraries.navigation.StylingOptions;
import com.google.android.libraries.navigation.SupportNavigationFragment;
import com.google.android.libraries.navigation.Waypoint;

/** An activity that displays a map and a customized navigation UI. */
public class NavigationActivityCustomization extends AppCompatActivity {

  private static final String TAG = NavigationActivityCustomization.class.getSimpleName();
  private Navigator mNavigator;
  private SupportNavigationFragment mNavFragment;
  private GoogleMap mMap;
  // Define the Sydney Opera House by specifying its place ID.
  private static final String SYDNEY_OPERA_HOUSE = "ChIJ3S-JXmauEmsRUcIaWtf4MzE";
  // Set fields for requesting location permission.
  private static final int PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION = 1;
  private boolean mLocationPermissionGranted;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Initialize the Navigation SDK.
    initializeNavigationSdk();
  }

  /**
   * Starts the Navigation SDK and sets the camera to follow the device's location. Calls the
   * navigateToPlace() method when the navigator is ready.
   */
  private void initializeNavigationSdk() {
    /*
     * Request location permission, so that we can get the location of the
     * device. The result of the permission request is handled by a callback,
     * onRequestPermissionsResult.
     */
    if (ContextCompat.checkSelfPermission(
            this.getApplicationContext(), android.Manifest.permission.ACCESS_FINE_LOCATION)
        == PackageManager.PERMISSION_GRANTED) {
      mLocationPermissionGranted = true;
    } else {
      ActivityCompat.requestPermissions(
          this,
          new String[] {android.Manifest.permission.ACCESS_FINE_LOCATION},
          PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION);
    }

    if (!mLocationPermissionGranted) {
      displayMessage(
          "Error loading Navigation SDK: " + "The user has not granted location permission.");
      return;
    }

    // Get a navigator.
    NavigationApi.getNavigator(
        this,
        new NavigationApi.NavigatorListener() {
          /** Sets up the navigation UI when the navigator is ready for use. */
          @Override
          public void onNavigatorReady(Navigator navigator) {
            displayMessage("Navigator ready.");
            mNavigator = navigator;
            mNavFragment =
                (SupportNavigationFragment)
                    getSupportFragmentManager().findFragmentById(R.id.navigation_fragment);

            // Get the map.
            mNavFragment.getMapAsync(
                new OnMapReadyCallback() {
                  @Override
                  public void onMapReady(GoogleMap map) {
                    mMap = map;
                    // Navigate to a place, specified by Place ID.
                    navigateToPlace(SYDNEY_OPERA_HOUSE);
                  }
                });
          }

          /**
           * Handles errors from the Navigation SDK.
           *
           * @param errorCode The error code returned by the navigator.
           */
          @Override
          public void onError(@NavigationApi.ErrorCode int errorCode) {
            switch (errorCode) {
              case NavigationApi.ErrorCode.NOT_AUTHORIZED:
                displayMessage(
                    "Error loading Navigation SDK: Your API key is "
                        + "invalid or not authorized to use the Navigation SDK.");
                break;
              case NavigationApi.ErrorCode.TERMS_NOT_ACCEPTED:
                displayMessage(
                    "Error loading Navigation SDK: User did not accept "
                        + "the Navigation Terms of Use.");
                break;
              case NavigationApi.ErrorCode.NETWORK_ERROR:
                displayMessage("Error loading Navigation SDK: Network error.");
                break;
              case NavigationApi.ErrorCode.LOCATION_PERMISSION_MISSING:
                displayMessage(
                    "Error loading Navigation SDK: Location permission " + "is missing.");
                break;
              default:
                displayMessage("Error loading Navigation SDK: " + errorCode);
            }
          }
        });
  }

  /** Customizes the navigation UI and the map. */
  private void customizeNavigationUI() {
    // Set custom colors for the navigator.
    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));

    mMap.setTrafficEnabled(false);

    // 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(BitmapDescriptorFactory.fromBitmap(destinationMarkerIcon))
              .title("Destination marker"));

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

              // The event has been handled.
              return true;
            }
          });
    }

    // Set the camera to follow the device location with 'TILTED' driving view.
    mMap.followMyLocation(CameraPerspective.TILTED);
  }

  /**
   * Requests directions from the user's current location to a specific place (provided by the
   * Google Places API).
   */
  private void navigateToPlace(String placeId) {
    Waypoint destination;
    try {
      destination =
          Waypoint.builder().setPlaceIdString(placeId).build();
    } catch (Waypoint.UnsupportedPlaceIdException e) {
      displayMessage("Error starting navigation: Place ID is not supported.");
      return;
    }

    // Create a future to await the result of the asynchronous navigator task.
    ListenableResultFuture<Navigator.RouteStatus> pendingRoute =
        mNavigator.setDestination(destination);

    // Define the action to perform when the SDK has determined the route.
    pendingRoute.setOnResultListener(
        new ListenableResultFuture.OnResultListener<Navigator.RouteStatus>() {
          @Override
          public void onResult(Navigator.RouteStatus code) {
            switch (code) {
              case OK:
                // Hide the toolbar to maximize the navigation UI.
                if (getActionBar() != null) {
                  getActionBar().hide();
                }

                // Customize the navigation UI.
                customizeNavigationUI();

                // Enable voice audio guidance (through the device speaker).
                mNavigator.setAudioGuidance(Navigator.AudioGuidance.VOICE_ALERTS_AND_GUIDANCE);

                // Simulate vehicle progress along the route for demo/debug builds.
                if (BuildConfig.DEBUG) {
                  mNavigator
                      .getSimulator()
                      .simulateLocationsAlongExistingRoute(
                          new SimulationOptions().speedMultiplier(5));
                }

                // Start turn-by-turn guidance along the current route.
                mNavigator.startGuidance();
                break;
              // Handle error conditions returned by the navigator.
              case NO_ROUTE_FOUND:
                displayMessage("Error starting navigation: No route found.");
                break;
              case NETWORK_ERROR:
                displayMessage("Error starting navigation: Network error.");
                break;
              case ROUTE_CANCELED:
                displayMessage("Error starting navigation: Route canceled.");
                break;
              default:
                displayMessage("Error starting navigation: " + String.valueOf(code));
            }
          }
        });
  }

  /** Handles the result of the request for location permissions. */
  @Override
  public void onRequestPermissionsResult(
      int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    mLocationPermissionGranted = false;
    switch (requestCode) {
      case PERMISSIONS_REQUEST_ACCESS_FINE_LOCATION:
        {
          // If request is canceled, the result arrays are empty.
          if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            mLocationPermissionGranted = true;
          }
        }
    }
  }

  /**
   * Shows a message on screen and in the log. Used when something goes wrong.
   *
   * @param errorMessage The message to display.
   */
  private void displayMessage(String errorMessage) {
    Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show();
    Log.d(TAG, errorMessage);
  }
}

Sửa đổi tiêu đề điều hướng

Sử dụng SupportNavigationFragment.setStylingOptions() hoặc NavigationView.setStylingOptions() để thay đổi giao diện của tiêu đề điều hướng và chỉ báo rẽ tiếp theo xuất hiện bên dưới tiêu đề (nếu có).

Bạn có thể đặt các thuộc tính sau:

Loại thuộc tính	Thuộc tính
Màu nền	Chế độ ban ngày chính – màu ban ngày của tiêu đề điều hướng Chế độ ban ngày phụ – màu ban ngày của chỉ báo rẽ tiếp theo Chế độ ban đêm chính – màu ban đêm của tiêu đề điều hướng Chế độ ban đêm phụ – màu ban đêm của chỉ báo rẽ tiếp theo
Phần tử văn bản cho hướng dẫn	Màu văn bản Phông chữ Kích thước văn bản của hàng đầu tiên Kích thước văn bản của hàng thứ hai
Phần tử văn bản cho các bước tiếp theo	Phông chữ Màu văn bản của giá trị khoảng cách Kích thước văn bản của giá trị khoảng cách Màu văn bản của đơn vị khoảng cách Cỡ chữ của đơn vị khoảng cách
Biểu tượng thao tác	Màu của biểu tượng thao tác lớn Màu của biểu tượng thao tác nhỏ
Hướng dẫn làn đường	Màu của làn đường hoặc các làn đường được đề xuất

Ví dụ sau đây cho thấy cách thiết lập các tuỳ chọn tạo kiểu:

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

Tắt lớp thông tin về giao thông

Sử dụng GoogleMap.setTrafficEnabled() để bật hoặc tắt lớp giao thông trên bản đồ. Chế độ cài đặt này ảnh hưởng đến toàn bộ chỉ báo mật độ giao thông hiển thị trên bản đồ. Tuy nhiên, điều này không ảnh hưởng đến các chỉ báo giao thông trên tuyến đường do trình điều hướng lập biểu đồ.

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

Bật đèn giao thông và biển báo dừng

Bạn có thể bật đèn giao thông và biển báo dừng trong giao diện người dùng của bản đồ. Với tính năng này, người dùng có thể bật chế độ hiển thị đèn giao thông hoặc biểu tượng dấu dừng dọc theo tuyến đường của họ, cung cấp bối cảnh tốt hơn để có các chuyến đi hiệu quả và chính xác hơn.

Theo mặc định, đèn giao thông và biển báo dừng sẽ bị tắt trong SDK điều hướng. Để bật tính năng này, hãy gọi DisplayOptions cho từng tính năng một cách độc lập.

Lưu ý: Đèn giao thông và biển báo dừng xe chỉ có thể hiển thị trong khi người dùng đang di chuyển.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

Thêm điểm đánh dấu tuỳ chỉnh

SDK chỉ đường cho Android hiện sử dụng API Google Maps cho điểm đánh dấu. Truy cập vào tài liệu về API Maps để biết thêm thông tin.

Văn bản nổi

Bạn có thể thêm văn bản nổi ở bất kỳ vị trí nào trong ứng dụng, miễn là văn bản đó không che khuất phần ghi công của Google. SDK Điều hướng không hỗ trợ việc liên kết văn bản với vĩ độ/kinh độ trên bản đồ hoặc với nhãn. Truy cập vào Cửa sổ thông tin để biết thêm thông tin.

Hiển thị giới hạn tốc độ

Bạn có thể hiển thị hoặc ẩn biểu tượng giới hạn tốc độ theo phương thức lập trình. Sử dụng NavigationView.setSpeedLimitIconEnabled() hoặc SupportNavigationFragment.setSpeedLimitIconEnabled() để hiển thị hoặc ẩn biểu tượng giới hạn tốc độ. Khi bật, biểu tượng giới hạn tốc độ sẽ xuất hiện ở góc dưới cùng trong khi chỉ đường. Biểu tượng này cho biết giới hạn tốc độ của con đường mà xe đang di chuyển. Biểu tượng này chỉ xuất hiện ở những vị trí có dữ liệu giới hạn tốc độ đáng tin cậy.

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

Biểu tượng giới hạn tốc độ sẽ tạm thời bị ẩn khi nút quay lại gần đây xuất hiện.

Lưu ý: Người dùng phải tuân thủ tất cả biển báo được đăng trên đường. Dữ liệu được đăng trong biểu tượng giới hạn tốc độ chỉ dùng để tham khảo. Không thể đảm bảo độ chính xác của dữ liệu giới hạn tốc độ. Bạn có thể báo cáo những điểm không chính xác trong dữ liệu giới hạn tốc độ của chúng tôi bằng cách gửi trường hợp trên trang Hỗ trợ Google Cloud.

Đặt chế độ ban đêm

Bạn có thể kiểm soát hành vi của chế độ ban đêm theo phương thức lập trình. Sử dụng NavigationView.setForceNightMode() hoặc SupportNavigationFragment.setForceNightMode() để bật hoặc tắt chế độ ban đêm hoặc để SDK điều hướng cho Android kiểm soát chế độ này.

• AUTO Cho phép SDK Điều hướng xác định chế độ phù hợp theo vị trí thiết bị và giờ địa phương.
• FORCE_NIGHT buộc bật chế độ ban đêm.
• FORCE_DAY buộc bật chế độ ban ngày.

Ví dụ sau đây cho thấy cách buộc bật chế độ ban đêm trong một mảnh điều hướng:

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

Hiển thị danh sách đường đi

Trước tiên, hãy tạo thành phần hiển thị và thêm thành phần đó vào hệ phân cấp.

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

Hãy nhớ chuyển tiếp các sự kiện trong vòng đời đến DirectionsListView giống như các sự kiện trong NavigationView. Ví dụ:

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

Ẩn các tuyến đường thay thế

Cảnh báo: Tính năng này hiện không tương thích với tính năng tuyến đường ngắn nhất/nhanh nhất. Việc sử dụng cả hai tính năng cùng lúc có thể gây ra hành vi không mong muốn.

Khi giao diện người dùng trở nên lộn xộn do có quá nhiều thông tin, bạn có thể giảm tình trạng lộn xộn bằng cách hiển thị ít tuyến đường thay thế hơn so với mặc định (2) hoặc không hiển thị tuyến đường thay thế nào cả. Bạn có thể định cấu hình tuỳ chọn này trước khi tìm nạp các tuyến bằng cách gọi phương thức RoutingOptions.alternateRoutesStrategy() với một trong các giá trị liệt kê sau:

Giá trị liệt kê	Mô tả
AlternateRoutesStrategy.SHOW_ALL	Mặc định. Hiển thị tối đa 2 tuyến đường thay thế.
AlternateRoutesStrategy.SHOW_ONE	Hiển thị một tuyến đường thay thế (nếu có).
AlternateRoutesStrategy.SHOW_NONE	Ẩn các tuyến đường thay thế.

Ví dụ về mã sau đây minh hoạ cách ẩn hoàn toàn các tuyến đường thay thế.

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

Thanh tiến trình chuyến đi

Thanh tiến trình của chuyến đi là một thanh dọc xuất hiện ở cạnh phải cuối bản đồ khi bắt đầu chỉ đường. Khi được bật, tính năng này sẽ hiển thị thông tin tổng quan về toàn bộ chuyến đi, cùng với vị trí hiện tại và đích đến của người dùng.

Tính năng này giúp người dùng nhanh chóng dự đoán mọi vấn đề sắp tới, chẳng hạn như lưu lượng truy cập, mà không cần phóng to. Sau đó, họ có thể định tuyến lại chuyến đi nếu cần. Nếu người dùng định tuyến lại chuyến đi, thanh tiến trình sẽ đặt lại như thể một chuyến đi mới đã bắt đầu từ thời điểm đó.

Thanh tiến trình chuyến đi hiển thị các chỉ báo trạng thái sau:

• Thời gian đã đi qua trên tuyến đường – phần thời gian đã đi qua của chuyến đi.

• Vị trí hiện tại – vị trí hiện tại của người dùng trong chuyến đi.

• Trạng thái lưu lượng truy cập – trạng thái của lưu lượng truy cập sắp tới.

• Điểm đến cuối – điểm đến cuối cùng của chuyến đi.

Lưu ý: Thanh tiến trình chuyến đi chỉ hiển thị ở chế độ dọc.

Bật thanh tiến trình chuyến đi bằng cách gọi phương thức setTripProgressBarEnabled() trên NavigationView hoặc SupportNavigationFragment. Ví dụ:

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