رابط کاربری ناوبری را تغییر دهید

با استفاده از Navigation SDK برای iOS، می‌توانید تجربه کاربری با نقشه خود را با تعیین اینکه کدام یک از کنترل‌ها و عناصر رابط کاربری داخلی روی نقشه ظاهر می‌شوند و کدام حرکات را مجاز می‌کنید، تغییر دهید. همچنین می توانید ظاهر بصری رابط کاربری ناوبری را تغییر دهید. برای دستورالعمل‌های مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خط‌مشی‌ها مراجعه کنید.

کنترل‌های رابط کاربری نقشه

Navigation SDK برخی از کنترل‌های UI داخلی مشابه آنچه در Google Maps برای برنامه iOS یافت می‌شود، ارائه می‌کند. با استفاده از کلاس GMSUISettings می‌توانید قابلیت مشاهده این کنترل‌ها را تغییر دهید. تغییراتی که در این کلاس ایجاد می‌کنید بلافاصله روی نقشه منعکس می‌شوند.

قطب نما

Navigation SDK یک گرافیک قطب نما را ارائه می دهد که در گوشه سمت راست بالای نقشه تحت شرایط خاص و تنها در صورت فعال بودن ظاهر می شود. قطب نما فقط زمانی ظاهر می شود که دوربین به گونه ای باشد که دارای یک یاتاقان غیر از شمال دقیق (یک یاتاقان غیر صفر) باشد. هنگامی که کاربر روی قطب نما کلیک می کند، دوربین به موقعیتی با یاتاقان صفر (جهت پیش فرض) متحرک می شود و کمی بعد قطب نما محو می شود.

اگر پیمایش فعال باشد و حالت دوربین روی "دنبال کردن" تنظیم شود، قطب نما قابل مشاهده باقی می ماند و ضربه زدن روی قطب نما بین زاویه دید دوربین کج و نمای کلی تغییر می کند.

قطب نما به طور پیش فرض غیرفعال است. می‌توانید قطب‌نما را با تنظیم ویژگی compassButton در GMSUISettings روی true فعال کنید. با این حال، نمی توانید قطب نما را مجبور کنید همیشه نشان داده شود.

mapView.settings.compassButton = true

mapView.settings.compassButton = YES;

دکمه موقعیت مکانی من

دکمه موقعیت مکانی من تنها زمانی در گوشه سمت راست پایین صفحه ظاهر می شود که دکمه موقعیت مکانی من فعال باشد. هنگامی که کاربر روی دکمه کلیک می کند، دوربین متحرک می شود تا بر روی مکان فعلی کاربر تمرکز کند، اگر مکان کاربر در حال حاضر مشخص باشد. با تنظیم ویژگی myLocationButton در GMSUISettings روی true می‌توانید این دکمه را فعال کنید.

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

دکمه مرکز جدید

وقتی پیمایش فعال است، وقتی کاربر نمای نقشه را پیمایش می‌کند، دکمه تازه‌تر ظاهر می‌شود و زمانی که کاربر برای مرکز کردن مجدد نقشه ضربه می‌زند، ناپدید می‌شود. برای اینکه به دکمه Renter نمایش داده شود، ویژگی recenterButtonEnabled GMSUISettings را روی true تنظیم کنید. برای جلوگیری از ظاهر شدن دکمه Renter، recenterButtonEnabled روی false قرار دهید.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

لوازم جانبی رابط کاربری نقشه

Navigation SDK لوازم جانبی UI را ارائه می دهد که در حین پیمایش مشابه موارد موجود در Google Maps برای برنامه iOS ظاهر می شوند. می‌توانید دید یا ظاهر بصری این کنترل‌ها را همانطور که در این بخش توضیح داده شده است، تنظیم کنید. تغییراتی که در اینجا ایجاد می‌کنید در سفر بعدی کاربر منعکس می‌شوند.

سربرگ و پاورقی ناوبری

