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

iOS için Navigasyon SDK'sını kullanarak, haritada yerleşik kullanıcı arayüzü denetimlerinden ve öğelerinden hangilerinin göründüğünü ve hangi hareketlere izin verdiğinizi belirleyerek haritanızla kullanıcı deneyimini değiştirebilirsiniz. Gezinme 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şiklikler hakkındaki yönergeler için Politikalar sayfasına bakın.

Harita kullanıcı arayüzü kontrolleri

Gezinme SDK'sı, iOS için Google Haritalar uygulamasındakilere benzer bazı yerleşik kullanıcı arayüzü kontrolleri sağlar. GMSUISettings sınıfını kullanarak bu denetimlerin görünürlüğünü değiştirebilirsiniz. Bu sınıfta yaptığınız değişiklikler haritaya hemen yansıtılır.

Not: Her kontrolün, haritanın kenarına göre önceden belirlenmiş bir konumu vardır. Haritayı dağıtarak kontrolleri kenarlardan uzağa taşıyabilirsiniz.

Pusula

Navigasyon SDK'sı, belirli koşullar altında ve yalnızca etkinleştirildiğinde haritanın sağ üst köşesinde görünen bir pusula grafiği sağlar. Pusula yalnızca kameranın tam kuzeyden farklı bir yönü (sıfır olmayan bir yer) doğrultulduğunda görünür. Kullanıcı pusulayı tıkladığında, kameranın yönü sıfır olan bir konuma (varsayılan yön) döner ve kısa bir süre sonra pusula kaybolur.

Navigasyon etkinleştirilir ve kamera modu "takip" olarak ayarlanırsa pusula görünür kalır ve yatık ile genel bakış kamera perspektifleri arasındaki pusula geçişlerine dokunulur.

Pusula varsayılan olarak devre dışıdır. GMSUISettings öğesinin compassButton özelliğini true olarak ayarlayarak pusulayı etkinleştirebilirsiniz. Ancak pusulayı her zaman gösterilmeye zorlayamazsınız.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

Konumum düğmesi

Konumum düğmesi ekranın sağ alt köşesinde yalnızca Konumum düğmesi etkin olduğunda görünür. Kullanıcının konumu biliniyorsa kamera, düğmeyi tıkladığında kullanıcının mevcut konumuna odaklanacak ş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 ortalama düğmesi

Navigasyon etkinleştirildiğinde, kullanıcı harita görünümünde sayfayı 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 GMSUISettings öğesinin recenterButtonEnabled özelliğini true olarak ayarlayın. Yeniden ortalama düğmesinin görünmesini önlemek için recenterButtonEnabled öğesini false olarak ayarlayın.

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

Harita kullanıcı arayüzü aksesuarları

Navigasyon SDK'sı, gezinme sırasında görünen iOS için Google Haritalar uygulamasında bulunan aksesuarlara benzer kullanıcı arayüzü aksesuarları sağlar. Bu denetimlerin 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 yolculuğuna yansıtılır.

Gezinme üstbilgisi ve altbilgisi

Gezinme sırasında, gezinme üstbilgisi ekranın üst kısmında, gezinme altbilgisi ise altta görünür. Navigasyon başlığı, rotadaki bir sonraki dönüş için sokak adı ve yol tarifinin yanı sıra bir sonraki dönüşün yönünü de gösterir. Gezinme altbilgisi, hedefe kalan tahmini süre ve mesafenin yanı sıra tahmini varış zamanını gösterir.

Aşağıdaki özellikleri kullanarak gezinme üst bilgisi ve alt bilgisinin görünürlüğünü açıp kapatabilir ve renklerini programatik olarak ayarlayabilirsiniz:

• navigationHeaderEnabled — Gezinme başlığının görünür olup olmayacağını kontrol eder (varsayılan olarak true).
• navigationFooterEnabled, gezinme altbilgisinin görünür olup olmayacağını kontrol eder (varsayılan olarak true).
• navigationHeaderPrimaryBackgroundColor — Gezinme üstbilgisinin birincil arka plan rengini ayarlar.
• navigationHeaderSecondaryBackgroundColor — Gezinme üstbilgisinin ikincil arka plan rengini belirler.

