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

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

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

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

تقع عناصر التحكم في واجهة المستخدم للخريطة أعلى عرض التنقل. تشير رسالة الأشكال البيانية تعمل حزمة تطوير البرامج (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 باعتباره COUNTRYARY_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);

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

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

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

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

يتم بشكل افتراضي إيقاف إشارات المرور وإشارات التوقف في حزمة SDK للتنقّل لتفعيل هذه الميزة، اتصل DisplayOptions لكل عنصر على حدة.

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

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

تستخدم حزمة تطوير البرامج (SDK) للتنقل لنظام التشغيل Android الآن واجهات برمجة التطبيقات لخرائط Google في العلامات. الانتقال إلى قسم مستندات واجهة برمجة تطبيقات الخرائط لمزيد من المعلومات.

نص عائم

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

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

يمكنك إظهار رمز حد السرعة أو إخفاؤه آليًا. استخدام 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() في NavigationView أو SupportNavigationFragment. على سبيل المثال:

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