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

Android için Navigation SDK'yı kullanarak, yerleşik kullanıcı arayüzü kontrolleri ve öğelerinden hangilerinin haritada görüneceğini belirleyerek haritanızla ilgili kullanıcı deneyimini değiştirebilirsiniz. Ayrıca gezinme kullanıcı arayüzünün görsel görünümünü de ayarlayabilirsiniz. Gezinme kullanıcı arayüzünde kabul edilebilir değişikliklerle ilgili yönergeler için Politikalar sayfasına bakın.

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

Harita kullanıcı arayüzü kontrolleri

Özel kullanıcı arayüzü öğelerini gezinme görünümüne yerleştirmek için uygun konumlandırma amacıyla harita kullanıcı arayüzü denetimlerini kullanın. Yerleşik düzen değiştiğinde Android için Navigation SDK, özel kontrollerinizi otomatik olarak yeniden konumlandırır. Her pozisyon 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ştirebilir ve setCustomControl yöntemine iletebilirsiniz.

setCustomControl yöntemi, CustomControlPosition numaralandırmasında tanımlandığı şekilde konumlar sağlar:

  • SECONDARY_HEADER (yalnızca dikey modda görünür)
  • 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 Android View oluşturun.
  2. XML'yi genişletin veya görünümün bir örneğini almak için özel görünümü oluşturun.
  3. CustomControlPosition enum'dan seçilen özel kontrol konumuyla NavigationView.setCustomControl veya NavigationFragment.setCustomControl kullanın.

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

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

Özel kontrolü kaldırma

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

Örneğin, aşağıdaki snippet, özel ikincil üstbilgileri kaldırır ve varsayılan içeriğe döner:

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 konumu CustomControlPosition.SECONDARY_HEADER ile setCustomControl'ye iletin.

Varsayılan olarak, gezinme modundaki ekran düzenlerinde birincil başlığın altında bulunan ikincil başlık için bir konum sağlanır. Bu ikincil başlık, gerektiğinde (ör. şerit yardımı) gösterilir. Uygulamanız, özel içerik için düzenin bu ikincil başlık konumunu kullanabilir. Bu özelliği kullandığınızda, kontrolünüz varsayılan ikincil başlık içeriğini kapsar. Gezinme görünümünüzde arka plan varsa bu arka plan, ikincil başlık tarafından kaplanarak yerinde kalır. Uygulamanız özel kontrolü kaldırdığında, yerine herhangi bir varsayılan ikincil başlık görünebilir.

Özel ikincil başlık konumu, üst kenarını birincil başlığın alt kenarıyla aynı hizaya getirir. Bu pozisyon yalnızca portrait mode'da desteklenir. landscape mode içinde ikincil başlık kullanılamaz ve düzen değişmez.

Alttan başlama

Dikey yön için özel kontrolün başlangıçtaki alt konumu.
Dikey yön için özel kontrolün başlangıçtaki alt konumu
Yatay yön için alttan başlama özel kontrol konumu.
Yatay yön için alttan başlama özel kontrol konumu

Bu özel kontrol konumunu kullanmak için konumu CustomControlPosition.BOTTOM_START_BELOW ile setCustomControl'ye iletin.

Bu özel kontrol konumu, haritanın sol alt köşesinde yer alır. Hem portrait mode hem de landscape mode içinde, TVS kartının ve/veya özel altbilginin üzerinde (ikisi de yoksa haritanın en altında) yer alır. Yeniden ortalama düğmesi ve Google logosu gibi Nav SDK öğeleri, özel kontrol görünümünün yüksekliğini hesaba katmak için yukarı taşınır. Bu kontrol, görünür harita sınırları içinde yer alır. Bu nedenle, haritanın alt veya başlangıç kenarlarına eklenen herhangi bir dolgu, bu kontrolün konumunu da değiştirir.

Alt uç

Dikey yön için özel kontrolün alt uç konumu.
Dikey yön için alt uçtaki özel kontrol konumu
Yatay yön için özel denetim konumunun alt ucu.
Yatay yön için alt uç özel kontrol konumu

