رابط کاربری ناوبری را تغییر دهید

با استفاده از Navigation SDK برای Android، می‌توانید تجربه کاربری با نقشه خود را با تعیین اینکه کدام یک از کنترل‌ها و عناصر UI داخلی روی نقشه ظاهر می‌شوند، تغییر دهید. همچنین می توانید ظاهر بصری رابط کاربری ناوبری را تنظیم کنید. برای دستورالعمل‌های مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خط‌مشی‌ها مراجعه کنید.

این سند نحوه تغییر رابط کاربری نقشه خود را به دو روش شرح می دهد:

کنترل‌های رابط کاربری نقشه

کنترل‌های رابط کاربری نقشه راه پیشنهادی برای قرار دادن عناصر رابط کاربری سفارشی در نمای ناوبری برای اطمینان از موقعیت‌یابی مناسب هستند. وقتی طرح‌بندی داخلی تغییر می‌کند، Navigation SDK برای Android به‌طور خودکار کنترل‌های سفارشی شما را تغییر می‌دهد. شما می توانید یک نمای کنترل سفارشی در هر زمان برای هر موقعیت تنظیم کنید. اگر طراحی شما به چندین عنصر UI نیاز دارد، می توانید آنها را در یک ViewGroup قرار دهید و آن را به متد setCustomControl منتقل کنید.

متد setCustomControl موقعیت هایی را که در فهرست CustomControlPosition تعریف شده است ارائه می دهد:

  • SECONDARY_HEADER (فقط در حالت عمودی ظاهر می شود)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW
  • FOOTER
موقعیت های کنترل سفارشی برای جهت گیری پرتره.
موقعیت های کنترل سفارشی برای جهت گیری پرتره
موقعیت های کنترلی سفارشی برای جهت گیری چشم انداز.
موقعیت های کنترلی سفارشی برای جهت گیری چشم انداز

یک کنترل سفارشی اضافه کنید

  1. یک نمای Android با عنصر رابط کاربری سفارشی یا ViewGroup ایجاد کنید.
  2. XML را باد کنید یا نمای سفارشی را نمونه سازی کنید تا نمونه ای از نما را دریافت کنید.
  3. از NavigationView.setCustomControl یا SupportNavigationFragment.setCustomControl با موقعیت کنترل سفارشی انتخاب شده از فهرست CustomControlPosition استفاده کنید.

    مثال زیر یک قطعه ایجاد می کند و یک کنترل سفارشی را در موقعیت هدر ثانویه اضافه می کند.

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

یک کنترل سفارشی را حذف کنید

برای حذف یک کنترل سفارشی، متد setCustomControl را با یک پارامتر نمای null و موقعیت کنترل سفارشی انتخاب شده فراخوانی کنید.

به عنوان مثال، قطعه زیر هدر ثانویه سفارشی را حذف می کند و به محتوای پیش فرض برمی گردد:

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

موقعیت های کنترل سفارشی

هدر ثانویه

موقعیت کنترل سفارشی هدر ثانویه برای جهت گیری عمودی.
موقعیت کنترل سفارشی هدر ثانویه برای جهت گیری عمودی

برای استفاده از این موقعیت کنترل سفارشی، موقعیت CustomControlPosition.SECONDARY_HEADER را به setCustomControl منتقل کنید.

به طور پیش‌فرض، طرح‌بندی‌های صفحه در حالت ناوبری موقعیتی را برای سرصفحه ثانویه که در زیر سرصفحه اصلی قرار دارد، ارائه می‌کنند. این هدر ثانویه در مواقع ضروری ظاهر می شود، مانند هدایت خط. برنامه شما می‌تواند از این موقعیت هدر ثانویه طرح‌بندی برای محتوای سفارشی استفاده کند. هنگامی که از این ویژگی استفاده می کنید، کنترل شما هر محتوای هدر ثانویه پیش فرض را پوشش می دهد. اگر نمای ناوبری شما پس‌زمینه داشته باشد، آن پس‌زمینه در جای خود باقی می‌ماند و با سربرگ ثانویه پوشانده می‌شود. وقتی برنامه شما کنترل سفارشی را حذف می کند، هر سرصفحه ثانویه پیش فرض می تواند در جای خود ظاهر شود.

