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

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

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

توفر حزمة 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;

ملحقات واجهة المستخدم للخريطة

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

يمكنك بعد ذلك تمرير هذا العرض إلى الخريطة في عرض الخريطة من خلال طلب الرقم 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;

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

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

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

لعرض عنصر التحكّم في حدّ السرعة، اضبط السمة shouldDisplaySpeedometer من GMSUISettings إلى true. لتعطيل عرض عنصر التحكم في حد السرعة، اضبط shouldDisplaySpeedometer إلى false

mapView.shouldDisplaySpeedometer = true

mapView.shouldDisplaySpeedometer = YES;

لمزيد من المعلومات حول ضبط تنبيهات عدّاد السرعة، يمكنك الاطّلاع على ضبط تنبيهات عدّاد السرعة

علامات الوجهات

يمكنك إظهار أو إخفاء علامات الوجهة لمسار معين من خلال تعيين سمة showsDestinationMarkers من GMSUISettings المثال التالي تعرض إيقاف علامات الوجهة.

mapView.settings.showsDestinationMarkers = false

mapView.settings.showsDestinationMarkers = NO;

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

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