تخصيص واجهة مستخدم iOS

باستخدام حزمة SDK للمستهلك، يمكنك تطبيق علامات مخصصة وتوجيه الخطوط المتعددة إلى تصميم تطبيقك. تمكن عناصر التصميم هذه تطبيق المستهلك من عرض معاينة ديناميكية لمسار المركبة.

يصف هذا الدليل الخيارات المتوفّرة في حزمة SDK في السمة consumerMapStyleCoordinator. وتتوفّر هذه السمة من خلال فئة GMTCMapView. ولا يشمل هذا القسم سوى عناصر واجهة المستخدم ويفترض أن لديك تطبيق "مستهلك" يعمل بشكلٍ سليم. وللحصول على معلومات حول إعداد خدمات الخلفية التي تحتاجها "حزمة تطوير البرامج (SDK) للمستهلكين"، يمكنك الاطّلاع على بدء استخدام Fleet Engine.

إعداد خيارات تخصيص واجهة المستخدم

في GMTCMapViewDelegate، يتم الإشارة إلى طريقة معاودة الاتصال المقترَحة المستخدَمة لضبط خيارات تخصيص واجهة المستخدم في البداية. يتم تفعيل معاودة الاتصال mapViewDidInitialize عندما يكون الكائن GMTCMapView جاهزًا لعرض الخريطة. تتم تهيئة منسق النمط، ولكن لا توجد عناصر لواجهة المستخدم.

Swift

/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}

Objective-C

/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}

العلامات المخصصة

يستخدم المثال التالي GMTCMapView لتخصيص أنماط العلامات. لضبط نوع العلامة وخصائصها، استخدم setMarkerStyleOptions(_:markerType:). تلغي خيارات العلامة المخصصة القيم التلقائية التي تقدمها حزمة تطوير البرامج للمستهلك.

Swift

/** ViewController.swift */

private func changeMarkerStyle(
  markerStyleOptions: GMTCMarkerStyleOptions?,
  markerType: GMTCCustomizableMarkerType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: markerType)
}

/** To restore the default values, call setMarkerStyleOptions(_:markerType:) using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

private func retrieveMarkerStyle(markerType: GMTCCustomizableMarkerType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  let markerStyleOptions = styleCoordinator.markerStyleOptions(for: markerType)
}

Objective-C

/** ViewController.h */

- (void)changeMarkerStyle:(nullable GMTCMarkerStyleOptions *)markerStyleOptions
               markerType:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:markerType];
}

/** To restore the default values, call setMarkerStyleOptions:markerStyleOptions:markerType: using nil for the GMTCMarkerStyleOptions parameter.
Here is an example of retrieving the active GMTCMarkerStyleOptions. */

- (void)retrieveMarkerStyle:(GMTCCustomizableMarkerType)markerType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'markerStyleOptions' contains the stored style options for this marker type.
  GMTCMarkerStyleOptions *markerStyleOptions = [styleCoordinator markerStyleOptionsForType:markerType];
}

أنواع العلامات

تتوفر العلامات التالية للتخصيص:

• GMTCCustomizableMarkerType.unknown
• GMTCCustomizableMarkerType.tripPickupPoint
• GMTCCustomizableMarkerType.tripDropoffPoint
• GMTCCustomizableMarkerType.tripVehicle
• GMTCCustomizableMarkerType.intermediateDestination

يمكنك استخدام "GMTCCustomizableMarkerType.tripPickupPoint" و"GMTCCustomizableMarkerType.intermediateDestination" و"GMTCCustomizableMarkerType.tripDropoffPoint" لتخصيص نقاط الطريق أثناء "مستوى تقدّم الرحلة" و"الطلب".

يمكنك استخدام "GMTCCustomizableMarkerType.tripVehicle" لتخصيص رمز المركبة أثناء عرض "رحلة" و"تقدم الطلب". لا يتغير رمز العلامة وفقًا لنوع المركبة الفعلي للرحلة.

خيارات العلامات

الخصائص القابلة للتخصيص المتاحة لكل علامة هي مجموعة فرعية من الخصائص التي توفرها "خرائط Google" MarkerOptions. يتم إنشاء حزمة SDK الخاصة بالمستهلك GMTCMarkerStyleOptions باستخدام م إعداد، وهي غير قابلة للتغيير بعد إنشائها. ويتم توفير قيم افتراضية لكل خاصية، لذلك يلزم تحديد قيم مخصصة فقط.

السمات التالية متاحة للتخصيص:

• groundAnchor
• isVisible
• iconView
• icon
• zIndex
• isFlat

يعادل ضبط isVisible على "خطأ" عملية "إيقاف" العلامة. يجب توفير بيانات كافية للسماح لك باستخدام عنصر واجهة المستخدم الخاص بك بدلاً منه.

