Gezinme kullanıcı arayüzünü değiştirme

Android için Navigasyon SDK'sını kullanarak, haritanızda hangi yerleşik kullanıcı arayüzü kontrollerinin ve öğelerinin gösterileceğini belirleyerek haritanızdaki kullanıcı deneyimini değiştirebilirsiniz. Navigasyon kullanıcı arayüzünün görsel görünümünü de ayarlayabilirsiniz. Gezinme kullanıcı arayüzünde kabul edilen değişikliklerle ilgili yönergeler için Politikalar sayfasına bakın.

Bu dokümanda, haritanızın kullanıcı arayüzünü iki şekilde nasıl değiştirebileceğiniz açıklanmaktadır:

Harita kullanıcı arayüzü kontrolleri

Harita kullanıcı arayüzü denetimleri, özel kullanıcı arayüzü öğelerini navigasyon görünümüne yerleştirmek için doğru konumlandırmayı sağlamak amacıyla önerilen yöntemdir. Yerleşik düzen değiştiğinde Android için Navigasyon SDK'sı, özel kontrollerinizi otomatik olarak yeniden konumlandırır. Her konum için aynı anda bir özel kontrol görünümü ayarlayabilirsiniz. Tasarımınız birden fazla kullanıcı arayüzü öğesi gerektiriyorsa bunları bir ViewGroup içine yerleştirip setCustomControl yöntemine iletebilirsiniz.

setCustomControl yöntemi, CustomControlPosition sınıfında tanımlanan konumları sağlar:

  • SECONDARY_HEADER (yalnızca dikey modda gösterilir)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
Dikey yön için özel kontrol konumları.
Dikey yön için özel kontrol konumları
Yatay yön için özel kontrol konumları.
Yatay yön için özel kontrol konumları

Özel kontrol ekleme

  1. Özel kullanıcı arayüzü öğesi veya ViewGroup ile bir Android Görünümü oluşturun.
  2. Görünümün bir örneğini almak için XML'i şişirin veya özel görünümü örneklendirin.
  3. CustomControlPositionenum içinden seçilen özel kontrol konumuyla birlikte NavigationView.setCustomControl veya SupportNavigationFragment.setCustomControl kullanın.

    Aşağıdaki örnekte bir parça oluşturuluyor ve ikincil üstbilgi konumuna özel bir kontrol ekleniyor.

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

Özel denetimi kaldırma

Özel bir kontrolü kaldırmak için setCustomControl yöntemini null görünüm parametresi ve seçili özel kontrol konumuyla çağırın.

Örneğin, aşağıdaki snippet'te tüm özel ikincil başlıklar kaldırılır ve varsayılan içeriğe dönülür:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

Özel kontrol konumları

İkincil başlık

Dikey yön için ikincil başlık özel kontrol konumu.
Dikey yön için ikincil başlık özel kontrol konumu

Bu özel kontrol konumunu kullanmak için CustomControlPosition.SECONDARY_HEADER konumunu setCustomControl'e iletin.

Varsayılan olarak, gezinme modundaki ekran düzenleri birincil başlığın altında ikincil bir başlık için bir konum sağlar. Bu ikincil başlık, şerit yönlendirmesi gibi durumlarda gerektiğinde gösterilir. Uygulamanız, özel içerik için düzenin bu ikincil başlık konumunu kullanabilir. Bu özelliği kullandığınızda varsayılan ikincil başlık içeriğini kontrol edebilirsiniz. Gezinme görünümünüzde arka plan varsa bu arka plan, ikincil başlık tarafından örtülmüş şekilde yerinde kalır. Uygulamanız özel denetimi kaldırdığında, bunun yerine varsayılan ikincil bir başlık görünebilir.

Özel ikincil başlık konumunun üst kenarı, birincil başlığın alt kenarıyla hizalanır. Bu konum yalnızca portrait mode'te desteklenir. landscape mode'te ikincil başlık kullanılamaz ve düzen değişmez.

Alttan başlangıç

Dikey yön için özel kontrol konumunun alttan başlaması.
Dikey yön için özel kontrol konumunu alttan başlat
Yatay yön için özel kontrol konumunun alttan başlaması.
Yatay yön için özel kontrol konumunu alttan başlat

Bu özel kontrol konumunu kullanmak için CustomControlPosition.BOTTOM_START_BELOW konumunu setCustomControl'e iletin.

Bu özel denetim konumu, haritanın alt başlangıç köşesinde yer alır. Hem portrait mode hem de landscape mode'te ETA kartının ve/veya özel altbilginin (veya ikisi de yoksa haritanın alt kısmında) üzerinde yer alır ve yeniden merkezleme düğmesi ile Google logosu da dahil olmak üzere Nav SDK öğeleri, özel kontrol görünümünün yüksekliğini hesaba katmak için yukarı doğru hareket eder. Bu denetim, görünür harita sınırları içinde konumlandırılır. Bu nedenle, haritanın alt veya başlangıç kenarlarına eklenen tüm dolgular bu denetimin konumunu da değiştirir.

Alt uç

