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

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

אמצעי בקרה בממשק המשתמש של המפה

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

מצפן

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

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

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

התמיכה במצבי יום ולילה ובמצב כהה.

התכונה 'מצפן' מופעלת כברירת מחדל בגרסה 11.0.0 ואילך. כדי להשבית את המצפן, צריך להגדיר את המאפיין compassButton של GMSUISettings ל-false.

Swift

mapView.settings.compassButton = false

Objective-C

mapView.settings.compassButton = NO;

הכפתור 'המיקום שלי'

הלחצן 'המיקום שלי' מופיע בפינה השמאלית התחתונה של המסך רק כשהוא מופעל. כשמשתמש לוחץ על הלחצן, המצלמה מתמקדת במיקום הנוכחי של המשתמש אם המיקום שלו ידוע. כדי להפעיל את הכפתור, צריך להגדיר את המאפיין myLocationButton של GMSUISettings לערך true.

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

כפתור המרכוז מחדש

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

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

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

‫Navigation SDK מספק רכיבי UI שמופיעים במהלך הניווט, בדומה לאלה שמופיעים באפליקציית מפות Google ל-iOS. אפשר לשנות את רמת החשיפה או את המראה החזותי של אמצעי הבקרה האלה כמו שמתואר בקטע הזה. השינויים שתבצעו כאן ישתקפו בנסיעה הבאה של המשתמש.

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

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

בדוגמת הקוד הבאה מוצגות הפעלה של חשיפת הכותרת והכותרת התחתונה, הגדרה של navigationHeaderPrimaryBackgroundColor לכחול ושל navigationHeaderSecondaryBackgroundColor לאדום.

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

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

אחר כך אפשר להעביר את התצוגה הזו אל mapView על ידי קריאה ל-setHeaderAccessoryView: מערכת mapView תבצע אנימציה של הסרת התצוגות הנוכחיות, ואז תבצע אנימציה של הוספת התצוגה המותאמת אישית. כדי שהתצוגה המותאמת אישית תוצג, כותרת הניווט צריכה להיות גלויה.

כדי להסיר את תצוגת האביזר של הכותרת המותאמת אישית, מעבירים nil אל setHeaderAccessoryView:.

אם אתם צריכים לשנות את הגודל של התצוגה בכל שלב, אתם יכולים לקרוא ל-invalidateLayoutForAccessoryView: ולהעביר את התצוגה שצריך לשנות את הגודל שלה.

דוגמה

בדוגמת הקוד הבאה מוצגת תצוגה מותאמת אישית שמטמיעה את הפרוטוקול GMSNavigationAccessoryView. התצוגה המותאמת אישית הזו משמשת להגדרת תצוגת עזר מותאמת אישית של כותרת הניווט.

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

צבעי הכותרת במצב תאורה חלשה

‫Navigation SDK for iOS מחשב את מצב התאורה המומלץ על סמך השעה ביום והמיקום הנוכחי של המכשיר, וקורא לשיטת המאזין GMSNavigatorListener.didChangeSuggestedLightingMode כשמצב התאורה המומלץ משתנה (למשל בזריחה או בשקיעה). אפשר לשנות את ההתנהגות של מצב תאורה חלשה באופן פרוגרמטי בדרכים הבאות:

רשימת מסלולי הגעה

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

  1. אחרי ש-setDestinations ב-GMSNavigator (הניווט) מסתיים בהצלחה ו-guidanceActive בניווט מופעל.
  2. כשמשתמש לוחץ על כפתור נקודת הכניסה, צריך ליצור GMSNavigationDirectionsListController (בקר) עם רכיב הניווט שמשויך ל-GMSMapView (mapView).
  3. מוסיפים את בקר המשחקים למופע של UIViewController (בקר תצוגה), ומוסיפים את directionsListView כתצוגת משנה של בקר התצוגה. צריך להפעיל את השיטות reloadData ו-invalidateLayout בבקר כמו שמפעילים UICollectionView.
  4. מעבירים את בקר התצוגה להיררכיית בקרי התצוגה של האפליקציה.

בדוגמת הקוד הבאה אפשר לראות איך מוסיפים DirectionsListViewController.

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

...

סרגל התקדמות בנסיעה

הוספנו את סרגל ההתקדמות של הנסיעה לניווט.

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

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

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

  • סטטוס התנועה – הסטטוס של התנועה הקרובה.

  • המיקום הנוכחי – המיקום הנוכחי של הנהג בנסיעה.

  • הזמן שחלף במסלול – החלק של הנסיעה שכבר עבר.

