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

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

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

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

نکته: هر کنترل دارای یک موقعیت از پیش تعیین شده نسبت به لبه نقشه است. می‌توانید با قرار دادن نقشه، کنترل‌ها را از لبه‌ها دور کنید.

قطب نما

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

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

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

سویفت

mapView.settings.compassButton = true

هدف-C

mapView.settings.compassButton = YES;

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

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

سویفت

mapView.settings.myLocationButton = true

هدف-C

mapView.settings.myLocationButton = YES;

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

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

سویفت

mapView.settings.isRecenterButtonEnabled = true

هدف-C

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

هدف-C

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

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

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

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

توجه: 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)

هدف-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];

فهرست مسیرها

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

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

یادداشت ها:

• فهرست مسیرها برای استفاده مجدد در نظر گرفته نشده است و باید برای هر جلسه ناوبری دوباره ایجاد شود.
• کنترلر فقط یک اشاره ضعیف به ناوبر دارد.
• برای یک نمونه کامل، به برنامه آزمایشی ارائه شده در بسته دانلود شده ذکر شده در بخش Setup your project مراجعه کنید.

مثال کد زیر افزودن یک 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()
  })
  ...
}

هدف-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];
  ...
}

...

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

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

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

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

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

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

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

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

سویفت

mapView.settings.isNavigationTripProgressBarEnabled = true

هدف-C

mapView.settings.navigationTripProgressBarEnabled = YES;

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

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

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

توجه: چراغ های راهنمایی و رانندگی و علائم ایست فقط در هنگام ناوبری فعال نمایش داده می شوند.

سویفت

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

هدف-C

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

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

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

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

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

سویفت

mapView.shouldDisplaySpeedometer = true

هدف-C

mapView.shouldDisplaySpeedometer = YES;

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

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

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

سویفت

mapView.settings.showsDestinationMarkers = false

هدف-C

mapView.settings.showsDestinationMarkers = NO;

توجه: می توانید یک تصویر سفارشی را به عنوان نشانگر مشخص کنید، اما SDK در حال حاضر از برچسب زدن این تصاویر با متن پشتیبانی نمی کند. برای اطلاعات بیشتر، نشانگرها را ببینید.

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

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

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

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

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

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

سویفت

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

هدف-C

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

هدف-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;

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

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

مقدار شمارش	توضیحات
GMSNavigationAlternateRoutesStrategyAll	پیش فرض حداکثر دو مسیر جایگزین را نمایش می دهد.
GMSNavigationAlternateRoutesStrategyOne	یک مسیر جایگزین (در صورت وجود) را نشان می دهد.
GMSNavigationAlternateRoutesStrategy هیچکدام	مسیرهای جایگزین را پنهان می کند.

مثال

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

سویفت

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

هدف-C

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

هشدار: این ویژگی در حال حاضر با اولویت مسیریابی کوتاه ترین مسیر سازگار نیست. استفاده همزمان از هر دو ویژگی می تواند رفتار غیرمنتظره ای ایجاد کند.