Dikey yön için alt uç özel kontrol konumu.
Dikey yön için alt uç özel kontrol konumu
Yatay yön için alt uç özel kontrol konumu.
Yatay yön için alt uç özel kontrol konumu

Bu özel kontrol konumunu kullanmak için CustomControlPosition.BOTTOM_END_BELOW konumunu setCustomControl'e iletin.

Bu özel kontrol konumu, haritanın alt köşesinde yer alır. portrait mode sürümünde, ETA kartının ve/veya özel altbilginin (veya ikisi de yoksa haritanın alt kısmında) üzerinde yer alır. landscape mode sürümünde ise haritanın alt kısmına hizalanır. Bitiş tarafında (LTR'de sağ taraf) görünen tüm Nav SDK öğeleri, özel kontrol görünümünün yüksekliğini hesaba katmak için yukarı taşınır. Bu denetim, görünür harita sınırları içinde konumlandırılır. Bu nedenle, haritanın alt veya uç kenarlarına eklenen dolgular bu denetimin konumunu da değiştirir.

Dikey yön için altbilgi özel kontrol konumu.
Dikey yön için özel altbilgi kontrolü konumu
Yatay yön için altbilgi özel kontrol konumu.
Yatay yön için özel altbilgi denetimi konumu

Bu özel kontrol konumunu kullanmak için CustomControlPosition.FOOTER konumunu setCustomControl'e iletin.

Bu özel kontrol konumu, özel bir altbilgi görünümü için tasarlanmıştır. Nav SDK ETA kartı görünür durumdaysa bu kontrol kartı onun üzerinde yer alır. Aksi takdirde kontrol, haritanın altıyla hizalanır. BOTTOM_START_BELOW ve BOTTOM_END_BELOW özel kontrollerinin aksine bu kontrol, görünür harita sınırları dışında konumlandırılır. Bu, haritaya eklenen dolguların bu kontrolün konumunu değiştirmeyeceği anlamına gelir.

portrait mode'te özel altbilgi tam genişliktedir. Hem CustomControlPosition.BOTTOM_START_BELOW hem de CustomControlPosition.BOTTOM_END_BELOW konumlarındaki özel kontrollerin yanı sıra yeniden merkezleme düğmesi ve Google logosu gibi Nav SDK kullanıcı arayüzü öğeleri, özel kontrol altbilgilerinin üzerinde konumlandırılır. Ok işaretinin varsayılan konumu, özel altbilgi yüksekliğini hesaba katar.

landscape mode'te özel altbilgi, Nav SDK ETA kartı gibi yarı genişliktedir ve başlangıç tarafına (LTR'de sol taraf) hizalanır. CustomControlPosition.BOTTOM_START_BELOW konumundaki özel kontroller ve yeniden ortalama düğmesi ile Google logosu gibi Nav SDK kullanıcı arayüzü öğeleri, özel kontrol altbilgilerinin üzerinde konumlandırılır. CustomControlPosition.BOTTOM_END_BELOW konumundaki özel kontroller ve uç taraftaki (LTR'de sağ taraftaki) tüm Nav SDK kullanıcı arayüzü öğeleri haritanın alt kısmıyla hizalı kalır. Özel bir altbilgi bulunduğunda chevron'un varsayılan konumu değişmez. Bunun nedeni, altbilginin haritanın son tarafına kadar uzanmamasıdır.

CustomControlPosition.BOTTOM_START_BELOW ve CustomControlPosition.BOTTOM_END_BELOW konumlarındaki özel kontrollerin yanı sıra yeniden merkezleme düğmesi ve Google logosu gibi Nav SDK kullanıcı arayüzü öğeleri, özel kontrol altbilgilerinin üzerinde konumlandırılır.

Harita kullanıcı arayüzü aksesuarları

Android için Navigasyon SDK'sı, navigasyon sırasında Android için Google Haritalar uygulamasında bulunanlara benzer kullanıcı arayüzü aksesuarları sağlar. Bu kontrollerin görünürlüğünü veya görsel görünümünü bu bölümde açıklandığı şekilde ayarlayabilirsiniz. Burada yaptığınız değişiklikler bir sonraki gezinme oturumunda yansıtılır.

Gezinme kullanıcı arayüzünde kabul edilen değişikliklerle ilgili kurallar için Politikalar sayfasına bakın.

Kodu görüntüleme

Gezinme üst bilgisini değiştirme

Gezinme başlığının temasını ve varsa başlığın altında görünen sonraki dönüş göstergesini değiştirmek için SupportNavigationFragment.setStylingOptions() veya NavigationView.setStylingOptions() simgesini 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
  • Mesafe birimlerinin metin rengi
  • Mesafe 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 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));

Trafik katmanını kapatma

Haritadaki trafik katmanını etkinleştirmek veya devre dışı bırakmak için GoogleMap.setTrafficEnabled() simgesini kullanın. Bu ayar, haritada gösterilen trafik yoğunluğu göstergelerini bir bütün olarak etkiler. Ancak bu durum, navigasyon cihazı tarafından çizilen rotadaki trafik ipuçlarını etkilemez.

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

