تعديل واجهة مستخدم التنقل

باستخدام حزمة تطوير البرامج Navigation SDK لنظام التشغيل iOS، يمكنك تعديل تجربة المستخدم مع خريطتك من خلال تحديد عناصر واجهة المستخدم المضمّنة وعناصر التحكّم التي تظهر على الخريطة والإيماءات التي تسمح بها. يمكنك أيضًا تعديل المظهر المرئي لواجهة مستخدم شريط التنقّل. راجِع صفحة السياسات للحصول على إرشادات بشأن التعديلات المقبولة على واجهة مستخدم التنقّل.

عناصر التحكّم في واجهة المستخدم في الخريطة

توفّر حزمة تطوير البرامج Navigation SDK بعض عناصر التحكّم في واجهة المستخدم المضمّنة المشابهة لتلك المتوفّرة في تطبيق "خرائط Google" لنظام التشغيل iOS. يمكنك تبديل مستوى ظهور عناصر التحكّم هذه باستخدام فئة GMSUISettings. تظهر التغييرات التي تجريها على هذا الصف على الخريطة على الفور.

البوصلة

توفّر حزمة تطوير البرامج (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;

ملحقات واجهة مستخدِم "خرائط Google"

توفّر حزمة تطوير البرامج 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 المحدّد، ويجب تحديد الارتفاع الذي يتطلّبه عرضك.

يمكنك بعد ذلك تمرير هذا العرض إلى 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 كعرض فرعي لعنصر التحكّم في العرض. يجب استدعاء 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. باستخدام هذه الميزة، يمكن للمستخدم تفعيل عرض مصابيح الإشارة أو رمز إشارة التوقف على طول المسار، ما يقدّم سياقًا أفضل لرحلات أكثر كفاءة وermatًا.

تكون إشارات المرور وعلامات التوقف غير مفعّلة تلقائيًا في حزمة تطوير البرامج (SDK) لميزة التنقّل على نظام التشغيل iOS. لتفعيل هذه الميزة، يمكنك الاتصال بإعدادات GMSMapView لكل خيار بشكل مستقل: showsTrafficLights وshowsStopSigns.

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

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

التحكّم في عدّاد السرعة

عند تفعيل التنقّل وضبط وضع التنقّل على "القيادة"، يعرض Navigation SDK لنظام التشغيل iOS عنصر تحكّم في الحد الأقصى للسرعة في الزاوية السفلية من الخريطة يعرض الحد الأقصى الحالي للسرعة. عندما يتجاوز السائق الحدّ الأقصى للسرعة، يتم توسيع وحدة التحكّم لعرض عداد سرعة ثانٍ يعرض السرعة الحالية للسائق.

يمكنك ضبط مستويات التنبيهات لتغيير تنسيق شاشة مقياس السرعة عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار محدّد. على سبيل المثال، يمكنك تحديد أن يتم عرض السرعة الحالية بلون نص أحمر عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار 5 أميال في الساعة، وبلون خلفية أحمر عندما يتجاوز السائق الحد الأقصى للسرعة بمقدار 10 أميال في الساعة.

لعرض عنصر التحكّم في الحدّ الأقصى للسرعة، اضبط السمة 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){...}];