در حین پیمایش، هدر پیمایش در بالای صفحه و پاورقی پیمایش در پایین ظاهر می شود. هدر ناوبری نام خیابان و جهت پیچ بعدی در مسیر و همچنین جهت پیچ بعدی را نشان می دهد. پاورقی ناوبری زمان و مسافت تخمینی تا مقصد و همچنین زمان تخمینی رسیدن را نشان می دهد.

می‌توانید نمایان بودن هدر و پاورقی پیمایش را تغییر دهید و رنگ‌های آن را با استفاده از ویژگی‌های زیر به صورت برنامه‌نویسی تنظیم کنید:

• navigationHeaderEnabled — کنترل می کند که آیا هدر پیمایش قابل مشاهده است (پیش فرض true است).
• navigationFooterEnabled — کنترل می کند که آیا پاورقی پیمایش قابل مشاهده است (پیش فرض true است).
• navigationHeaderPrimaryBackgroundColor — رنگ پس زمینه اصلی را برای سربرگ پیمایش تنظیم می کند.
• navigationHeaderSecondaryBackgroundColor — رنگ پس زمینه ثانویه را برای سرصفحه پیمایش تنظیم می کند.

مثال کد زیر روشن کردن قابلیت مشاهده برای سرصفحه و پاورقی، سپس تنظیم navigationHeaderPrimaryBackgroundColor به آبی و navigationHeaderSecondaryBackgroundColor را به قرمز نشان می دهد.

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

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

نمای سرصفحه لوازم جانبی ناوبری

می توانید برنامه خود را با جایگزین کردن نمای هدر پیمایش ثانویه با نمای لوازم جانبی سفارشی شده خود سفارشی کنید. شما این کار را با ایجاد یک نمای انجام می دهید که پروتکل GMSNavigationAccessoryView را پیاده سازی می کند. این پروتکل یک روش لازم دارد: -heightForAccessoryViewConstrainedToSize:onMapView: . حداکثر اندازه موجود برای نمای خود در mapView داده شده به شما داده می شود و شما باید ارتفاع مورد نیاز نمای خود را ارائه دهید.

سپس می‌توانید با فراخوانی setHeaderAccessoryView: MapView نماهای فعلی را متحرک می‌کند و سپس در نمای سفارشی شما متحرک می‌شود. هدر ناوبری باید قابل مشاهده باشد تا نمای سفارشی شما نمایش داده شود.

برای حذف نمای جانبی هدر سفارشی، nil به setHeaderAccessoryView:

اگر نمای شما باید در هر زمانی اندازه تغییر کند، می‌توانید invalidateLayoutForAccessoryView: را فراخوانی کنید، و در نمایی که نیاز به تغییر اندازه دارد عبور کنید.

مثال

مثال کد زیر یک نمای سفارشی را نشان می دهد که پروتکل GMSNavigationAccessoryView را پیاده سازی می کند. سپس از این نمای سفارشی برای تنظیم نمای لوازم جانبی هدر پیمایش سفارشی استفاده می شود.

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)

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

فهرست مسیرها

می توانید دستورالعمل های گام به گام را در برنامه خود ارائه دهید. مثال زیر یک راه ممکن برای انجام این کار را نشان می دهد. این مراحل ممکن است بسته به اجرای خودتان متفاوت باشد.

1. پس از اینکه setDestinations در GMSNavigator (ناوبر) با موفقیت تکمیل شد و guidanceActive در ناوبر فعال شد، یک دکمه نقطه ورود را فعال کنید.
2. پس از ضربه زدن کاربر بر روی دکمه نقطه ورود، یک GMSNavigationDirectionsListController (کنترل کننده) با ناوبری مرتبط با GMSMapView ( mapView ) ایجاد کنید.
3. کنترل‌کننده را به نمونه‌ای از UIViewController (کنترل‌کننده مشاهده) اضافه کنید، و directionsListView به عنوان یک نمای فرعی از کنترل‌کننده view اضافه کنید. متدهای reloadData و invalidateLayout روی کنترلر باید مانند UICollectionView فراخوانی شوند.
4. نمایش کنترلر را روی سلسله مراتب نمایش کنترلر برنامه فشار دهید.

