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

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

Harita kullanıcı arayüzü kontrolleri

Navigation SDK, iOS için Google Haritalar uygulamasında bulunanlara benzer bazı yerleşik kullanıcı arayüzü kontrolleri sağlar. GMSUISettings sınıfını kullanarak bu kontrollerin görünürlüğünü açıp kapatabilirsiniz. Bu sınıfta yaptığınız değişiklikler haritaya hemen yansıtılı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öner 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, 11.0.0 ve sonraki sürümlerde varsayılan olarak etkindir. GMSUISettings öğesinin compassButton özelliğini false olarak ayarlayarak pusulayı devre dışı bırakabilirsiniz.

Swift

mapView.settings.compassButton = false

Objective-C

mapView.settings.compassButton = NO;

Konumum düğmesi

Konumum düğmesi, ekranın sağ alt köşesinde yalnızca Konumum düğmesi etkinleştirildiğinde görünür. Kullanıcı düğmeyi tıkladığında, kullanıcının konumu biliniyorsa kamera, kullanıcının mevcut konumuna odaklanmak için animasyon yapar. GMSUISettings myLocationButton özelliğini true olarak ayarlayarak düğmeyi etkinleştirebilirsiniz.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

Yeniden ortala düğmesi

Gezinme etkinleştirildiğinde, kullanıcı harita görünümünü kaydırdığında yeniden ortalama düğmesi görünür ve kullanıcı haritayı yeniden ortalamak için dokunduğunda kaybolur. Yeniden ortalama düğmesinin görünmesine izin vermek için recenterButtonEnabledGMSUISettings özelliğini true olarak ayarlayın. Yeniden ortalama düğmesinin görünmesini engellemek için recenterButtonEnabled seçeneğini false olarak ayarlayın.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Harita kullanıcı arayüzü aksesuarları

Navigasyon SDK'sı, navigasyon sırasında iOS için Google Haritalar uygulamasında bulunanlara benzer şekilde 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, kullanıcının bir sonraki seyahatinde geçerli olur.

Gezinme sırasında, gezinme başlığı ekranın üst kısmında, gezinme altbilgisi ise alt kısmında görünür. Gezinme başlığında, rotadaki bir sonraki dönüş için sokak adı ve yönün yanı sıra sonraki dönüşün yönü gösterilir. Gezinme altbilgisinde, hedefe ulaşmak için gereken tahmini süre ve mesafe ile tahmini varış zamanı gösterilir.

Aşağıdaki özellikleri kullanarak gezinme başlığı ve altbilgisinin görünürlüğünü açıp kapatabilir ve renklerini programatik olarak ayarlayabilirsiniz:

Aşağıdaki kod örneğinde, başlık ve altbilgi için görünürlüğün nasıl etkinleştirileceği, ardından navigationHeaderPrimaryBackgroundColor öğesinin maviye, navigationHeaderSecondaryBackgroundColor öğesinin ise kırmızıya nasıl ayarlanacağı gösterilmektedir.

Swift

mapView.settings.isNavigationHeaderEnabled = true
mapView.settings.isNavigationFooterEnabled = true
mapView.settings.navigationHeaderPrimaryBackgroundColor = .blue
mapView.settings.navigationHeaderSecondaryBackgroundColor = .red

Objective-C

mapView.settings.navigationHeaderEnabled = YES;
mapView.settings.navigationFooterEnabled = YES;
mapView.settings.navigationHeaderPrimaryBackgroundColor = [UIColor blueColor];
mapView.settings.navigationHeaderSecondaryBackgroundColor = [UIColor redColor];

İkincil gezinme başlığı görünümünü kendi özelleştirilmiş aksesuar görünümünüzle değiştirerek uygulamanızı özelleştirebilirsiniz. Bunu, GMSNavigationAccessoryView protokolünü uygulayan bir görünüm oluşturarak yaparsınız. Bu protokolde bir zorunlu yöntem bulunur: -heightForAccessoryViewConstrainedToSize:onMapView:. Belirli bir harita görünümünde, görünümünüz için mevcut olan maksimum boyut verilir ve görünümünüzün gerektirdiği yüksekliği sağlamanız gerekir.

Ardından, setHeaderAccessoryView: çağrısı yaparak bu görünümü mapView'e iletebilirsiniz. MapView, mevcut görünümleri animasyonla kaldırır ve ardından özel görünümünüzü animasyonla ekler. Özel görünümünüzün görüntülenebilmesi için gezinme başlığı görünür olmalıdır.

Özel üstbilgi aksesuar görünümünü kaldırmak için nil değerini setHeaderAccessoryView: olarak iletin.

Görünümünüzün boyutu herhangi bir zamanda değişmesi gerekiyorsa boyutu değişmesi gereken görünümü ileterek invalidateLayoutForAccessoryView: işlevini çağırabilirsiniz.