موقعیت هدر ثانویه سفارشی لبه بالایی آن را با لبه پایینی هدر اصلی تراز می کند. این موقعیت فقط در portrait mode پشتیبانی می شود. در landscape mode ، هدر ثانویه در دسترس نیست و طرح بندی تغییر نمی کند.

شروع پایین

موقعیت کنترل سفارشی شروع پایین برای جهت گیری عمودی.
موقعیت کنترل سفارشی شروع پایین برای جهت گیری عمودی
موقعیت کنترل سفارشی شروع پایین برای جهت افقی.
موقعیت کنترل سفارشی شروع پایین برای جهت افقی

برای استفاده از این موقعیت کنترل سفارشی، موقعیت CustomControlPosition.BOTTOM_START_BELOW به setCustomControl منتقل کنید.

این موقعیت کنترل سفارشی در گوشه شروع پایین نقشه قرار دارد. هم در portrait mode و هم landscape mode ، بالای کارت ETA و/یا پاورقی سفارشی (یا در امتداد پایین نقشه اگر هیچکدام وجود نداشته باشد) قرار می‌گیرد و عناصر Nav SDK شامل دکمه مرکز مجدد و نشان‌واره Google به سمت حساب حرکت می‌کنند. برای ارتفاع نمای کنترل سفارشی. این کنترل در داخل مرزهای قابل مشاهده نقشه قرار می گیرد، بنابراین هر بالشتکی که به لبه های پایین یا ابتدای نقشه اضافه شود، موقعیت این کنترل را نیز تغییر می دهد.

انتهای پایین

موقعیت کنترل سفارشی در انتهای پایین برای جهت گیری عمودی.
موقعیت کنترل سفارشی در انتهای پایین برای جهت گیری عمودی
موقعیت کنترل سفارشی در انتهای پایین برای جهت گیری افقی.
موقعیت کنترل سفارشی در انتهای پایین برای جهت گیری افقی

برای استفاده از این موقعیت کنترل سفارشی، موقعیت CustomControlPosition.BOTTOM_END_BELOW به setCustomControl منتقل کنید.

این موقعیت کنترل سفارشی در گوشه انتهایی پایین نقشه قرار دارد. در portrait mode ، بالای کارت ETA و/یا پاورقی سفارشی قرار می‌گیرد (یا در امتداد پایین نقشه اگر هیچکدام وجود نداشته باشد)، اما در landscape mode با پایین نقشه تراز می‌شود. هر عنصر Nav SDK قابل مشاهده در امتداد سمت انتهایی (سمت راست در LTR) به سمت بالا حرکت می کند تا ارتفاع نمای کنترل سفارشی را در نظر بگیرد. این کنترل در داخل مرزهای قابل مشاهده نقشه قرار می گیرد، بنابراین هر بالشتکی که به لبه های پایین یا انتهایی نقشه اضافه شود، موقعیت این کنترل را نیز تغییر می دهد.

موقعیت کنترل سفارشی پاورقی برای جهت گیری پرتره.
موقعیت کنترل سفارشی پاورقی برای جهت گیری پرتره
موقعیت کنترل سفارشی پاورقی برای جهت افقی.
موقعیت کنترل سفارشی پاورقی برای جهت افقی

برای استفاده از این موقعیت کنترل سفارشی، موقعیت CustomControlPosition.FOOTER را به setCustomControl منتقل کنید.

این موقعیت کنترل سفارشی برای نمای پاورقی سفارشی طراحی شده است. اگر کارت Nav SDK ETA قابل مشاهده باشد، این کنترل بالای آن قرار می گیرد. اگر نه، کنترل با پایین نقشه تراز می شود. برخلاف کنترل‌های سفارشی BOTTOM_START_BELOW و BOTTOM_END_BELOW ، این کنترل خارج از محدوده‌های نقشه قابل مشاهده قرار می‌گیرد، به این معنی که هر گونه بالشتکی که به نقشه اضافه شود، موقعیت این کنترل را تغییر نمی‌دهد.