Trafik ışıklarını ve dur levhalarını etkinleştirme

Harita kullanıcı arayüzünde trafik ışıklarını ve dur işaretlerini etkinleştirebilirsiniz. Bu özellik sayesinde kullanıcı, rotası boyunca trafik ışıkları veya dur tabelası simgelerinin gösterilmesini etkinleştirerek daha verimli ve doğru seyahatler için daha iyi bir bağlam sağlayabilir.

Navigasyon SDK'sında trafik ışıkları ve dur işaretleri varsayılan olarak devre dışıdır. Bu özelliği etkinleştirmek için her bir özellik için ayrı ayrı DisplayOptions çağrısı yapın.

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

Özel işaretçi ekleme

Android için Navigasyon SDK'sı artık işaretçiler için Google Haritalar API'lerini kullanıyor. Daha fazla bilgi için Maps API belgelerine gidin.

Yüzen metin

Google ilişkilendirmesini kapsaması koşuluyla uygulamanızın herhangi bir yerine yüzen metin ekleyebilirsiniz. Navigasyon SDK'sı, metnin haritada bir enlem/boylam veya etikete sabitlenmesini desteklemez. Daha fazla bilgi için Bilgi pencereleri'ne gidin.

Hız sınırını görüntüleme

Hız sınırı simgesini programatik olarak gösterebilir veya gizleyebilirsiniz. Hız sınırı simgesini göstermek veya gizlemek için NavigationView.setSpeedLimitIconEnabled() veya SupportNavigationFragment.setSpeedLimitIconEnabled() simgesini kullanın. Etkinleştirildiğinde, hız sınırı simgesi yol tarifi sırasında alt köşede gösterilir. Simge, aracın bulunduğu yolun hız sınırını gösterir. Simge yalnızca güvenilir hız sınırı verilerinin bulunduğu konumlarda gösterilir.

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

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

Gece modunu ayarlama

Gece modunun davranışını programatik olarak kontrol edebilirsiniz. Gece modunu açmak veya kapatmak için NavigationView.setForceNightMode() veya SupportNavigationFragment.setForceNightMode() simgesini kullanın ya da Android için Navigasyon SDK'sının kontrol etmesine izin verin.

  • AUTO Navigasyon SDK'sının, cihaz konumuna ve yerel saate göre uygun modu belirlemesine olanak tanır.
  • FORCE_NIGHT, gece modunu etkinleştirir.
  • FORCE_DAY, gün modunu etkinleştirir.

Aşağıdaki örnekte, gece modunun bir gezinme fragmanında etkinleştirilmesini zorunlu kılma gösterilmektedir:

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

Yol tarifi listesini gösterme

Öncelikle görünümü oluşturun ve hiyerarşinize ekleyin.

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

Yaşam döngüsü etkinliklerini, NavigationView'ta olduğu gibi DirectionsListView'e yönlendirdiğinizden emin olun. Örneğin:

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

Alternatif rotaları gizleme

Kullanıcı arayüzü çok fazla bilgiyle karmaşıklaştığında, varsayılan değerden (iki) daha az alternatif rota görüntüleyerek veya hiç alternatif rota görüntülemeyerek karmaşıklığı azaltabilirsiniz. Rotaları getirmeden önce RoutingOptions.alternateRoutesStrategy() yöntemini aşağıdaki listeleme değerlerinden biriyle çağırarak bu seçeneği yapılandırabilirsiniz:

Numaralandırma DeğeriAçıklama
AlternateRoutesStrategy.SHOW_ALL Varsayılan. En fazla iki alternatif rota gösterilir.
AlternateRoutesStrategy.SHOW_ONE Bir alternatif rota (varsa) gösterilir.
AlternateRoutesStrategy.SHOW_NONE Alternatif rotaları gizler.

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

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

Seyahat ilerleme çubuğu

Gezi ilerleme çubuğu gezinme menüsüne eklendi.

Gezi ilerleme çubuğu, navigasyon başladığında haritanın sağ arka kenarında görünen dikey bir çubuktur. Etkinleştirildiğinde, kullanıcının varış noktası ve mevcut konumu ile birlikte tüm seyahate genel bir bakış gösterilir.

Bu sayede kullanıcılar, yakınlaştırmaya gerek kalmadan trafik gibi yaklaşan sorunları hızlıca tahmin edebilir. Gerekirse yolcular seyahat rotasını yeniden belirleyebilir. Kullanıcı seyahat rotasını değiştirirse ilerleme çubuğu, o noktadan yeni bir seyahat başlamış gibi sıfırlanır.

Gezi ilerleme çubuğunda aşağıdaki durum göstergeleri gösterilir:

  • Rota süresi: Seyahatin geçen kısmı.

  • Mevcut konum: Kullanıcının yolculuktaki mevcut konumu.

  • Trafik durumu: Yaklaşan trafiğin durumu.

  • Nihai varış noktası: Son seyahat varış noktası.

NavigationView veya SupportNavigationFragment üzerinde setTripProgressBarEnabled() yöntemini çağırarak gezi ilerleme çubuğunu etkinleştirin. Örneğin:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);