Örnek

Aşağıdaki kod örneğinde, GMSNavigationAccessoryView protokolünü uygulayan özel bir görünüm gösterilmektedir. Bu özel görünüm daha sonra özel bir gezinme başlığı aksesuar görünümü ayarlamak için kullanılır.

Swift

class MyCustomView: UIView, GMSNavigationAccessoryView {
…
  func heightForAccessoryViewConstrained(to size: CGSize, on mapView: GMSMapView) -> CGFloat {
    // viewHeight gets calculated as the height your view needs.
    return viewHeight
  }
…
}

let customView = MyCustomView(...)
mapView.setHeaderAccessory(customView)

// At some later point customView changes size.
mapView.invalidateLayout(forAccessoryView: customView)

// Remove the custom header accessory view.
mapView.setHeaderAccessory(nil)

Objective-C

@interface MyCustomView : UIView <GMSNavigationAccessoryView>
…
@end

@implementation MyCustomView
…
- (CGFloat)heightForAccessoryViewConstrainedToSize:(CGSize)size onMapView:(GMSMapView *)mapView {
  // viewHeight gets calculated as the height your view needs.
  return viewHeight;
}
…
@end

MyCustomView *customView = [[MyCustomView alloc] init…];
[_mapView setHeaderAccessoryView:customView];

// At some later point customView changes size.
[_mapView invalidateLayoutForAccessoryView:customView];

// Remove the custom header accessory view.
[_mapView setHeaderAccessoryView:nil];

Zayıf ışık modu başlık renkleri

iOS için Navigation SDK, önerilen aydınlatma modunu günün saatine ve cihazın mevcut konumuna göre hesaplar. Önerilen mod değiştiğinde (ör. gün doğumu veya gün batımı) GMSNavigatorListener.didChangeSuggestedLightingMode dinleyici yöntemini çağırır. Düşük ışık modu davranışını programatik olarak aşağıdaki şekillerde değiştirebilirsiniz:

Yol Tarifi Listesi

Uygulamanızda adım adım yol tarifleri sağlayabilirsiniz. Aşağıdaki örnekte, bunu yapmanın olası bir yolu gösterilmektedir. Bu adımlar, kendi uygulamanıza bağlı olarak değişiklik gösterebilir.

  1. GMSNavigator (gezgin) üzerinde setDestinations başarıyla tamamlandıktan ve gezginde guidanceActive etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.
  2. Kullanıcı giriş noktası düğmesine dokunduğunda, GMSNavigationDirectionsListController (denetleyici) oluşturun ve GMSMapView (mapView) ile ilişkili gezinme aracını kullanın.
  3. Denetleyiciyi bir UIViewController (görünüm denetleyicisi) örneğine ekleyin ve directionsListView öğesini görünüm denetleyicisinin alt görünümü olarak ekleyin. Denetleyicideki reloadData ve invalidateLayout yöntemleri, UICollectionView ile çağrılıyormuş gibi çağrılmalıdır.
  4. Görünüm denetleyicisini uygulamanın görünüm denetleyicisi hiyerarşisine itin.

Aşağıdaki kod örneğinde DirectionsListViewController ekleme işlemi gösterilmektedir.

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  // Add the directionsListView to the host view controller's view.
  let directionsListView = directionsListController.directionsListView
  directionsListView.frame = self.view.frame
  self.view.addSubview(directionsListView)
  directionsListView.translatesAutoresizingMaskIntoConstraints = false
  directionsListView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
  directionsListView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
  directionsListView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
  directionsListView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
  ...
}

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  // Make sure data is fresh when the view appears.
  directionsListController.reloadData()
  ...
}

override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
  super.willTransition(to: newCollection, with: coordinator)
  // Invalidate the layout during rotation.
  coordinator.animate(alongsideTransition: {_ in
    self.directionsListController.invalidateLayout()
  })
  ...
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Add the directionsListView to the host view controller's view.
  UIView *directionsListView = _directionsListController.directionsListView;
  directionsListView.frame = self.view.bounds;
  [self.view addSubview:directionsListView];
  directionsListView.translatesAutoresizingMaskIntoConstraints = NO;
  [directionsListView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
  [directionsListView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
  [directionsListView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
  [directionsListView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
  ...
}

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  // Make sure data is fresh when the view appears.
  [_directionsListController reloadData];
  ...
}

- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection
              withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];
  void(^animationBlock)(id <UIViewControllerTransitionCoordinatorContext>context) =
      ^void(id <UIViewControllerTransitionCoordinatorContext>context) {
    [_directionsListController invalidateLayout];
  };
  // Invalidate the layout during rotation.
  [coordinator animateAlongsideTransition:animationBlock
                               completion:nil];
  ...
}

