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

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

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

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

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

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

  • SECONDARY_HEADER (فقط در حالت عمودی ظاهر می شود)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

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

Custom Control
Positions

یک هدر ثانویه سفارشی اضافه کنید

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

موقعیت هدر ثانویه سفارشی لبه بالایی آن را با لبه پایینی هدر اصلی تراز می کند. این موقعیت فقط در 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 استفاده کنید.

برای حذف نما، View را روی 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);

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

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