Gezinme Kullanıcı Arayüzünü Özelleştirme

Gezinme kullanıcı arayüzü ve harita öğelerini özelleştirebilir ve haritaya özel işaretçiler ekleyebilirsiniz. Gezinme arayüzünde kabul edilebilir değişiklikler ile ilgili yönergeler için Politikalar sayfasına bakın.

Kodu inceleyin

< > Gezinme etkinliği için Java kodunu Göster/Gizleyin.

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

Gezinme başlığını özelleştirme

Gezinme başlığının temasını ve mümkün olduğunda başlığın altında görünen sonraki dönüş göstergesini değiştirmek için NavigationFragment.setStylingOptions() veya NavigationView.setStylingOptions() aracını kullanın.

Aşağıdaki özellikleri ayarlayabilirsiniz:

Özellik Türü	Özellikler
Arka plan rengi	Birincil gün modu - gezinme başlığının gündüz rengi İkincil gün modu - sonraki dönüş göstergesinin gündüz rengi Birincil gece modu - gezinme başlığının gece rengi İkincil gece modu - sonraki dönüş göstergesinin gece rengi
Talimatlar için metin öğeleri	Metin rengi Yazı tipi İlk satırın metin boyutu İkinci satırın metin boyutu
Sonraki adımlar için metin öğeleri	Yazı tipi Mesafe değerinin metin rengi Mesafe değerinin metin boyutu Uzaklık birimlerinin metin rengi Uzaklık birimlerinin metin boyutu
Manevra simgeleri	Büyük manevra simgesinin rengi Küçük manevra simgesinin rengi
Şerit yardımı	Önerilen şerit veya şeritlerin rengi

Aşağıdaki örnekte, stil seçeneklerinin nasıl ayarlanacağı gösterilmektedir:

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

Trafik katmanını kapatma

NavigationMap.setTrafficEnabled() düğmesini kullanarak trafik katmanını etkinleştirin veya devre dışı bırakın. Bu ayar, haritada gösterilen trafik yoğunluğunun göstergelerini bir bütün olarak etkiler, ancak rota üzerinde gezgin tarafından çizilen trafik göstergelerini etkilemez.

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

Özel işaretçiler ekleme

Uygulamanız veya kullanıcılarınız için önemli yerleri göstermek üzere haritaya özel işaretçiler ekleyebilirsiniz. Örneğin, rotanın sonunda başlangıç noktasını belirtebilirsiniz. İşaretçi eklemek için NavigationMap.addMarker(), işaretçiye dokunmaları dinlemek için NavigationMap.setOnMarkerClickListener() kullanın.

Aşağıdaki kodda projenin çekilebilir kaynaklarında (R.drawable.ic_person_pin_48dp) depolanan bir simge kullanılmaktadır. Uygulamanıza uygun herhangi bir resmi kullanabilirsiniz.

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

İşaretçi olarak özel bir görüntü belirtebilirsiniz ancak SDK, şu anda bu görüntülerin metinle etiketlenmesini desteklememektedir. Daha fazla bilgi için İşaretçileri Özelleştirme bölümüne bakın.

Kayan metin

Google ilişkilendirmesi geçerli olmadığı sürece uygulamanızın herhangi bir yerine kayan metin ekleyebilirsiniz. Gezinme SDK'sı, metnin haritadaki bir enlem/boylama veya bir etikete bağlanmasını desteklemez. Daha fazla bilgi için Bilgi pencereleri konusuna bakın.

Hız sınırını göster

Hız sınırı simgesini programlı olarak gösterebilir veya gizleyebilirsiniz. Hız sınırı simgesini görüntülemek veya gizlemek için NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() veya SupportNavigationFragment.setSpeedLimitIconEnabled() simgesini kullanın. Etkinleştirildiğinde, rehberlik sırasında alt köşede hız sınırı simgesi görüntülenir. Simge, aracın gittiği yolun hız sınırını gösterir. Simge yalnızca güvenilir hız sınırı verilerinin bulunduğu yerlerde görünür.

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

Yeniden ortalama düğmesi görüntülendiğinde hız sınırı simgesi geçici olarak gizlenir.

Not: Sürücüler yoldaki tüm tabelalara uymalıdır. Hız sınırı simgesinde yayınlanan veriler yalnızca referans işlevi görür. Hız sınırı verilerinin doğruluğu garanti edilemez. Google Cloud Destek sayfasında destek kaydı oluşturarak hız sınırı verilerimizdeki hataları bildirebilirsiniz.

Gece modunu ayarla

Gece modunun davranışını programlı olarak kontrol edebilirsiniz. Gece modunu açmak veya kapatmak için NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() ya da SupportNavigationFragment.setForceNightMode() kullanın ya da bu özelliği Gezinme SDK'sinin kontrol etmesine izin verin.

• AUTO Gezinme SDK'sının cihaz konumuna ve yerel saate göre uygun modu belirlemesine olanak tanır.
• FORCE_NIGHT, gece modunu açık kalmaya zorlar.
• FORCE_DAY, gün modunu açık olmaya zorlar.

Aşağıdaki örnekte, bir gezinme parçası içinde gece modunun açılmaya zorlanması gösterilmektedir:

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

Yol tarifi listesini görüntüle

İlk olarak, görünümü oluşturun ve hiyerarşinize ekleyin.

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

Yaşam döngüsü olaylarını, NaviagtionView ile olduğu gibi DirectionsListView'a yönlendirdiğinizden emin olun. Örneğin:

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

Alternatif rotalar gizleniyor

Kullanıcı arayüzü çok fazla bilgiyle karıştığında, varsayılandan (iki) daha az alternatif rota görüntüleyerek veya hiç alternatif rota göstermeyerek karmaşıklığı azaltabilirsiniz. Bu seçeneği, rotaları getirmeden önce aşağıdaki numaralandırma değerlerinden biriyle RoutingOptions.alternateRoutesStrategy() yöntemini çağırarak yapılandırabilirsiniz:

Sıralama Değeri	Açıklama
AlternateRoutesStrategy.SHOW_ALL	Varsayılan. En fazla iki alternatif rota görüntülenir.
AlternateRoutesStrategy.SHOW_ONE	Bir alternatif rota (varsa) görüntüler.
AlternateRoutesStrategy.SHOW_NONE	Alternatif rotaları gizler.

Örnek

Aşağıdaki kod örneğinde, alternatif rotaların tamamen nasıl gizleneceği gösterilmektedir.

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

Uyarı: Bu özellik şu anda en kısa/en hızlı rota özelliğiyle uyumlu değildir. İki özelliğin de aynı anda kullanılması beklenmedik davranışlara yol açabilir.