כדי להפעיל את סרגל ההתקדמות בנסיעה, צריך להגדיר את המאפיין navigationTripProgressBarEnabled ב-GMSUISettings.

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

המיקום של סרגל ההתקדמות של הנסיעה

  • הצד הימני של הסרגל מיושר בערך עם הצד הימני של מד המהירות, הלוגו של Google והלחצן 'מרכוז מחדש' (אם הוא גלוי). הרוחב הוא 12 נקודות.
  • סרגל התקדמות הנסיעה מגיב באופן דינמי לשטח האנכי במסך. החלק התחתון של הסרגל ממוקם במרחק של 210 נקודות מהחלק התחתון של המסך. החלק העליון של סרגל התקדמות הנסיעה נשאר במרחק של 170 נקודות לפחות מהחלק העליון של המסך, והגובה המקסימלי של הסרגל הוא 400 נקודות.
  • אם סרגל ההתקדמות של הנסיעה חופף לכותרת של הניווט או לרכיבי ממשק משתמש אחרים של הניווט, הוא יופיע מתחת לרכיבים האחרים.

Prompt Visibility API (ניסיוני)

בעזרת Prompt Visibility API אפשר למנוע התנגשויות בין רכיבי ממשק משתמש שנוצרו על ידי Navigation SDK לבין רכיבי ממשק משתמש מותאמים אישית משלכם. לשם כך, מוסיפים listener כדי לקבל קריאה חוזרת לפני שרכיב ממשק משתמש של Navigation SDK עומד להופיע, וברגע שהרכיב מוסר. מידע נוסף, כולל דוגמאות קוד, זמין בקטע Prompt Visibility API בדף Configure real-time-disruptions.

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

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

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

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

Swift

mapView.settings.shouldDisplaySpeedometer = true

Objective-C

mapView.settings.shouldDisplaySpeedometer = YES;

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

סמני יעד

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

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

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

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

הדגשת היעד והכניסות

הדגשת היעד והכניסות

כשיוצרים יעד באמצעות placeID, בניין היעד יודגש ויוצג סמל כניסה בכל הזדמנות. הסימנים החזותיים האלה עוזרים למשתמשים להבחין בין היעדים ולנווט ליעד הרצוי.

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

הצגת בניינים בתלת ממד במהלך הניווט

הצגת בניינים בתלת ממד במהלך הניווט

כברירת מחדל, בניינים בתלת ממד מוצגים במהלך הניווט. כדי להשבית את התכונה הזו, מגדירים את buildingsEnabled ל-false (Swift) או ל-NO (Objective-C).

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

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

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

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

Swift

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

Objective-C

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

אמצעי בקרה למיקום ורכיבים בממשק המשתמש

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

  • navigationHeaderLayoutGuide
  • navigationFooterLayoutGuide
  • bottomTrailingButtonsLayoutGuide

בדוגמת הקוד הבאה אפשר לראות איך משתמשים בקווי העזר לפריסה כדי למקם צמד תוויות בתצוגת המפה:

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;

דוגמה לשימוש ב-bottomTrailingButtonsLayoutGuide כדי למקם את הלחצן של הדיווח על שיבושים בזמן אמת מופיעה במאמר הגדרת דיווח על שיבושים בזמן אמת.

הסתרת מסלולים חלופיים

אם ממשק המשתמש עמוס מדי במידע, אפשר להפחית את העומס על ידי הצגת פחות מסלולים חלופיים מברירת המחדל (שניים), או על ידי אי הצגת מסלולים חלופיים בכלל. אפשר להגדיר את האפשרות הזו לפני שמחלצים את המסלולים, על ידי הגדרת GMSNavigationRoutingOptions והגדרת alternateRoutesStrategy עם אחד מהערכים הבאים:

ערך מספורתיאור
GMSNavigationAlternateRoutesStrategyAll ברירת מחדל. מוצגים עד שני מסלולים חלופיים.
GMSNavigationAlternateRoutesStrategyOne מוצג מסלול חלופי אחד (אם יש כזה).
GMSNavigationAlternateRoutesStrategyNone הסתרת מסלולים חלופיים.

דוגמה

בדוגמת הקוד הבאה אפשר לראות איך להסתיר לגמרי מסלולים חלופיים.

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