התאמה אישית של ממשק המשתמש לניווט

ניתן להתאים אישית רכיבים של ממשק המשתמש והמפה של הניווט, ולהוסיף סמנים מותאמים אישית למפה. ההנחיות לגבי שינויים מותרים בממשק המשתמש של הניווט מפורטות בדף 'כללי מדיניות'.

להצגת הקוד

< > הצגה/הסתרה של קוד Java של פעילות הניווט.

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.NavigationFragment;
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.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 NavigationFragment 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 = (NavigationFragment) 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);
    }
}

התאמה אישית של כותרת הניווט

משתמשים ב-NavigationFragment.setStylingOptions() או ב-NavigationView.setStylingOptions() כדי לשנות את העיצוב של כותרת הניווט ואת אינדיקטור הפנייה הבאה שמופיע מתחת לכותרת, אם הוא זמין.

ניתן להגדיר את המאפיינים הבאים:

סוג מאפיין	מאפיינים
צבע הרקע	מצב היום הראשי – הצבע של כותרת הניווט בשעות היום מצב יום משני – צבע היום של אינדיקטור הפנייה הבאה מצב לילה ראשי – הצבע בלילה של כותרת הניווט מצב לילה משני – הצבע בלילה של אינדיקטור הפנייה הבאה
רכיבי טקסט להוראות	צבע הטקסט גופן גודל הטקסט בשורה הראשונה גודל הטקסט של השורה השנייה
רכיבי טקסט לשלבים הבאים	גופן צבע הטקסט של ערך המרחק גודל הטקסט של ערך המרחק צבע הטקסט של יחידות המרחק גודל הטקסט של יחידות המרחק
סמלי התמרון	צבע סמל התמרון הגדול צבע סמל התמרון הקטן
הנחייה בין נתיבים	צבע של נתיב או נתיבים מומלצים

הדוגמה הבאה מציגה איך להגדיר את אפשרויות הסגנון:

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 לא מכוסה. ה-SDK של הניווט לא תומך בעיגון הטקסט לקו רוחב/אורך במפה או לתווית. למידע נוסף, קראו את המאמר חלונות מידע.

הצגת המהירות המותרת

אפשר להציג או להסתיר את סמל מגבלת המהירות באופן פרוגרמטי. אפשר להשתמש ב-NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() או ב-SupportNavigationFragment.setSpeedLimitIconEnabled() כדי להציג או להסתיר את סמל המהירות המותרת. כשההנחיה מופעלת, סמל מגבלת המהירות מופיע בפינה התחתונה במהלך ההנחיה. הסמל מציג את מגבלת המהירות בכביש שבו הרכב נוסע. הסמל מופיע רק במיקומים שבהם יש נתונים אמינים על מגבלת המהירות.

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

סמל מגבלת המהירות מוסתר באופן זמני כשמוצג הלחצן 'מרכז העזרה'.

הערה :הנהגים חייבים לציית לכל השילוט בכבישים. הנתונים שמפורסמים בסמל מגבלת המהירות משמשים רק כקובץ עזר. לא ניתן להבטיח את הדיוק של נתוני מגבלת המהירות. כדי לדווח על אי-דיוקים בנתוני מגבלת המהירות, תוכלו לשלוח בקשה לתמיכה בדף התמיכה של Google Cloud.

הגדרת מצב לילה

אפשר לשלוט באופן פרוגרמטי בהתנהגות של מצב לילה. משתמשים ב-NavigationFragment.setForceNightMode(), ב-NavigationView.setForceNightMode() או ב-SupportNavigationFragment.setForceNightMode() כדי להפעיל או להשבית את מצב הלילה, או לאפשר ל-API של הניווט לשלוט בו.

• AUTO מאפשר ל-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();
}

הסתרת מסלולים חלופיים

כשממשק המשתמש עמוס במידע רב מדי, אפשר להפחית את העומס על ידי הצגת פחות מסלולים חלופיים מברירת המחדל (שני מסלולים), או על ידי אי הצגת מסלולים חלופיים בכלל. אפשר להגדיר את האפשרות הזו לפני אחזור הנתיבים על ידי קריאה ל-method 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);

אזהרה: נכון לעכשיו התכונה הזו לא תואמת לתכונת המסלול הקצר/המהיר ביותר. שימוש בשתי התכונות בו-זמנית עלול לגרום להתנהגות בלתי צפויה.