Aşağıdaki kod örneğinde, üst bilgi ve altbilgi için görünürlüğün etkinleştirilip navigationHeaderPrimaryBackgroundColor öğesinin mavi, navigationHeaderSecondaryBackgroundColor değerinin de 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];

Gezinme aksesuarı başlık görünümü

İkincil gezinme başlık görünümünü kendi özelleştirilmiş aksesuar görünümüyle değiştirerek uygulamanızı özelleştirebilirsiniz. Bunu, GMSNavigationAccessoryView protokolünü uygulayan bir görünüm oluşturarak yaparsınız. Bu protokolün gerekli bir yöntemi vardır: -heightForAccessoryViewConstrainedToSize:onMapView:. Belirtilen MapView'da görünümünüz için kullanılabilecek maksimum boyut sunulur ve görünümün gerektirdiği yüksekliği belirtmeniz gerekir.

Daha sonra, setHeaderAccessoryView: yöntemini çağırarak bu görünümü MapsView'a aktarabilirsiniz. mapView, mevcut tüm görünümlerin animasyonunu gerçekleştirir ve ardından özel görünümünüzde animasyon oluşturur. Özel görünümünüzün gösterilebilmesi için gezinme başlığının görünür olması gerekir.

Not: Bazı akıllı telefonlarda harita Görünümü yatay modda çok kısa olabileceğinden özel görünümünüz gizlenir.

Özel başlık aksesuarı görünümünü kaldırmak için nil öğesini setHeaderAccessoryView: adlı kullanıcıya iletin.

Görünümünüzün herhangi bir zamanda boyutu değişmesi gerekiyorsa invalidateLayoutForAccessoryView: yöntemini çağırarak boyutun değiştirilmesi gereken görünümü iletebilirsiniz.

Ö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];

Yol Tarifi Listesi

Uygulamanızda adım adım yol tarifi 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) üzerindeki setDestinations (navigator) başarıyla tamamlandıktan ve kılavuzda guidanceActive etkinleştirildikten sonra bir giriş noktası düğmesini etkinleştirin.
2. Bir kullanıcı giriş noktası düğmesine dokunduğunda, GMSMapView (mapView) ile ilişkili gezgin ile bir GMSNavigationDirectionsListController (denetleyici) oluşturun.
3. Denetleyiciyi bir UIViewController örneğine (denetleyiciyi görüntüle) ekleyin ve directionsListView öğesini görünüm denetleyicisinin alt görünümü olarak ekleyin. Kumandadaki reloadData ve invalidateLayout yöntemleri, UICollectionView ile aynı şekilde çağrılmalıdır.
4. Görünüm denetleyicisini, uygulamanın görünüm denetleyicisi hiyerarşisine aktarın.

Notlar:

• Yol tarifi listesinin yeniden kullanılması amaçlanmamıştır ve her navigasyon oturumu için yeniden oluşturulmalıdır.
• Denetleyici, gezgin için yalnızca zayıf bir referans tutar.
• Tam bir örnek için Projenizi ayarlama bölümünde belirtilen, indirilen pakette bulunan demo uygulamaya göz atın.

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)
  // Ensure 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];
  // Ensure 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

Gezi ilerleme çubuğu, navigasyon başladığında haritanın sağ kenarında görünen dikey bir çubuktur. Etkinleştirildiğinde, kullanıcının varış noktası ve mevcut konumuyla birlikte gezinin tamamı için bir genel bakış görüntülenir.

Kullanıcıların, yakınlaştırmaya gerek kalmadan, trafik gibi yaklaşan sorunları hızlıca tahmin edebilmesini sağlar. Daha sonra gerekirse seyahati 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 görüntülenir:

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

• Geçerli konum: Sürücünün seyahatte o sırada bulunduğu konum.

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

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

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

Trafik ışıkları ve dur işaretleri

mapView içinde trafik ışıklarını etkinleştirebilir ve tabelaları durdurabilirsiniz. Bu özellik sayesinde kullanıcı, rota boyunca trafik ışıklarının veya dur işareti simgelerinin gösterilmesini sağlayarak daha verimli ve isabetli yolculuklar için daha iyi bağlam sunar.