...

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ünü gösterir.

Bu sayede kullanıcılar, trafik gibi yaklaşan sorunları yakınlaştırmaya gerek kalmadan hızlıca 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:

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

  • Mevcut konum: Sürücünün yolculuktaki mevcut konumu.

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

navigationTripProgressBarEnabled özelliğini GMSUISettings içinde ayarlayarak gezi ilerleme çubuğunu etkinleştirin.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

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 pt'dir.
  • Seyahat ilerleme çubuğu, ekrandaki dikey alana dinamik olarak yanıt verir. Çubuğun alt kısmı, ekranın alt kısmından 210 pt uzaklıkta yer alır. Seyahat ilerleme çubuğunun üst kısmı, ekranın üst kısmından en az 170 pt uzakta kalır ve çubuğun maksimum yüksekliği 400 pt olur.
  • Seyahat ilerleme çubuğu, gezinme başlığı veya diğer gezinme kullanıcı arayüzü öğeleriyle çakışırsa bu öğelerin altında görünür.

Prompt Visibility API (Deneysel)

İstem Görünürlüğü API'si, bir Navigation SDK kullanıcı arayüzü öğesi görünmeden ö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ı önlemenize olanak tanır. 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.

Hız göstergesi kontrolü

Navigasyon etkinleştirildiğinde ve seyahat modu sürüş olarak ayarlandığında, iOS için Navigation SDK, haritanın alt köşesinde mevcut hız sınırını gösteren bir hız sınırı kontrolü görüntüler. Sürücü hız sınırını aştığında kontrol genişleyerek sürücünün mevcut hızını gösteren ikinci bir hız göstergesi görüntülenir.

Sürücü, hız sınırını belirli bir miktarda aştığında hız göstergesi ekranının biçimlendirmesini değiştirmek için uyarı seviyeleri ayarlayabilirsiniz. Örneğin, sürücü hız sınırını saatte 8 km aşarsa mevcut hızın kırmızı metin rengiyle, saatte 16 km aşarsa kırmızı arka plan rengiyle gösterilmesini belirtebilirsiniz.

Hız sınırı kontrolünü göstermek için GMSUISettings öğesinin shouldDisplaySpeedometer özelliğini true olarak ayarlayın. Hız sınırı denetiminin gösterilmesini devre dışı bırakmak için shouldDisplaySpeedometer alanını false olarak ayarlayın.

Swift

mapView.settings.shouldDisplaySpeedometer = true

Objective-C

mapView.settings.shouldDisplaySpeedometer = YES;

Hız göstergesi için uyarı ayarlama hakkında daha fazla bilgi edinmek istiyorsanız Hız göstergesi uyarılarını yapılandırma başlıklı makaleyi inceleyin.

Hedef işaretçileri

Belirli bir rotanın hedef işaretçilerini göstermek veya gizlemek için GMSUISettings showsDestinationMarkers özelliğini ayarlayın. Aşağıdaki örnekte hedef işaretçilerinin nasıl devre dışı bırakılacağı gösterilmektedir.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Harita deneyimi özellikleri

Navigasyon SDK'sı, kullanıcılarınızın navigasyon deneyiminde daha fazla özelleştirme yapmanıza olanak tanır. Örneğinizde yaptığınız değişiklikler, kullanıcının uygulamanızı bir sonraki güncellemesinde yansıtılır.

Hedef vurgulama ve girişler

Hedef vurgulama ve girişler

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

placeID içeren bir hedef oluşturmak için placeID kabul eden GMSNavigationWaypoint başlatıcılarından birini kullanın. Örneğin, Rota üzerinde gezinme eğitiminde oluşturulan hedefler, varsa hedef vurgulama ve giriş etiketlerini içerir.

Navigasyon sırasında 3D bina görünümü

Navigasyon sırasında 3D bina görünümü

3D binalar, gezinme sırasında varsayılan olarak gösterilir. Bu özelliği devre dışı bırakmak için buildingsEnabled değerini false (Swift) veya NO (Objective-C) olarak ayarlayın.

Varsayılan harita hareketlerini devre dışı bırakma

GMSMapView sınıfının bir özelliği olarak kullanılabilen GMSUISettings sınıfının özelliklerini ayarlayarak haritadaki varsayılan hareketleri devre dışı bırakabilirsiniz. Aşağıdaki hareketler programatik olarak etkinleştirilebilir ve devre dışı bırakılabilir. Bu hareketi devre dışı bırakmanın, kamera ayarlarına programatik erişimi sınırlamayacağını unutmayın.

  • scrollGestures — Kaydırma hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar kamerayı kaydırmak için ekranı kaydırabilir.
  • zoomGestures — Yakınlaştırma hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmakla dokunabilir veya parmaklarını yakınlaştırabilir. scrollGestures etkinleştirildiğinde çift dokunma veya parmakla yakınlaştırma hareketlerinin kamerayı belirtilen noktaya kaydırabileceğini unutmayın.
  • tiltGestures — Eğme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar, kamerayı eğmek için iki parmağıyla dikey olarak aşağı veya yukarı kaydırabilir.
  • rotateGestures — Döndürme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Etkinleştirilirse kullanıcılar, kamerayı döndürmek için iki parmakla döndürme hareketini kullanabilir.