Bu özel kontrol konumunu kullanmak için konumu CustomControlPosition.BOTTOM_END_BELOW ile setCustomControl'ye iletin.

Bu özel kontrol konumu, haritanın alt uç köşesinde yer alır. portrait mode, tahmini varış zamanı kartının ve/veya özel altbilginin üzerinde (ikisi de yoksa haritanın alt kısmında) yer alır ancak landscape mode içinde haritanın alt kısmıyla hizalanır. Son tarafta (soldan sağa dillerde 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 kontrol, görünür harita sınırları içinde yer alır. Bu nedenle, haritanın alt veya uç kenarlarına eklenen herhangi bir dolgu, bu kontrolün konumunu da değiştirir.

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

Bu özel kontrol konumunu kullanmak için konumu CustomControlPosition.FOOTER ile setCustomControl'ye iletin.

Bu özel kontrol konumu, özel bir altbilgi görünümü için tasarlanmıştır. Nav SDK ETA kartı görünürse bu kontrol onun üzerinde yer alır. Aksi takdirde, kontrol haritanın alt kısmıyla hizalanır. BOTTOM_START_BELOW ve BOTTOM_END_BELOW özel kontrollerinden farklı olarak bu kontrol, görünür harita sınırlarının dışında konumlandırılır. Bu nedenle, haritaya eklenen dolgu, bu kontrolün konumunu değiştirmez.

portrait mode içinde özel altbilgi tam genişliktedir. Hem CustomControlPosition.BOTTOM_START_BELOW hem de CustomControlPosition.BOTTOM_END_BELOW konumlarındaki özel kontrollerin yanı sıra yeniden ortalama düğmesi ve Google logosu gibi Nav SDK kullanıcı arayüzü öğeleri, özel kontrol altbilgisinin üzerinde konumlandırılır. Chevron'un varsayılan konumu, özel altbilgi yüksekliğini dikkate alır.

landscape mode bölümünde, özel altbilgi yarı genişlikte ve Nav SDK ETA kartında olduğu gibi başlangıç tarafına (LTR'de sol taraf) hizalanmıştı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 altbilgisinin üzerinde konumlandırılır. CustomControlPosition.BOTTOM_END_BELOW Konumdaki özel kontroller ve son taraftaki (LTR'de sağ taraf) tüm Nav SDK kullanıcı arayüzü öğeleri, haritanın alt kısmı ile hizalı kalır. Altbilgi, haritanın son tarafına kadar uzanmadığı için özel bir altbilgi olduğunda şerit simgesinin varsayılan konumu değişmez.

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

Harita kullanıcı arayüzü aksesuarları

Android için Navigasyon SDK'sı, Android için Google Haritalar uygulamasında bulunanlara benzer şekilde navigasyon sırasında görünen 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 edilebilir değişikliklerle ilgili yönergeler için Politikalar sayfasına bakın.

Kodu görüntüleme

Hedef vurgulama ve girişler

placeID ile bir hedef oluşturulduğunda, mümkün olduğunda hedef bina vurgulanır ve giriş simgesi gösterilir. Bu görsel ipuçları, kullanıcıların hedeflerini ayırt etmesine ve hedeflerine gitmesine yardımcı olur.

placeID içeren bir hedef oluşturmak için Waypoint.Builder.setPlaceIdString() yöntemini kullanın.

Gezinme üstbilgisini değiştirme

Gezinme başlığının ve başlığın altında görünen sonraki dönüş göstergesinin temasını değiştirmek için NavigationFragment.setStylingOptions() veya NavigationView.setStylingOptions() simgesini kullanın.

Aşağıdaki özellikleri ayarlayabilirsiniz:

Özellik TürüÖzellikler
Arka plan rengi
  • Birincil gündüz modu: Gezinme başlığının gündüz rengi
  • İkincil gündüz modu: Sıradaki dönüş göstergesinin gündüz rengi
  • Birincil gece modu: Gezinme başlığının gece rengi
  • İkincil gece modu: Bir sonraki dönüş göstergesinin gece rengi
Talimatlarla ilgili 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 ölçü birimlerinin metin rengi
  • Uzaklık ölçü birimlerinin metin boyutu
Manevra simgeleri
  • Büyük manevra simgesinin rengi
  • Küçük manevra simgesinin rengi
Şerit yardımı
  • Önerilen şeridin veya şeritlerin rengi

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

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) getSupportFragmentManager()
  .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