Trafik ışıkları ve dur işaretleri, iOS için Navigasyon SDK'sında varsayılan olarak devre dışıdır. Bu özelliği etkinleştirmek için her seçenek için GMSMapView ayarlarını ayrı ayrı çağırın: showsTrafficLights ve showsStopSigns.

Swift

mapView.settings.showsTrafficLights = true
mapView.settings.showsStopSigns = true

Objective-C

mapView.settings.showsTrafficLights = YES;
mapView.settings.showsStopSigns = YES;

Hız saati kontrolü

Navigasyon etkinleştirildiğinde ve ulaşım şekli sürüş moduna ayarlandığında, iOS için Navigasyon SDK'sı haritanın alt köşesinde geçerli 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 paneli genişletilerek sürücünün mevcut hızıyla ikinci bir hız saati gösterilir.

Sürücü, hız sınırını belirli bir miktarda aştığında hız saati ekranının biçimlendirmesini değiştirmek için uyarı düzeyleri ayarlayabilirsiniz. Örneğin, sürücü hız sınırını 8 mil/sa. aştığında mevcut hızın kırmızı bir metin rengiyle, sürücü hız sınırını 10 mil/sa. aştığında da kırmızı bir 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.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

Hız saatiyle ilgili uyarıları ayarlama hakkında daha fazla bilgi için Hız saati uyarılarını yapılandırma konusuna bakın.

Hedef işaretçileri

GMSUISettings için showsDestinationMarkers özelliğini ayarlayarak belirli bir rota için hedef işaretçilerini gösterebilir veya gizleyebilirsiniz. Aşağıdaki örnekte, hedef işaretçilerinin kapatılması gösterilmektedir.

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

Not: İşaretçi olarak özel bir resim belirtebilirsiniz ancak SDK şu anda bu görüntülerin metinle etiketlenmesini desteklememektedir. Daha fazla bilgi için İşaretçiler konusuna bakın.

Harita deneyimi özellikleri

Gezinme SDK'sı, kullanıcılarınız için gezinme deneyiminde daha fazla özelleştirme yapma olanağı sağlar. Örneğinizde yaptığınız değişiklikler, kullanıcının uygulamanızı bir sonraki güncellemesine yansıtılır.

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

GMSMapView özelliğinin 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ını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ştirildiğinde, kullanıcılar kamerayı kaydırmak için kaydırabilir.
• zoomGestures: Yakınlaştırma hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Bu özellik etkinleştirilirse kullanıcılar kamerayı yakınlaştırmak için iki kez dokunabilir, iki parmakla dokunabilir veya iki parmak ucunu yakınlaştırabilir. scrollGestures etkinken 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. Bu özellik etkinleştirilirse kullanıcılar kamerayı yatırmak için iki parmakla dikey veya yukarı doğru kaydırma yapabilir.
• rotateGestures: Döndürme hareketlerinin etkinleştirilip devre dışı bırakılacağını kontrol eder. Etkinleştirildiğinde, kullanıcılar iki parmakla döndürme hareketini kullanarak kamerayı döndürebilir.

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 denetimleri ve diğer kullanıcı arayüzü öğelerini gezinme üst bilgisi ve altbilgisinin konumuna göre konumlandırabilirsiniz:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

Aşağıdaki kod örneğinde, harita görünümünde bir etiket çifti konumlandırmak için düzen kılavuzlarının kullanılması 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;

Alternatif rotaları gizle

Kullanıcı arayüzü çok fazla bilgiyle dolu olduğunda varsayılandan (iki) daha az alternatif rota görüntüleyerek 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ğeri	Açıklama
GMSGezinmeAlternatifRotalarStratejileriTümü	Varsayılan. En fazla iki alternatif rota görüntüler.
GMSGezinmeAlternatifRotalarStratejiBir	Bir alternatif rota (varsa) görüntüler.
GMSNavigationAlternateRoutesStrategyNone	Alternatif rotaları gizler.

Örnek

Aşağıdaki kod örneğinde, alternatif rotaların nasıl tamamen 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){...}];

Uyarı: Bu özellik şu anda en kısa rota rotası tercihiyle uyumlu değil. Her iki özelliğin aynı anda kullanılması beklenmedik davranışlara neden olabilir.