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

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

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

توفّر حزمة تطوير البرامج للتنقّل بعض عناصر التحكّم في واجهة المستخدم المضمّنة المشابهة لتلك المتوفّرة في تطبيق "خرائط 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"

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

يتم تلقائيًا إيقاف إشارات المرور وعلامات التوقف في حزمة تطوير البرامج (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;

ميزات تجربة "خرائط Google"

تتيح لك حزمة 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){...}];