در portrait mode ، پاورقی سفارشی تمام عرض است. کنترل‌های سفارشی در هر دو موقعیت CustomControlPosition.BOTTOM_START_BELOW و CustomControlPosition.BOTTOM_END_BELOW ، و همچنین عناصر Nav SDK UI مانند دکمه مرکز مجدد و نشان‌واره Google، در بالای پاورقی کنترل سفارشی قرار دارند. موقعیت پیش فرض شورون ارتفاع فوتر سفارشی را در نظر می گیرد.

در landscape mode ، پاورقی سفارشی نصف عرض است و در سمت شروع (سمت چپ در LTR) تراز شده است، درست مانند کارت Nav SDK ETA. کنترل‌های سفارشی در موقعیت CustomControlPosition.BOTTOM_START_BELOW و عناصر رابط کاربری SDK Nav مانند دکمه مرکز مجدد و نشان‌واره Google در بالای پاورقی کنترل سفارشی قرار دارند. کنترل‌های سفارشی در موقعیت CustomControlPosition.BOTTOM_END_BELOW و هر عنصر Nav SDK UI در امتداد سمت انتهایی (سمت راست در LTR) با پایین نقشه تراز می‌مانند. موقعیت پیش‌فرض شورون با وجود پاورقی سفارشی تغییر نمی‌کند زیرا پاورقی تا انتهای نقشه گسترش نمی‌یابد.

کنترل‌های سفارشی در موقعیت‌های CustomControlPosition.BOTTOM_START_BELOW و CustomControlPosition.BOTTOM_END_BELOW ، و همچنین عناصر Nav SDK UI مانند دکمه مرکز مجدد و نشان‌واره Google در بالای پاورقی کنترل سفارشی قرار دارند.

لوازم جانبی رابط کاربری نقشه

Navigation SDK for Android لوازم جانبی UI را ارائه می دهد که در حین پیمایش مشابه موارد موجود در Google Maps برای برنامه 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);

نشانگرهای سفارشی را اضافه کنید

Navigation SDK for Android اکنون از Google Maps API برای نشانگرها استفاده می کند. برای اطلاعات بیشتر به اسناد Maps API بروید.

متن شناور

می‌توانید متن شناور را در هر جایی از برنامه خود اضافه کنید، مشروط بر اینکه انتساب Google را پوشش ندهد. Navigation SDK از اتصال متن به طول/طول جغرافیایی روی نقشه یا برچسب پشتیبانی نمی‌کند. برای اطلاعات بیشتر به پنجره اطلاعات بروید.

نمایش محدودیت سرعت

شما می توانید به صورت برنامه ریزی شده نماد محدودیت سرعت را نشان داده یا پنهان کنید. از NavigationView.setSpeedLimitIconEnabled() یا SupportNavigationFragment.setSpeedLimitIconEnabled() برای نمایش یا پنهان کردن نماد محدودیت سرعت استفاده کنید. وقتی فعال باشد، نماد محدودیت سرعت در گوشه پایینی در حین راهنمایی نمایش داده می شود. این نماد محدودیت سرعت جاده ای را که وسیله نقلیه در آن حرکت می کند را نشان می دهد. این نماد فقط در مکان‌هایی ظاهر می‌شود که داده‌های محدودیت سرعت قابل اعتماد در دسترس هستند.

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

هنگامی که دکمه جدیدتر نمایش داده می شود، نماد محدودیت سرعت به طور موقت پنهان می شود.

حالت شب را تنظیم کنید

شما می توانید به صورت برنامه ریزی شده رفتار حالت شب را کنترل کنید. از NavigationView.setForceNightMode() یا SupportNavigationFragment.setForceNightMode() برای روشن یا خاموش کردن حالت شب استفاده کنید، یا اجازه دهید Navigation SDK برای Android آن را کنترل کند.

  • AUTO به Navigation 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));
}

حتماً رویدادهای چرخه زندگی را دقیقاً مانند NavigationView به DirectionsListView ارسال کنید. به عنوان مثال:

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);