Haritada trafik katmanını etkinleştirmek veya devre dışı bırakmak için GoogleMap.setTrafficEnabled() simgesini kullanın. Bu ayar, haritanın tamamında gösterilen trafik yoğunluğu belirtilerini etkiler. Ancak bu durum, navigasyon cihazı tarafından çizilen rotadaki trafik göstergelerini 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

Aktif navigasyon sırasında haritada trafik ışıklarının ve dur işaretlerinin gösterilmesini etkinleştirebilirsiniz. Bu sayede rotalar ve yolculuk manevraları hakkında daha fazla bilgi edinebilirsiniz.

Trafik ışıkları ve dur levhaları, Navigation SDK'da varsayılan olarak devre dışıdır. Bu özelliği etkinleştirmek için her özellik için ayrı ayrı DisplayOptions numarasını arayın.

Aşağıdaki örnekte trafik ışıklarının ve dur levhalarının nasıl gizlendiği gösterilmektedir:

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 Haritalar API belgelerine gidin.

Kaydırma metni

Google ilişkilendirmesini kapatmadığı sürece uygulamanızın herhangi bir yerine kayan metin ekleyebilirsiniz. Navigation SDK, metnin haritadaki bir enlem/boylama veya bir etikete sabitlenmesini desteklemez. Daha fazla bilgi için Bilgi pencereleri'ne gidin.

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

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() ya da NavigationFragment.setSpeedLimitIconEnabled() simgesini kullanın. Etkinleştirildiğinde, yol tarifi sırasında hız sınırı simgesi alt köşede gösterilir. Simge, aracın üzerinde hareket ettiğ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ö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() ya da NavigationFragment.setForceNightMode() simgesini kullanın veya Android için Navigasyon SDK'sının kontrol etmesine izin verin.

  • AUTO Navigation SDK'nın cihaz konumuna ve yerel saate göre uygun modu belirlemesine olanak tanır.
  • FORCE_NIGHT, gece modunu zorunlu kılar.
  • FORCE_DAY, gündüz modunu zorunlu kılar.

Aşağıdaki örnekte, bir gezinme parçasında gece modunun zorunlu olarak açılması gösterilmektedir:

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

Yol tarifi listesini görüntüleme

Ö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 ile olduğu gibi DirectionsListView'ya yönlendirdiğinizden emin olun. Örneğin:

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

Alternatif rotaları gizleme

Kullanıcı arayüzü çok fazla bilgiyle kalabalıklaştığında, varsayılan değerden (iki) daha az sayıda alternatif rota göstererek veya hiç alternatif rota göstermeyerek kalabalığı 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:

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

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

Gezi ilerleme çubuğu

Gezinin ilerleme çubuğu gezinmeye eklendi.

Seyahat ilerleme çubuğu, navigasyon başladığında haritanın başlangıç/ön tarafında görünen dikey bir çubuktur. Etkinleştirildiğinde, kullanıcının hedefi ve mevcut konumuyla birlikte tüm seyahatin genel görünümü gösterilir.

Bu sayede kullanıcılar, yakınlaştırmaya gerek kalmadan trafik gibi yaklaşan sorunları tahmin edebilir. Gerekirse yolculuğu yeniden yönlendirebilirler. Kullanıcı, geziyi yeniden yönlendirirse ilerleme çubuğu, o noktadan yeni bir gezi başlatılmış gibi sıfırlanır.

