تخصيص واجهة مستخدم التنقل

يمكنك تخصيص عناصر واجهة مستخدم التنقل والخريطة، وإضافة علامات مخصصة إلى الخريطة. يُرجى الرجوع إلى صفحة السياسات للحصول على إرشادات حول التعديلات المقبولة على واجهة مستخدم التنقل.

الاطّلاع على الرمز

< > إظهار/إخفاء رمز جافا لنشاط التنقل.

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() لتفعيل الوضع الليلي أو إيقافه، أو اسمح لحزمة تطوير البرامج (SDK) الخاصة بميزة "التنقل" بالتحكّم فيه.

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

إخفاء المسارات البديلة

عندما تصبح واجهة المستخدم مزدحمة بكم كبير جدًا من المعلومات، يمكنك تقليل الفوضى من خلال عرض مسارات بديلة أقل من المسار التلقائي (مساران)، أو من خلال عدم عرض أي مسارات بديلة على الإطلاق. يمكنك ضبط هذا الخيار قبل استرجاع المسارات من خلال استدعاء الطريقة 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);

تحذير: هذه الميزة غير متوافقة حاليًا مع ميزة المسار الأقصر أو الأسرع. قد يؤدي استخدام الميزتَين في الوقت نفسه إلى حدوث سلوك غير متوقّع.