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

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

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

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

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

מצפן

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

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

כברירת מחדל, המצפן מושבת. אפשר להפעיל את המצפן על ידי הגדרת המאפיין compassButton של GMSUISettings ל-YES. עם זאת, לא ניתן לאלץ את הצגת המצפן תמיד.

Swift

mapView.settings.compassButton = true

Objective-C

mapView.settings.compassButton = YES;

לחצן 'המיקום שלי'

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

Swift

mapView.settings.myLocationButton = true

Objective-C

mapView.settings.myLocationButton = YES;

לחצן מרכוז

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

Swift

mapView.settings.isRecenterButtonEnabled = true

Objective-C

mapView.settings.recenterButtonEnabled = YES;

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

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

כותרת עליונה וכותרת תחתונה בניווט

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

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

• navigationHeaderEnabled — קובע אם כותרת הניווט גלויה (ברירת המחדל היא true).
• navigationFooterEnabled - קובע אם הכותרת התחתונה של הניווט גלויה (ברירת המחדל היא true).
• navigationHeaderPrimaryBackgroundColor — מגדיר את צבע הרקע הראשי של כותרת הניווט.
• navigationHeaderSecondaryBackgroundColor — מגדיר את צבע הרקע המשני של כותרת הניווט.

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

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

הערה: בסמארטפונים מסוימים, ייתכן שה-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];

רשימת הוראות נסיעה

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

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

הערות:

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

הקוד שבדוגמה הבאה מראה איך מוסיפים 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)
  // 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()
  })
  ...
}

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

Swift

mapView.settings.isNavigationTripProgressBarEnabled = true

Objective-C

mapView.settings.navigationTripProgressBarEnabled = YES;

רמזורים ותמרורים

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

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

Swift

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

Objective-C

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

בקרת מהירות

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

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

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

Swift

mapView.shouldDisplaySpeedometer = true

Objective-C

mapView.shouldDisplaySpeedometer = YES;

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

סמני יעד

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

Swift

mapView.settings.showsDestinationMarkers = false

Objective-C

mapView.settings.showsDestinationMarkers = NO;

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

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

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

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

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

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

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;

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

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

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

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