مثال

Swift

/** MapViewController.swift */

private func updateMarkerUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The marker type that you would like to set custom UI options for.
  let customizableMarkerType = GMTCCustomizableMarkerType.tripVehicle

  // Initializing marker options.
  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = icon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: customizableMarkerType)

  // Reset marker options to default values.
  consumerMapStyleCoordinator.setMarkerStyleOptions(nil, markerType: customizableMarkerType)
}

Objective-C

/** MapViewController.m */

- (void)updateMarkerUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The marker type that you would like to set custom UI options for.
  GMTCCustomizableMarkerType customizableMarkerType = GMTCCustomizableMarkerTypeTripVehicle;

  // Initializing marker options.
  GMTCMutableMarkerStyleOptions *markerStyleOptions =
      [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = icon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:customizableMarkerType];

  // Reset marker options to default values.
  [consumerMapStyleCoordinator setMarkerStyleOptions:nil markerType:customizableMarkerType];
}

تعديلات ديناميكية للوقت المقدّر للوصول لعلامات الاستلام

لإنشاء علامة استلام تعرض ديناميكيًا الوقت المقدّر للوصول الذي يتم تعديله بشكل دوري، عدِّل خيارات نمط العلامة لـ GMTCCustomizableMarkerType.tripPickupPoint.

مثال

Swift

/** MapViewController.swift */

/// Updates the ETA every minute by creating a Timer that repeats every minute.
private func schedulePickupMarkerStyleUpdates() {
  Timer.scheduledTimer(
    timeInterval: 60.0,  // Update marker ETA every minute.
    target: self,
    selector: #selector(updatePickupMarkerETA),
    userInfo: nil,
    repeats: true)
}

/// Updates the marker options for GMTCCustomizableMarkerType.tripPickupPoint for the current time.
@objc private func updatePickupMarkerETA() {
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator
  let previousOptions = consumerMapStyleCoordinator.markerStyleOptions(for: .tripPickupPoint)

  // Get updated ETA icon.
  let updatedETAIcon = pickupIconForCurrentTime()

  let markerStyleOptions = GMTCMutableMarkerStyleOptions()
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor
  markerStyleOptions.icon = updatedETAIcon
  markerStyleOptions.zIndex = 100
  markerStyleOptions.isFlat = false
  markerStyleOptions.isVisible = true

  consumerMapStyleCoordinator.setMarkerStyleOptions(markerStyleOptions, markerType: .tripPickupPoint)
}

Objective-C

/** MapViewController.m */

/** Updates the ETA every minute by creating an NSTimer that repeats every minute. */
- (void)schedulePickupMarkerStyleUpdates {
  [NSTimer scheduledTimerWithTimeInterval:60.0 // Update marker ETA every minute.
                                   target:self
                                 selector:@selector(updatePickupMarkerETA)
                                 userInfo:nil
                                  repeats:YES];
}

/** Updates the marker options for GMTCCustomizableMarkerTypeTripPickupPoint for the current time. */
- (void)updatePickupMarkerETA {
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];
  GMTCMarkerStyleOptions *previousOptions = [consumerMapStyleCoordinator markerStyleOptionsForType:GMTCCustomizableMarkerTypeTripPickupPoint];

  // Get updated ETA icon.
  UIImage *updatedETAIcon = [self pickupIconForCurrentTime];

  GMTCMutableMarkerStyleOptions *markerStyleOptions =
                               [[GMTCMutableMarkerStyleOptions alloc] init];
  markerStyleOptions.groundAnchor = kGMSMarkerDefaultGroundAnchor;
  markerStyleOptions.icon = updatedETAIcon;
  markerStyleOptions.zIndex = 100;
  markerStyleOptions.isFlat = NO;
  markerStyleOptions.isVisible = YES;

  [consumerMapStyleCoordinator setMarkerStyleOptions:markerStyleOptions markerType:GMTCCustomizableMarkerTypeTripPickupPoint];
}

خطوط متعدّدة مخصّصة

تم ضبط تخصيص الخطوط المتعددة باستخدام GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:).

يوضح المثال التالي كيفية ضبط خيارات النمط المتعدد الخطوط:

Swift

/** ViewController.swift */

private func changePolylineStyleOptions(
  polylineStyleOptions: GMTCPolylineStyleOptions?,
  polylineType: GMTCPolylineType
) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator
  styleCoordinator.setPolylineStyleOptions(polylineStyleOptions, polylineType: polylineType)
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions(_:polylineType:) with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

