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

iOS için Navigasyon SDK'sını 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

Navigasyon SDK'sı, 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ı pusulaya dokunduğunda 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ğılması (DD) önlemek için başlık (portre modunda) genişler ve 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 olarak 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 ortalama düğmesi

Navigasyon 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 ortalama 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 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 gezisinde geçerli olur.

Navigasyon sırasında, navigasyon başlığı ekranın üst kısmında, navigasyon altbilgisi ise alt kısmında görünür. Navigasyon başlığında, rotadaki bir sonraki dönüşün sokak adı ve yönü ile bir 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 altbilgi için görünürlüğü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 vardır: -heightForAccessoryViewConstrainedToSize:onMapView:. Belirli bir mapView'da görünümünüz için kullanılabilen maksimum boyut verilir ve görünümünüzün gerektirdiği yüksekliği sağlamanız 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 setHeaderAccessoryView: öğesine nil değerini iletin.

Görünümünüzün boyutunun herhangi bir zamanda değişmesi gerekiyorsa boyutu değişmesi gereken görünümü ileterek invalidateLayoutForAccessoryView: yöntemini ç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];

Düşük ışık modu başlık renkleri

iOS için Navigasyon SDK'sı, günün saatine ve cihazın mevcut konumuna göre önerilen aydınlatma modunu hesaplar ve önerilen mod değiştiğinde (ör. gün doğumunda veya gün batımında) 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 (navigator) üzerinde setDestinations başarıyla tamamlandıktan ve navigator üzerinde 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 denetleyici) örneğine ekleyin ve directionsListView öğesini görünüm denetleyicinin alt görünümü olarak ekleyin. Denetleyicideki reloadData ve invalidateLayout yöntemleri, UICollectionView ile olduğu gibi ç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 varış noktası ve mevcut konumuyla birlikte tüm geziye dair genel bir bakış sunar.

Bu sayede kullanıcılar, yakınlaştırma yapmadan trafik gibi yaklaşan sorunları önceden görebilir. Ardından, gerekirse gezi için yeni rota çizebilirler. Kullanıcı gezi için yeni rota çizerse ilerleme çubuğu, o noktadan itibaren yeni bir gezi başlamış gibi sıfırlanır.

Gezi 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 gezi sırasındaki mevcut konumu.

  • Geçen rota: Gezinin geçen 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 konumlandırması

  • Çubuğun sol tarafı, hız göstergesinin, Google logosunun ve Yeniden ortala düğmesinin (görünür olduğunda) sol tarafıyla kabaca hizalanır. Genişlik 12 pt'dir.
  • Gezi 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. Gezi 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'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)

Prompt Visibility API, 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. Bunun için, 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 üzere bir dinleyici eklemeniz gerekir. 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 Navigasyon SDK'sı, haritanın alt köşesinde mevcut hız sınırını gösteren bir hız sınırı kontrolü gösterir. 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ı 5 mil/saat aştığında mevcut hızın kırmızı metin rengiyle, 10 mil/saat aştığında ise kırmızı arka plan rengiyle gösterileceğini belirtebilirsiniz.

Hız sınırı kontrolünü görüntülemek 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 için 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ğinize 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 hedefi ayırt etmelerine ve hedefe gitmelerine 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ğitiminde oluşturulan hedefler, hedef vurgulama ve varsa 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, 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 etkin mi yoksa devre dışı mı olacağı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. 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 etkinleştirilmeyeceğini 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;

Kontrolleri ve kullanıcı arayüzü öğelerini konumlandırma

Aşağıdaki özellikleri kullanarak kontrolleri ve diğer kullanıcı arayüzü öğelerini, gezinme başlığı 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;

Anlık aksaklık bildirme düğmesini konumlandırmak için bottomTrailingButtonsLayoutGuide kullanma örneğini Anlık aksaklıkları yapılandırma bölümünde bulabilirsiniz.

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. GMSNavigationRoutingOptions öğesini yapılandırıp alternateRoutesStrategy öğesini aşağıdaki numaralandırma değerlerinden biriyle ayarlayarak rotaları getirmeden önce bu seçeneği yapılandırabilirsiniz:

Numaralandırma DeğeriAçıklama
GMSNavigationAlternateRoutesStrategyAll Varsayılan. En fazla iki alternatif rota gösterir.
GMSNavigationAlternateRoutesStrategyOne Bir alternatif rota gösterir (varsa).
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){...}];