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

Khi sử dụng SDK điều hướng dành 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 các thành phần và thành phần điều khiển trên giao diện người dùng tích hợp sẵn sẽ xuất hiện trên bản đồ. Bạn cũng có thể điều chỉnh giao diện hình ảnh của giao diện người dùng điều hướng. Hãy tham khảo trang Chính sách để biết nguyên tắc về các 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 chỉnh sửa giao diện người dùng của bản đồ theo hai cách:

• Ánh xạ các chế độ điều khiển trên giao diện người dùng
• Ánh xạ phụ kiện giao diện người dù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 đồ.

Chế độ điều khiển trên giao diện người dùng của 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 đồ nằm ở đầu chế độ xem điều hướng. SDK điều hướng cho Android tự động đặt lại vị trí các thành phần điều khiển tuỳ chỉnh khi bố cục tích hợp sẵn thay đổi. Đối với mỗi vị trí của bố cục, bạn có thể đặt một thành phần điều khiển tuỳ chỉnh. Thành phần điều khiển tuỳ chỉnh có thể là một thành phần trên giao diện người dùng hoặc nếu thiết kế của bạn cần nhiều thành phần hơn, bạn có thể sử dụng ViewGroup với nhiều thành phần trên giao diện người dùng.

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

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

Ví dụ: Những hình ảnh bên dưới là ví dụ về các vị trí của một thành phần điều khiển trên giao diện người dùng để người lái xe đi chung xe biết vị trí của người lái xe trong quá trình đến lấy hàng.

Thêm tiêu đề phụ tuỳ chỉnh

Theo mặc định, các 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 sẽ xuất hiện khi cần, chẳng hạn như với hướng dẫn 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 sử dụng tính năng này, bạn có quyền kiểm soát mọi nội dung tiêu đề phụ mặc định. Nếu khung hiển thị điều hướng có nền, thì nền đó sẽ vẫn giữ nguyên, do 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 tại vị trí đó.

Vị trí tiêu đề phụ tuỳ chỉnh sẽ 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.

1. Tạo Chế độ xem Android bằng thành phần tuỳ chỉnh trên giao diện người dùng hoặc ViewGroup.
2. Tăng cường XML hoặc tạo thực thể cho thành phần hiển thị tuỳ chỉnh để lấy một thực thể của thành phần hiển thị đó nhằm thêm làm tiêu đề phụ.

3. Sử dụng NavigationView.setCustomControl hoặc SupportNavigationFragment.setCustomControl với CustomControlPosition là ).

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

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

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

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

Xoá tiêu đề phụ

Để xoá tiêu đề phụ và quay lại nội dung mặc định, hãy sử dụng phương thức setCustomControl.

Đặt thành phần hiển thị null để xoá thành phần hiển thị này.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Thêm một thành phần điều khiển tuỳ chỉnh vào cuối chế độ xem điều hướng

Ứng dụng của bạn có thể chỉ định một thành phần điều khiển tuỳ chỉnh được căn chỉnh theo cạnh dưới cùng của thành phần hiển thị điều hướng. Khi ứng dụng của bạn thêm chế độ điều khiển tuỳ chỉnh, nút căn giữa lại và biểu trưng Google sẽ di chuyển lên trên để phù hợp với nút này.

1. Tạo Khung hiển thị Android bằng thành phần giao diện người dùng hoặc nhóm khung hiển thị mà bạn muốn thêm.
2. Tạo mảnh hoặc khung hiển thị điều hướng.
3. Gọi phương thức setCustomControl trên thành phần hiển thị hoặc mảnh điều hướng rồi chỉ định thành phần điều khiển và vị trí cần sử dụng.

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ụ sau đây cho thấy một View tuỳ chỉnh được thêm vào một SupportNavigationFragment:

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

Xoá chế độ điều khiển tuỳ chỉnh

Để xoá thành phần điều khiển tuỳ chỉnh, hãy sử dụng phương thức setCustomControl và chỉ định vị trí của thành phần điều khiển mà bạn muốn xoá.

Thiết lập thành phần hiển thị thành null cho vị trí đó.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

Phụ kiện giao diện người dùng của bản đồ

SDK điều hướng dành 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 có trong ứng dụng Google Maps dành cho Android. Bạn có thể điều chỉnh chế độ hiển thị hoặc giao diện trực quan của các chế độ điều khiển này như mô tả trong phần này. Những thay đổi bạn thực hiện ở đây sẽ phản ánh trong phiên điều hướng tiếp theo.

