رابط کاربری ناوبری را سفارشی کنید

می توانید عناصر رابط کاربری ناوبری و نقشه را سفارشی کنید و نشانگرهای سفارشی را به نقشه اضافه کنید. برای دستورالعمل‌های مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خط‌مشی‌ها مراجعه کنید.

کد را ببینید

< > نمایش/پنهان کردن کد جاوا برای فعالیت پیمایش.

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 پوشش داده نشود. Navigation SDK از اتصال متن به طول/طول جغرافیایی روی نقشه یا برچسب پشتیبانی نمی‌کند. برای اطلاعات بیشتر، پنجره های اطلاعات را ببینید.

نمایش محدودیت سرعت

شما می توانید به صورت برنامه ریزی شده نماد محدودیت سرعت را نشان داده یا پنهان کنید. از NavigationFragment.setSpeedLimitIconEnabled() ، NavigationView.setSpeedLimitIconEnabled() یا SupportNavigationFragment.setSpeedLimitIconEnabled() برای نمایش یا پنهان کردن نماد محدودیت سرعت استفاده کنید. وقتی فعال باشد، نماد محدودیت سرعت در گوشه پایینی در حین راهنمایی نمایش داده می شود. این نماد محدودیت سرعت جاده ای را که وسیله نقلیه در آن حرکت می کند را نشان می دهد. این نماد فقط در مکان‌هایی ظاهر می‌شود که داده‌های محدودیت سرعت قابل اعتماد در دسترس هستند.

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

هنگامی که دکمه جدیدتر نمایش داده می شود، نماد محدودیت سرعت به طور موقت پنهان می شود.

تذکر: رانندگان باید کلیه علائم نصب شده در جاده را رعایت کنند. داده های ارسال شده در نماد محدودیت سرعت فقط به عنوان مرجع عمل می کند. صحت داده های محدودیت سرعت را نمی توان تضمین کرد. می‌توانید با تشکیل پرونده در صفحه Google Cloud Support، نادرستی در داده‌های محدودیت سرعت ما را گزارش کنید.

حالت شب را تنظیم کنید

شما می توانید به صورت برنامه ریزی شده رفتار حالت شب را کنترل کنید. از 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));
}

مطمئن شوید که رویدادهای چرخه زندگی را دقیقاً مانند NaviagtionView به DirectionsListView ارسال کنید. مثلا:

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

هشدار: این ویژگی در حال حاضر با ویژگی کوتاه ترین/سریع ترین مسیر سازگار نیست. استفاده همزمان از هر دو ویژگی می تواند رفتار غیرمنتظره ای ایجاد کند.