private func retrievePolylineStyleOptions(for polylineType: GMTCPolylineType) {
  let styleCoordinator = mapView.consumerMapStyleCoordinator

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  let polylineStyleOptions = styleCoordinator.polylineStyleOptions(for: polylineType)
}

Objective-C

/** ViewController.h */

- (void)changePolylineStyleOptions:(nullable GMTCPolylineStyleOptions *)polylineStyleOptions
                      polylineType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;
  [styleCoordinator setPolylineStyleOptions:polylineStyleOptions polylineType:polylineType];
}

/* Setting custom polyline options will override the default values provided by the Consumer SDK.
The default values can be restored by calling setPolylineStyleOptions:polylineType: with nil for the GMTCPolylineStyleOptions.
The active GMTCPolylineStyleOptions can be retrieved via */

- (void)retrievePolylineStyleOptionsForType:(GMTCPolylineType)polylineType {
  GMTCConsumerMapStyleCoordinator *styleCoordinator = _mapView.consumerMapStyleCoordinator;

  // The 'polylineStyleOptions' contains the stored style options for this polyline type.
  GMTCPolylineStyleOptions *polylineStyleOptions = [styleCoordinator polylineStyleOptionsForType:polylineType];
}

أنواع الخطوط المتعددة

تتوفّر أنواع الخطوط المتعددة التالية للتخصيص:

• GMTCPolylineType.activeRoute
• GMTCPolylineType.remainingRoute

يتم عرض الرمزين GMTCPolylineType.activeRoute وGMTCPolylineType.remainingRoute طوال فترة تقدّم الرحلة والطلب. GMTCPolylineType.activeRoute هو المسار الذي تسلكه المركبة إلى النقطة التالية للراكب، سواء كانت الاستلام أو النزول. السمة GMTCPolylineType.remainingRoute هي الجزء من الرحلة المتبقية بعد إكمال المركبة GMTCPolylineType.activeRoute.

خصائص الخطوط المتعددة

الخصائص القابلة للتخصيص المتاحة لكل خط متعدد الخطوط هي مجموعة فرعية من الخصائص المتوفرة على "خرائط Google" PolylineOptions. تم إنشاء GMTCPolylineStyleOptions حزمة SDK الخاصة بالمستهلك باستخدام م إعداد. ويمكن أن تكون غير قابلة للتغيير أو قابلة للتغيير إذا كنت ترغب في توفير قيم مخصصة لأي خاصية. يتم توفير القيم التلقائية لكل خاصية

السمات التالية متاحة للتخصيص:

• color
• width
• isVisible
• isTrafficEnabled

يعادل ضبط isVisible على false إيقاف الخطوط المتعددة. بشكل تلقائي، يتم ضبط isTrafficEnabled على false.

مثال

Swift

/** MapViewController.swift */

private func updatePolylineUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The polyline type that you would like to set custom UI options for.
  let customizablePolylineType = GMTCPolylineType.activeRoute

  // Initializing polyline options with default values (immutable version).
  let polylineStyleOptions = GMTCPolylineStyleOptions()
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    polylineStyleOptions, polylineType: customizablePolylineType)

  // Initializing polyline options with custom values (mutable version).
  let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
  mutablePolylineStyleOptions.isVisible = true
  mutablePolylineStyleOptions.isTrafficEnabled = true
  mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
  mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    mutablePolylineStyleOptions, polylineType: customizablePolylineType)

  // Reset polyline options to default values.
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    nil, polylineType: customizablePolylineType)
}

Objective-C

/** MapViewController.m */

- (void)updatePolylineUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The polyline type that you would like to set custom UI options for.
  GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;

  // Initializing polyline options with default values (immutable version).
  GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
  [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Initializing polyline options with custom values (mutable version).
  GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
  mutablePolylineStyleOptions.isVisible = YES;
  mutablePolylineStyleOptions.isTrafficEnabled = YES;
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
  [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Reset polyline options to default values.
  [consumerMapStyleCoordinator setPolylineStyleOptions:nil
                                          polylineType:customizablePolylineType];
}

الخطوط المتعددة الواعية بالزيارات

تكون طبقة حركة المرور في الخط المتعدد غير مفعّلة بشكلٍ تلقائي. وعند تفعيله باستخدام polylineStyleOptions.isTrafficEnabled = true، يتم رسم المقاطع التي تمثّل مساحات من الزيارات غير العادية على أنّها مسار.

يتم عرض أحوال حركة المرور بإحدى السرعات الأربع: GMTSSpeedType.noData وGMTSSpeedType.normal وGMTSSpeedType.slow وGMTSSpeedType.trafficJam. يمكن تخصيص اللون الذي يمثل كل تصنيف من تصنيفات السرعة هذه باستخدام السمة setTrafficColorFor(_:color:).