Tham khảo trang Chính sách để xem nguyên tắc về các 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/ẩ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.support.v4.app.ActivityCompat;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.Toast;
import androidx.annotation.NonNull;
import com.google.android.libraries.navigation.Camera;
import com.google.android.libraries.navigation.LatLng;
import com.google.android.libraries.navigation.ListenableResultFuture;
import com.google.android.libraries.navigation.Marker;
import com.google.android.libraries.navigation.MarkerOptions;
import com.google.android.libraries.navigation.NavigationApi;
import com.google.android.libraries.navigation.NavigationMap;
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 NavigationMap 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) getFragmentManager()
                                .findFragmentById(R.id.navigation_fragment);

                        // 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));
        // Get the map.
        mMap = mNavFragment.getMap();
        // Turn off the traffic layer on the map.
        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(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);
                }
            });
        }


        // Set the camera to follow the device location with 'TILTED' driving view.
        mNavFragment.getCamera().followMyLocation(Camera.Perspective.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.fromPlaceId(placeId, null);
        } 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
Các phần tử văn bản cho hướng dẫn	Màu văn bản Phông chữ Cỡ chữ của hàng đầu tiên Cỡ chữ 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 Cỡ chữ 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 điều động 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 đặt 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 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 các chỉ báo về mật độ lưu lượng truy cập hiển thị trên bản đồ nói chung. Tuy nhiên, điều này không ảnh hưởng đến chỉ báo lưu lượng truy cập trên tuyến đường do trình điều hướng biểu thị.

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 hiển thị đèn giao thông hoặc biểu tượng biển báo dừng trên tuyến đường của họ, cung cấp ngữ 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 lại 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.

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

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

SDK điều hướng dành cho Android hiện sử dụng API Google Maps cho điểm đánh dấu. Truy cập 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 cứ đâu trong ứng dụng, miễn là văn bản đó không bao gồm thuộc tính Google. SDK điều hướng không hỗ trợ việc cố định văn bản vào một vĩ độ/kinh độ trên bản đồ hoặc vào một nhãn. Chuyển đến 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ể lập trình để hiện hoặc ẩn biểu tượng giới hạn tốc độ. 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 được bật, biểu tượng giới hạn tốc độ sẽ hiển thị ở góc dưới cùng trong quá trình hướng dẫn. Biểu tượng này hiển thị giới hạn tốc độ của đườ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.

// Hiển thị biểu tượng Giới hạn tốc độ mNavFragment.setSpeedLimitIconEnabled(true);

Biểu tượng giới hạn tốc độ tạm thời bị ẩn khi nút căn giữa được hiển thị.

Lưu ý: Người dùng phải tuân thủ mọi biển báo trên đường. Dữ liệu đăng trong biểu tượng giới hạn tốc độ chỉ để tham khảo. Chúng tôi 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 trường hợp 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 yêu cầu hỗ trợ trên trang Hỗ trợ của Google Cloud.

Đặt chế độ ban đêm

Bạn có thể lập trình để kiểm soát hoạt động của chế độ ban đêm. 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 dành 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í của 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 việc 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 chỉ đường

Trước tiên, hãy tạo chế độ xem rồi thêm chế độ xem đó vào hệ phân cấp của bạn.

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 đó với NavigationView. Ví dụ:

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

Đang ẩn 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ể dẫn đến hành vi ngoài dự kiến.

Khi giao diện người dùng trở nên lộn xộn với quá nhiều thông tin, bạn có thể giảm sự lộn xộn bằng cách hiển thị ít tuyến thay thế hơn so với tuyến mặc định (hai) hoặc bằng cách hoàn toàn không hiển thị các tuyến thay thế. 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ê	Nội dung mô tả
AlternateRoutesStrategy.SHOW_ALL	Mặc định. Hiển thị tối đa 2 tuyến thay thế.
AlternateRoutesStrategy.SHOW_ONE	Hiển thị một tuyến 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 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 chuyến đi là một thanh dọc xuất hiện ở cạnh sau bên phải của bản đồ khi quá trình di chuyển bắt đầu. Khi được bật, chế độ này sẽ hiển thị thông tin tổng quan về toàn bộ chuyến đi, cùng với điểm đến và vị trí hiện tại của người dùng.

Tính năng này mang đến cho người dùng khả năng dự đoán nhanh 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ải phóng to. Sau đó, họ có thể định tuyến lại cho chuyến đi nếu cần. Nếu người dùng định tuyến lại cho chuyến đi, thanh tiến trình sẽ được đặt lại như thể một chuyến đi mới đã bắt đầu từ điểm đó.

Thanh tiến trình chuyến đi cho thấy các chỉ báo trạng thái sau đây:

• Tuyến đường đã trôi qua – phần đã trô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 cùng – điểm đến cuối cùng của chuyến đi.

Lưu ý: Thanh tiến trình chuyến đi chỉ xuất hiện ở 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);