Seyahat ilerleme çubuğunda aşağıdaki durum göstergeleri yer alır:

  • Geçen rota: Gezinin geçen kısmı.

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

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

  • Son varış noktası: Gezinin son varış noktası.

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

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

Gezi ilerleme çubuğunun konumu

  • Çubuğun sol tarafı, hız göstergesinin, Google logosunun ve yeniden ortalama düğmesinin (görünür olduğunda) sol tarafıyla yaklaşık olarak aynı hizadadır. Genişlik 12 dp'dir.
  • Seyahat ilerleme çubuğu sabit bir yüksekliğe sahiptir. Daha küçük cihazlardaki dikey alan sınırlamalarına uyum sağlamak için gezi ilerleme çubuğunun görünürlüğü ve yüksekliği, ekran yüksekliğinde belirtilen kesme noktalarına göre ayarlanır. Bu kesme noktaları, cihaz yönünden ve haritanın ekranda ne kadar yer kapladığından bağımsızdır:
  • Ekran yüksekliği Seyahat ilerleme çubuğunun görünürlüğü Seyahat ilerleme çubuğu yüksekliği Seyahat ilerleme çubuğu y ekseni konumu
    Küçük: 0 dp - 551 dp Görünmez Yok Yok
    Orta: 552 dp - 739 dp Visible 130 dp Başlangıç tarafının üstündeki kontroller (hız göstergesi / Google logosu / yeniden ortalama düğmesi)
    Büyük: 740 dp ve üzeri Visible 290 dp Başlangıç tarafının üstündeki kontroller (hız göstergesi / Google logosu / yeniden ortalama düğmesi)
  • Seyahat ilerleme çubuğu, dönüş kartıyla veya diğer navigasyon kullanıcı arayüzü öğeleriyle çakışırsa bu öğelerin altında görünür.

Pusula

Navigation SDK, belirli durumlarda ve yalnızca etkinleştirildiğinde haritanın sağ üst köşesinde görünen bir pusula grafiği sağlar. Kullanıcı pusulayı tıkladığında kamera, sıfır yönüne (varsayılan yön) geri dönecek şekilde animasyon yapar ve pusula kısa süre sonra kaybolur.

Navigasyon etkinse ve kamera modu "takip etme" olarak ayarlanmışsa pusula görünür kalır ve pusulaya dokunulduğunda eğik ve genel bakış kamera perspektifleri arasında geçiş yapılır.

Sürücünün dikkatinin dağılmaması için pusula, başlık (dikey modda) genişlediğinde ve pusulanın varsayılan konumuyla çakıştığında aynı konumda kalır. İkincil bir başlık özel kontrolü veya başlık aksesuar görünümü eklerseniz kullanıcı arayüzü çakışmalarını önlemek için pusula gizlenir.

Pusula, gündüz ve gece modlarının yanı sıra koyu modu da destekler.

Pusula varsayılan olarak etkindir. Pusulanın etkin olup olmayacağını GoogleMapOptions sınıfındaki compassEnabled yöntemiyle ayarlayabilirsiniz.

3D binaları devre dışı bırakma

Performans açısından sınırlı cihazlarda, 3D binaların gösterimini GoogleMap.setBuildingsEnabled(false) çağrısı yaparak devre dışı bırakabilirsiniz.

Prompt Visibility API (Deneysel)

İstem Görünürlüğü API'si, bir Navigation SDK kullanıcı arayüzü öğesi görünmeden hemen önce ve öğe kaldırılır kaldırılmaz geri çağırma almak için bir dinleyici ekleyerek Navigation SDK tarafından oluşturulan kullanıcı arayüzü öğeleri ile kendi özel kullanıcı arayüzü öğeleriniz arasındaki çakışmaları önlemenizi sağlar. Kod örnekleri de dahil olmak üzere daha fazla bilgi için Gerçek zamanlı kesintileri yapılandırma sayfasının İstem Görünürlüğü API'si bölümüne bakın.