مثال کد زیر افزودن یک DirectionsListViewController را نشان می دهد.

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()
  })
  ...
}

- (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];
  ...
}

...

نوار پیشرفت سفر

نوار پیشرفت سفر یک نوار عمودی است که هنگام شروع ناوبری در لبه سمت راست انتهایی نقشه ظاهر می شود. هنگامی که فعال باشد، یک نمای کلی برای کل سفر به همراه مقصد و موقعیت فعلی کاربر نمایش می دهد.

این امکان را برای کاربران فراهم می‌کند تا بدون نیاز به بزرگ‌نمایی، سریعاً هرگونه مشکل آتی مانند ترافیک را پیش‌بینی کنند. سپس در صورت لزوم می‌توانند مسیر سفر را تغییر دهند. اگر کاربر مسیر سفر را تغییر دهد، نوار پیشرفت بازنشانی می‌شود، گویی سفر جدیدی از آن نقطه شروع شده است.

نوار پیشرفت سفر نشانگرهای وضعیت زیر را نشان می دهد:

• وضعیت ترافیک - وضعیت ترافیک آینده.

• مکان فعلی - مکان فعلی راننده در سفر.

• مسیر سپری شده - بخش سپری شده از سفر.

نوار پیشرفت سفر را با تنظیم ویژگی navigationTripProgressBarEnabled در GMSUISettings فعال کنید.

mapView.settings.isNavigationTripProgressBarEnabled = true

mapView.settings.navigationTripProgressBarEnabled = YES;

چراغ های راهنمایی و رانندگی و علائم ایست

می‌توانید چراغ‌های راهنمایی و علائم توقف را در mapView فعال کنید. با استفاده از این ویژگی، کاربر می تواند نمایش چراغ های راهنمایی یا نمادهای ایست را در مسیر خود فعال کند و زمینه بهتری را برای سفرهای کارآمدتر و دقیق تر فراهم کند.

به طور پیش‌فرض، چراغ‌های راهنمایی و علائم توقف در Navigation SDK برای iOS غیرفعال هستند. برای فعال کردن این ویژگی، تنظیمات GMSMapView را برای هر گزینه به طور مستقل فراخوانی کنید: showsTrafficLights و showsStopSigns .

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

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

کنترل سرعت سنج

وقتی پیمایش فعال است و حالت سفر روی رانندگی تنظیم شده است، Navigation SDK برای iOS یک کنترل محدودیت سرعت را در گوشه پایینی نقشه نشان می دهد که محدودیت سرعت فعلی را نشان می دهد. هنگامی که راننده از حد مجاز سرعت فراتر رفت، کنترل برای نمایش سرعت سنج دوم با سرعت فعلی راننده گسترش می یابد.

می‌توانید سطوح هشدار را برای تغییر قالب‌بندی نمایشگر سرعت‌سنج زمانی که راننده به میزان مشخصی از حد مجاز سرعت فراتر می‌رود، تنظیم کنید. برای مثال، می‌توانید مشخص کنید که سرعت فعلی با رنگ متن قرمز زمانی که راننده از حد مجاز سرعت 5 مایل در ساعت فراتر می‌رود، و با رنگ پس‌زمینه قرمز زمانی که راننده 10 مایل بر ساعت از حد مجاز تجاوز می‌کند، با رنگ پس‌زمینه قرمز نمایش داده شود.

برای نمایش کنترل محدودیت سرعت، ویژگی shouldDisplaySpeedometer GMSUISettings را روی true تنظیم کنید. برای غیرفعال کردن نمایش کنترل محدودیت سرعت، shouldDisplaySpeedometer روی false تنظیم کنید.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

