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

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

يوضّح هذا المستند كيفية تعديل واجهة مستخدم الخريطة بطريقتَين:

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

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

تقدّم setCustomControl الطريقة المواضع كما هو محدّد في CustomControlPosition التعداد:

  • SECONDARY_HEADER (يظهر في الوضع العمودي فقط)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

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

مواضع التحكم
المخصصة

إضافة عنوان ثانوي مخصّص

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

يعمل موضع العنوان الثانوي المخصص على محاذاة الحافة العلوية مع الحافة السفلية للرأس الأساسي. لا يتوفّر هذا الموضع إلا في portrait mode. في landscape mode، لا يتوفّر العنوان الثانوي، ولا يتغيّر التنسيق.

  1. أنشئ عرض Android باستخدام عنصر واجهة المستخدم المخصّص أو ViewGroup.
  2. وسِّع ملف XML أو أنشئ مثيلًا للعرض المخصّص للحصول على مثيل من العرض لإضافته كعنوان ثانوي.
  3. استخدِم NavigationView.setCustomControl أو SupportNavigationFragment.setCustomControl مع CustomControlPosition على النحو التالي: SECONDARY_HEADER.

    ينشئ المثال أدناه مقتطفًا ويضيف عنصر تحكّم مخصّصًا في موضع العنوان الثانوي.

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
     ```
    

إزالة عنوان ثانوي

لإزالة العنوان الثانوي والعودة إلى المحتوى التلقائي، استخدِم الطريقة setCustomControl.

اضبط العرض على null لإزالة العرض.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

إضافة عنصر تحكّم مخصّص إلى أسفل عرض التنقّل

يمكن لتطبيقك تحديد عنصر تحكّم مخصّص مُحاذاً للحافة السفلية من عرض التنقّل. عندما يضيف تطبيقك عنصر تحكم مخصصًا، يتحرك زر إعادة التوسيط وشعار Google إلى أعلى لاستيعابه.

  1. أنشئ عرض Android باستخدام عنصر واجهة المستخدم أو مجموعة العرض التي تريد إضافتها.
  2. أنشئ عرض التنقّل أو المقتطف.
  3. استخدِم طريقة setCustomControl في عرض التنقّل أو المقتطف، وحدِّد عنصر التحكّم والموضع المراد استخدامهما.

يعرض المثال التالي View مخصّصًا تمت إضافته إلى SupportNavigationFragment:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

إزالة عنصر تحكّم مخصّص

لإزالة عنصر التحكّم المخصّص، استخدِم الطريقة setCustomControl وحدِّد موضع عنصر التحكّم الذي تريد إزالته.

اضبط العرض على null لهذا الموضع.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

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

توفّر حزمة تطوير البرامج (SDK) لميزة التنقّل في Android ملحقات واجهة مستخدِم تظهر أثناء التنقّل، وهي مشابهة لتلك المتوفّرة في تطبيق "خرائط Google" لنظام التشغيل Android. يمكنك تعديل مستوى ظهور عناصر التحكّم هذه أو مظهرها كما هو описан في هذا القسم. تظهر التغييرات التي تُجريها هنا أثناء جلسة التنقّل التالية.

يُرجى الرجوع إلى صفحة "السياسات" للحصول على إرشادات حول تعديلات المقبولة على واجهة مستخدم التنقّل.

عرض الرمز

تعديل عنوان التنقّل

استخدِم رمزي SupportNavigationFragment.setStylingOptions() أو NavigationView.setStylingOptions() لتغيير مظهر عنوان التنقّل ومؤشر الانعطاف التالي الذي يظهر أسفل العنوان عند توفّره.

يمكنك ضبط السمات التالية:

نوع السمةالسمات
لون الخلفية
  • وضع اليوم الأساسي - لون النهار لعنوان التنقل
  • الوضع الثانوي للنهار: لون مؤشر الانعطاف التالي في النهار
  • الوضع الليلي الأساسي: لون العنوان في وضع الليل
  • الوضع الليلي الثانوي - لون الليل لمؤشر الانعطاف التالي
عناصر النص الخاصة بالتعليمات
  • لون النص
  • الخط
  • حجم النص للصف الأول
  • حجم النص في الصف الثاني
العناصر النصية للخطوات التالية
  • الخط
  • لون نص قيمة المسافة
  • حجم نص قيمة المسافة
  • لون نص وحدات المسافة
  • حجم نص وحدات المسافة
رموز المناورات
  • لون رمز المناورة الكبير
  • لون رمز المناورة الصغير
توجيه خط السير
  • لون المسار أو المسارات المقترَحة

يوضّح المثال التالي كيفية ضبط خيارات التصميم:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

إيقاف طبقة حركة المرور

استخدِم GoogleMap.setTrafficEnabled() لتفعيل طبقة حركة المرور أو إيقافها على الخريطة. يؤثر هذا الإعداد في مؤشرات كثافة حركة المرور المعروضة على الخريطة ككل. ومع ذلك، لا يؤثر ذلك في مؤشرات حركة المرور على المسار الذي يخطّطه المستكشف.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

تفعيل إشارات المرور وعلامات التوقف

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

تكون إشارات المرور وعلامات التوقف غير مفعَّلة تلقائيًا في Navigation SDK. لتفعيل هذه الميزة، اتصل بالرقم DisplayOptions لكل ميزة بشكل مستقل.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

إضافة علامات مخصّصة

تستخدم حزمة تطوير البرامج للتنقّل على أجهزة Android الآن واجهات برمجة تطبيقات "خرائط Google" للعلامات. انتقِل إلى مستندات Maps API للحصول على مزيد من المعلومات.

النص العائم

يمكنك إضافة نص عائم في أي مكان في تطبيقك، بشرط ألا يغطّي إحالة Google. لا تتيح حزمة تطوير البرامج Navigation SDK تثبيت النص بخط العرض/خط الطول على الخريطة أو بعلامة. انتقِل إلى نوافذ ملفّات معلومة للحصول على المزيد من المعلومات.

عرض الحد الأقصى للسرعة

يمكنك إظهار رمز الحدّ الأقصى للسرعة أو إخفائه آليًا. استخدِم NavigationView.setSpeedLimitIconEnabled() أو SupportNavigationFragment.setSpeedLimitIconEnabled() لعرض رمز الحد الأقصى للسرعة أو إخفائه. عند تفعيل ميزة "الحدّ الأقصى للسرعة"، يظهر رمزها في أحد الزوايا السفلية أثناء التوجيه. تعرض الأيقونة حد سرعة الطريق التي تسير عليها المركبة. لا يظهر الرمز إلا في المواقع الجغرافية التي تتوفّر فيها بيانات موثوقة لحدود السرعة.

 // Display the Speed Limit icon
 mNavFragment.setSpeedLimitIconEnabled(true);

يتم إخفاء رمز الحد الأقصى للسرعة مؤقتًا عند عرض زر إعادة الضبط.

ضبط الوضع الليلي

يمكنك التحكّم آليًا في سلوك "الوضع الليلي". يمكنك استخدام NavigationView.setForceNightMode() أو SupportNavigationFragment.setForceNightMode() لتفعيل "الوضع الليلي" أو إيقافه، أو اسمح لـ "حزمة تطوير البرامج (SDK) للتنقل" في Android بالتحكّم فيه.

  • AUTO: تسمح هذه الميزة لحزمة تطوير البرامج (SDK) للتنقّل بتحديد الوضع المناسب وفقًا للموقع الجغرافي للجهاز والتوقيت المحلي.
  • FORCE_NIGHT يفرض تفعيل الوضع الليلي.
  • يؤدي FORCE_DAY إلى تفعيل الوضع النهاري.

يوضّح المثال التالي فرض تفعيل الوضع الليلي ضمن مقتطف تنقّل:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

عرض قائمة الاتجاهات

أولاً، أنشئ طريقة العرض وأضِفها إلى التدرّج الهرمي.

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

احرص على إعادة توجيه أحداث دورة الحياة إلى DirectionsListView تمامًا كما هو الحال مع NavigationView. على سبيل المثال:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

إخفاء المسارات البديلة

عندما تصبح واجهة المستخدم مليئة بمعلومات كثيرة جدًا، يمكنك تقليل هذا الازدحام من خلال عرض عدد أقل من المسارات البديلة مقارنةً بالإعداد التلقائي (مساران)، أو من خلال عدم عرض أي مسارات بديلة على الإطلاق. يمكنك ضبط هذا الخيار قبل جلب المسارات من خلال استدعاءRoutingOptions.alternateRoutesStrategy() الطريقة مع إحدى قيم التعداد التالية:

قيمة التعدادالوصف
AlternateRoutesStrategy.SHOW_ALL تلقائي: تعرِض ما يصل إلى مسارات بديلة.
AlternateRoutesStrategy.SHOW_ONE تعرض مسارًا بديلاً واحدًا (إذا كان متاحًا).
AlternateRoutesStrategy.SHOW_NONE إخفاء المسارات البديلة

يوضّح مثال الرمز البرمجي التالي كيفية إخفاء المسارات البديلة بالكامل.

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

شريط تقدم الرحلة

تمت إضافة شريط تقدّم الرحلة إلى ميزة التنقّل.

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

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

يعرض شريط تقدّم الرحلة مؤشرات الحالة التالية:

  • المسار المنقضي - الجزء المنقضي من الرحلة.

  • الموضع الحالي: الموقع الجغرافي الحالي للمستخدم في الرحلة.

  • حالة الزيارات: حالة الزيارات القادمة.

  • الوجهة النهائية: وجهة الرحلة النهائية.

فعِّل شريط تقدّم الرحلة من خلال استدعاء setTripProgressBarEnabled() method على NavigationView أو SupportNavigationFragment. على سبيل المثال:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);