Bu örnekte hem kaydırma hem de yakınlaştırma hareketleri devre dışı bırakılmıştır.

Swift

mapView.settings.scrollGestures = false
mapView.settings.zoomGestures = false

Objective-C

mapView.settings.scrollGestures = NO;
mapView.settings.zoomGestures = NO;

Konum kontrolleri ve kullanıcı arayüzü öğeleri

Aşağıdaki özellikleri kullanarak kontrolleri ve diğer kullanıcı arayüzü öğelerini gezinme üstbilgisi ve altbilgisinin konumuna göre yerleştirebilirsiniz:

  • navigationHeaderLayoutGuide
  • navigationFooterLayoutGuide
  • bottomTrailingButtonsLayoutGuide

Aşağıdaki kod örneğinde, harita görünümünde bir çift etiketi konumlandırmak için düzen kılavuzlarının kullanımı gösterilmektedir:

Swift

/* Add a label to the top left, positioned below the header. */
let topLabel = UILabel()
topLabel.text = "Top Left"
mapView.addSubview(topLabel)
topLabel.translatesAutoresizingMaskIntoConstraints = false
topLabel.topAnchor.constraint(equalTo: mapView.navigationHeaderLayoutGuide.bottomAnchor).isActive = true
topLabel.leadingAnchor.constraint(equalTo: mapView.leadingAnchor).isActive = true

/* Add a label to the bottom right, positioned above the footer. */
let bottomLabel = UILabel()
bottomLabel.text = "Bottom Right"
mapView.addSubview(bottomLabel)
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.bottomAnchor.constraint(equalTo: mapView.navigationFooterLayoutGuide.topAnchor).isActive = true
bottomLabel.trailingAnchor.constraint(equalTo: mapView.trailingAnchor).isActive = true

Objective-C

/* Add a label to the top left, positioned below the header. */
UILabel *topLabel = [[UILabel alloc] init];
topLabel.text = @"Top Left";
[view addSubview:topLabel];
topLabel.translatesAutoresizingMaskIntoConstraints = NO;
[topLabel.topAnchor
    constraintEqualToAnchor:mapView.navigationHeaderLayoutGuide.bottomAnchor].active = YES;
[topLabel.leadingAnchor constraintEqualToAnchor:mapView.leadingAnchor].active = YES;

/* Add a label to the bottom right, positioned above the footer. */
UILabel *bottomLabel = [[UILabel alloc] init];
bottomLabel.text = @"Bottom Right";
[view addSubview:bottomLabel];
bottomLabel.translatesAutoresizingMaskIntoConstraints = NO;
[bottomLabel.bottomAnchor
    constraintEqualToAnchor:mapView.navigationFooterLayoutGuide.topAnchor].active = YES;
[bottomLabel.trailingAnchor constraintEqualToAnchor:mapView.trailingAnchor].active = YES;

bottomTrailingButtonsLayoutGuide simgesinin nasıl kullanılacağına dair bir örnek için Anlık aksaklıkları yapılandırma başlıklı makaleyi inceleyerek anlık aksaklık bildirme düğmesini konumlandırma hakkında bilgi edinin.

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, GMSNavigationRoutingOptions öğesini yapılandırarak ve alternateRoutesStrategy öğesini aşağıdaki numaralandırma değerlerinden biriyle ayarlayarak rotaları getirmeden önce yapılandırabilirsiniz:

Numaralandırma DeğeriAçıklama
GMSNavigationAlternateRoutesStrategyAll Varsayılan. En fazla iki alternatif rota gösterir.
GMSNavigationAlternateRoutesStrategyOne Bir alternatif rota varsa onu gösterir.
GMSNavigationAlternateRoutesStrategyNone Alternatif rotaları gizler.

Örnek

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

Swift

let routingOptions = GMSNavigationRoutingOptions(alternateRoutesStrategy: .none)
navigator?.setDestinations(destinations,
                           routingOptions: routingOptions) { routeStatus in
  ...
}

Objective-C

GMSNavigationRoutingOptions *routingOptions = [[GMSNavigationRoutingOptions alloc] initWithAlternateRoutesStrategy:GMSNavigationAlternateRoutesStrategyNone];
[navigator setDestinations:destinations
            routingOptions:routingOptions
                  callback:^(GMSRouteStatus routeStatus){...}];