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

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

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

‏Navigation 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;

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

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

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

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

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

כדי להסיר את תצוגת האביזר של הכותרת בהתאמה אישית, מעבירים את הערך 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 ב-Navigator הופעל.
2. כשמשתמש מקשיק על לחצן נקודת הכניסה, יוצרים GMSNavigationDirectionsListController (בקר) עם הניווט שמשויך ל-GMSMapView (mapView).
3. מוסיפים את הבקר למכונה של UIViewController (בקר תצוגה) ומוסיפים את directionsListView כתצוגת משנה של בקר התצוגה. צריך להפעיל את השיטות reloadData ו-invalidateLayout בבקר כמו שמפעילים את UICollectionView.
4. דוחפים את ה-View Controller להיררכיית ה-View Controller של האפליקציה.

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

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

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

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

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

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