שינוי ממשק המשתמש של הניווט

באמצעות Navigation SDK ל-iOS, אפשר לשנות את חוויית המשתמש במפה על ידי קביעת אילו מהפקדים והרכיבים המובנים של ממשק המשתמש יופיעו במפה ואילו תנועות תאפשרו. תוכלו גם לשנות את המראה החזותי של ממשק המשתמש של הניווט. עיינו בדף כללי המדיניות כדי לקבל הנחיות לגבי שינויים מקובלים בממשק המשתמש של הניווט.

פקדי ממשק המשתמש של המפה

ערכת הניווט SDK מספקת כמה פקדים מובנים בממשק המשתמש, שדומים לאלה שמופיעים באפליקציה של מפות Google ל-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;

לחצן מרכוז מחדש

כשהניווט מופעל, הלחצן 'מרכוז מחדש' מופיע כשהמשתמש גולל את תצוגת המפה ונעלם כשהמשתמש מקיש כדי למרכז אותה שוב. כדי לאפשר את הצגת הלחצן 'מרכוז', מגדירים את המאפיין recenterButtonEnabled של GMSUISettings ל-true. כדי למנוע את ההופעה של לחצן המרכוז מחדש, צריך להגדיר את recenterButtonEnabled לערך false.

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

אביזרים לממשק המשתמש של המפה

ערכת הניווט SDK מספקת אביזרים לממשק המשתמש שמופיעים במהלך הניווט, שדומים לאלה שמופיעים באפליקציה של מפות Google ל-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];

תצוגת כותרת של אביזר ניווט

כדי להתאים אישית את האפליקציה, אפשר להחליף את תצוגת כותרת הניווט המשנית בתצוגת אביזרים מותאמת אישית. כדי לעשות את זה, יוצרים תצוגה (View) שבה מוטמע הפרוטוקול GMSNavigationAccessoryView. לפרוטוקול הזה יש שיטה נדרשת אחת: -heightForAccessoryViewConstrainedToSize:onMapView:. אתם מקבלים את הגודל המקסימלי הזמין לתצוגה ב-mapView הנתון, וצריך לציין את הגובה הדרוש לתצוגה.

לאחר מכן תוכל להעביר את התצוגה הזו ל-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 כתצוגת משנה של בקר התצוגה. ה-methods 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. בעזרת התכונה הזו המשתמש יכול להפעיל את הצגת הרמזורים או את סימני העצירה לאורך המסלול, וכך לספק הקשר טוב יותר לנסיעות מדויקות ומדויקות יותר.

כברירת מחדל, רמזורים ותמרורי עצירה מושבתים ב-SDK לניווט ב-iOS. כדי להפעיל את התכונה הזו, קוראים להגדרות של GMSMapView לכל אפשרות בנפרד: showsTrafficLights ו-showsStopSigns.

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

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

שליטה במד המהירות

כשהניווט מופעל ומצב הנסיעה מוגדר לנהיגה, ערכת הניווט ל-iOS מציגה פקד של מגבלת מהירות בפינה התחתונה של המפה, שמציג את מגבלת המהירות הנוכחית. כשהנהג חורג מהמהירות המותרת, הלחצן מתרחב ומציג מד מהירות שני ביחס למהירות הנוכחית של הנהג.

אפשר להגדיר רמות התראה כדי לשנות את הפורמט של התצוגה של מד המהירות כשהנהג חורג בכמות מסוימת מהמהירות המותרת. לדוגמה, אפשר לציין שהמהירות הנוכחית תוצג בצבע טקסט אדום כשהנהג חורג מהמהירות המותרת ב-5 קמ"ש, ובצבע רקע אדום כשהנהג חורג מהמהירות המותרת ב-10 מייל לשעה.

כדי להציג את בקרת המהירות, מגדירים את המאפיין shouldDisplaySpeedometer של GMSUISettings ל-true. כדי להשבית את התצוגה של בקרת המהירות, מגדירים את shouldDisplaySpeedometer לערך false.

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

מידע נוסף על הגדרת התראות על מד המהירות זמין במאמר הגדרת התראות על מד מהירות.

סמני יעד

אפשר להציג או להסתיר את סמני היעד של מסלול נתון על ידי הגדרת המאפיין showsDestinationMarkers של GMSUISettings. בדוגמה הבאה מוצגת השבתה של סמני היעד.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

התכונות של חוויית השימוש במפה

SDK לניווט מאפשר לך לבצע התאמות אישיות נוספות בחוויית הניווט עבור המשתמשים. השינויים שתבצעו במכונה ישתקפו גם בזמן העדכון הבא של האפליקציה אצל המשתמש.

השבתת תנועות ברירת מחדל במפה

אפשר להשבית את תנועות ברירת המחדל במפה על ידי הגדרת המאפיינים של המחלקה GMSUISettings, שזמינה כמאפיין של GMSMapView. ניתן להפעיל ולהשבית את התנועות הבאות באופן פרוגרמטי. שימו לב שהשבתת התנועה לא תגביל את הגישה הפרוגרמטית להגדרות המצלמה.

• scrollGestures - קובע אם תנועות גלילה מופעלות או מושבתות. אם המדיניות מופעלת, המשתמשים יכולים להחליק כדי להזיז את המצלמה.
• zoomGestures - קובע אם תנועות זום מופעלות או מושבתות. אם המדיניות מופעלת, המשתמשים יכולים להקיש הקשה כפולה, להקיש בשתי אצבעות או לעשות תנועת צביטה כדי לשנות את מרחק התצוגה של המצלמה. הערה: הקשה כפולה או תנועת צביטה כשהתכונות scrollGestures מופעלות עשויות להזיז את המצלמה לנקודה שצוינה.
• tiltGestures - קובע אם תנועות הטיה יופעלו או יושבתו. אם המדיניות מופעלת, המשתמשים יכולים להחליק לאורך או למעלה בעזרת שתי אצבעות כדי להטות את המצלמה.
• rotateGestures - קובע אם תנועות סיבוב מופעלות או מושבתות. אם ההגדרה הזו מופעלת, המשתמשים יכולים לבצע תנועת סיבוב בעזרת שתי אצבעות כדי לסובב את המצלמה.

בדוגמה זו, התנועות להזזה ולזום הושבתו.

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

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

בקרת מיקום ורכיבים בממשק המשתמש

אפשר למקם את הפקדים ורכיבים אחרים בממשק המשתמש ביחס למיקום של הכותרת העליונה והכותרת התחתונה של הניווט באמצעות המאפיינים הבאים:

• 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){...}];