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

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

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

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

מצפן

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

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

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

המצפן תומך במצבי יום ולילה, וגם במצב כהה.

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

mapView.settings.compassButton = false

mapView.settings.compassButton = NO;

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

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

mapView.settings.myLocationButton = true

mapView.settings.myLocationButton = YES;

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

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

mapView.settings.isRecenterButtonEnabled = true

mapView.settings.recenterButtonEnabled = YES;

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

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

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

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

מצבים רגילים ומצבים של תאורה חלשה

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

• כדי לבחור מתי להשתמש במצב רגיל ובמצב תאורה חלשה, משתמשים ב-enum‏ GMSNavigationLightingMode.
• כדי להגדיר את צבעי הרקע הראשי והמשני של מצב תאורה חלשה, מגדירים ערכים למאפיינים navigationHeaderPrimaryBackgroundColorNightMode ו-navigationHeaderSecondaryBackgroundColorNightMode.

רשימת הוראות הגעה

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

1. מפעילים לחצן של נקודת כניסה אחרי ש-setDestinations ב-GMSNavigator (הכלי לבחירת אפליקציות) הסתיים בהצלחה ו-guidanceActive בכלי לבחירת אפליקציות הופעל.
2. כשמשתמש לוחץ על כפתור נקודת הכניסה, יוצרים GMSNavigationDirectionsListController (בקר) עם רכיב הניווט שמשויך ל-GMSMapView (mapView).
3. מוסיפים את בקר המשחקים למופע של UIViewController (בקר תצוגה), ומוסיפים את directionsListView כתצוגת משנה של בקר התצוגה. צריך להפעיל את השיטות 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)
  // 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()
  })
  ...
}

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

mapView.settings.isNavigationTripProgressBarEnabled = true

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.

mapView.settings.shouldDisplaySpeedometer = true

mapView.settings.shouldDisplaySpeedometer = YES;

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

סמני יעד

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

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

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

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

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

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

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

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

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

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

אפשר להשבית את מחוות ברירת המחדל במפה על ידי הגדרת מאפיינים של המחלקה 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
• bottomTrailingButtonsLayoutGuide

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

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

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

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

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