برای اطلاعات بیشتر در مورد تنظیم هشدارها برای سرعت سنج، به پیکربندی هشدارهای سرعت سنج مراجعه کنید.

نشانگرهای مقصد

می توانید با تنظیم ویژگی showsDestinationMarkers در GMSUISettings نشانگرهای مقصد را برای یک مسیر مشخص نشان دهید یا پنهان کنید. مثال زیر خاموش کردن نشانگرهای مقصد را نشان می دهد.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

ویژگی های تجربه نقشه

Navigation SDK این امکان را در اختیار شما قرار می دهد که تجربه ناوبری را برای کاربران خود سفارشی کنید. تغییراتی که در نمونه خود ایجاد می‌کنید در طول به‌روزرسانی بعدی برنامه شما توسط کاربر منعکس می‌شود.

حرکات پیش فرض نقشه را غیرفعال کنید

می‌توانید با تنظیم ویژگی‌های کلاس GMSUISettings ، که به عنوان ویژگی GMSMapView در دسترس است، حرکات پیش‌فرض روی نقشه را غیرفعال کنید. حرکات زیر را می توان به صورت برنامه ریزی فعال و غیرفعال کرد. توجه داشته باشید که غیرفعال کردن ژست دسترسی برنامه‌ای به تنظیمات دوربین را محدود نمی‌کند.

• scrollGestures - فعال یا غیرفعال بودن حرکات اسکرول را کنترل می کند. در صورت فعال بودن، کاربران می‌توانند انگشت خود را برای حرکت به دوربین بکشند.
• zoomGestures - فعال یا غیرفعال بودن حرکات زوم را کنترل می کند. در صورت فعال بودن، کاربران می‌توانند برای بزرگ‌نمایی دوربین، دو بار ضربه بزنند، با دو انگشت ضربه بزنند یا نیشگون بگیرند. توجه داشته باشید که با دوبار ضربه زدن یا نیشگون گرفتن در هنگام فعال بودن scrollGestures ممکن است دوربین به نقطه مشخص شده حرکت کند.
• tiltGestures - فعال یا غیرفعال بودن حرکات شیب را کنترل می کند. در صورت فعال بودن، کاربران می توانند از یک تند کشیدن عمودی با دو انگشت به پایین یا بالا برای کج کردن دوربین استفاده کنند.
• rotateGestures - فعال یا غیرفعال بودن حرکات چرخشی را کنترل می کند. در صورت فعال بودن، کاربران می توانند از حرکت چرخش دو انگشتی برای چرخاندن دوربین استفاده کنند.

در این مثال، هر دو حرکت حرکت و زوم غیرفعال شده است.

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

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

کنترل های موقعیت و عناصر UI

با استفاده از ویژگی‌های زیر می‌توانید کنترل‌ها و سایر عناصر رابط کاربری را نسبت به موقعیت هدر و پاورقی پیمایش قرار دهید:

• navigationHeaderLayoutGuide
• navigationFooterLayoutGuide

مثال کد زیر استفاده از راهنمای طرح‌بندی را برای قرار دادن یک جفت برچسب در نمای نقشه نشان می‌دهد:

/* 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

/* 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;

مخفی کردن مسیرهای جایگزین

هنگامی که رابط کاربری با اطلاعات بیش از حد به هم ریخته می شود، می توانید با نمایش مسیرهای جایگزین کمتری نسبت به حالت پیش فرض (دو) یا با نمایش هیچ مسیر جایگزین، درهم ریختگی را کاهش دهید. می توانید این گزینه را قبل از واکشی مسیرها با پیکربندی GMSNavigationRoutingOptions و تنظیم alternateRoutesStrategy با یکی از مقادیر شمارش زیر پیکربندی کنید:

مثال

مثال کد زیر نحوه پنهان کردن مسیرهای جایگزین را به طور کلی نشان می دهد.

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

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