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

iOS için Navigation SDK'yı kullanarak, haritada hangi yerleşik kullanıcı arayüzü kontrollerinin ve öğelerinin görüneceğini ve hangi hareketlere izin vereceğinizi belirleyerek haritanızla kullanıcı deneyimini değiştirebilirsiniz. Navigasyon kullanıcı arayüzünün görsel görünümünü de değiştirebilirsiniz. Navigasyon 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 anında 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, yönü sıfır (varsayılan yön) olan bir konuma geri döner ve pusula kısa bir süre sonra kaybolur.

Navigasyon etkinse ve kamera modu "takip ediyor" 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 başlık (dikey modda) genişleyip pusulanın varsayılan konumuyla çakışırsa pusula 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, yalnızca etkinleştirildiğinde ekranın sağ alt köşesinde 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 animasyonlu bir şekilde hareket eder. GMSUISettings öğesinin 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ünmesi için GMSUISettings öğesinin recenterButtonEnabled özelliğini true olarak ayarlayın. Yeniden ortala düğmesinin görünmesini engellemek için recenterButtonEnabled değerini 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 olan tahmini süre ve mesafe ile tahmini varış zamanı gösterilir.

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

Aşağıdaki kod örneğinde, üstbilgi ve altbilginin görünürlüğünün etkinleştirilmesi, ardından navigationHeaderPrimaryBackgroundColor değerinin mavi ve navigationHeaderSecondaryBackgroundColor değerinin kırmızı olarak ayarlanması 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:. Görünümünüz için verilen mapView'da kullanılabilir maksimum boyut sağlanır ve görünümünüzün gerektirdiği yüksekliği belirtmeniz gerekir.

Ardından, setHeaderAccessoryView: yöntemini çağırarak bu görünümü mapView'a 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österilebilmesi için gezinme başlığının görünür olması gerekir.

Özel üstbilgi aksesuar görünümünü kaldırmak için nil değerini setHeaderAccessoryView: değerine 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 (gezinme aracı) üzerinde setDestinations başarıyla tamamlandıktan ve gezinme aracında guidanceActive etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.
  2. Kullanıcı giriş noktası düğmesine dokunduğunda GMSMapView (mapView) ile ilişkili gezinme aracıyla bir GMSNavigationDirectionsListController (denetleyici) oluşturun.
  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. Kumandadaki reloadData ve invalidateLayout yöntemleri, UICollectionView ile çağrılmalıdır.
  4. Görünüm denetleyicisini uygulamanın görünüm denetleyicisi hiyerarşisine ekleyin.

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

Navigasyona gezi ilerleme çubuğu eklendi.

Gezi 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şlamış gibi sıfırlanır.

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

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

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

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

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

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Gezi ilerleme çubuğu 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 punto yukarıda konumlandırılır. Seyahat ilerleme çubuğunun üst kısmı, ekranın üst kısmından en az 170 pt uzaklıkta kalır. Çubuğun maksimum yüksekliği 400 pt'dir.
  • Gezi ilerleme çubuğu, navigasyon başlığı veya diğer navigasyon kullanıcı arayüzü öğeleriyle çakışırsa bu diğer öğ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 Prompt Visibility API 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österir.

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ı kontrolünün gösterilmesini devre dışı bırakmak için shouldDisplaySpeedometer değerini 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

GMSUISettings öğesinin showsDestinationMarkers özelliğini ayarlayarak belirli bir rotanın varış noktası işaretçilerini gösterebilir veya gizleyebilirsiniz. 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

Navigation SDK, kullanıcılarınızın navigasyon deneyimini daha fazla özelleştirmenize 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 bir 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ılardan birini kullanın. Örneğin, Rota izleme eğitimi'nde oluşturulan varış noktaları, varış noktası vurgulama ve giriş etiketlerini (varsa) içerir.

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

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

3D binalar, navigasyon 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. Hareketin devre dışı bırakılması, kamera ayarlarına programatik erişimi sınırlamaz.

  • scrollGestures — Kaydırma hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu ayar etkinleştirilirse kullanıcılar kamerayı kaydırmak için kaydırma hareketi yapabilir.
  • zoomGestures : Yakınlaştırma hareketlerinin etkinleştirilip etkinleştirilmeyeceğini kontrol eder. Bu ayar etkinleştirilirse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmakla dokunabilir veya iki parmakla yakınlaştırma hareketi yapabilir. scrollGestures etkinleştirildiğinde iki kez dokunma veya sıkıştırma hareketinin 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 parmakla dikey olarak aşağı veya yukarı kaydırma hareketini kullanabilir.
  • rotateGestures : Döndürme hareketlerinin etkinleştirilip etkinleştirilmeyeceğini 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ı gizle

Kullanıcı arayüzü çok fazla bilgiyle karmaşık hale geldiğinde, varsayılandan (iki) daha az alternatif rota göstererek veya hiç alternatif rota göstermeyerek karmaşıklığı 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){...}];