با استفاده از Navigation SDK برای Android، میتوانید تجربه کاربری با نقشه خود را با تعیین اینکه کدام یک از کنترلها و عناصر UI داخلی روی نقشه ظاهر میشوند، تغییر دهید. همچنین می توانید ظاهر بصری رابط کاربری ناوبری را تنظیم کنید. برای دستورالعملهای مربوط به تغییرات قابل قبول در رابط کاربری ناوبری، به صفحه خطمشیها مراجعه کنید.
این سند نحوه تغییر رابط کاربری نقشه خود را به دو روش شرح می دهد:
کنترلهای رابط کاربری نقشه
کنترلهای رابط کاربری نقشه راه پیشنهادی برای قرار دادن عناصر رابط کاربری سفارشی در نمای ناوبری برای اطمینان از موقعیتیابی مناسب هستند. وقتی طرحبندی داخلی تغییر میکند، Navigation SDK برای Android بهطور خودکار کنترلهای سفارشی شما را تغییر میدهد. شما می توانید یک نمای کنترل سفارشی در هر زمان برای هر موقعیت تنظیم کنید. اگر طراحی شما به چندین عنصر UI نیاز دارد، می توانید آنها را در یک ViewGroup
قرار دهید و آن را به متد setCustomControl
منتقل کنید.
متد setCustomControl
موقعیت هایی را که در فهرست CustomControlPosition
تعریف شده است ارائه می دهد:
-
SECONDARY_HEADER
(فقط در حالت عمودی ظاهر می شود) -
BOTTOM_START_BELOW
-
BOTTOM_END_BELOW
-
FOOTER
یک کنترل سفارشی اضافه کنید
- یک نمای Android با عنصر رابط کاربری سفارشی یا ViewGroup ایجاد کنید.
- XML را باد کنید یا نمای سفارشی را نمونه سازی کنید تا نمونه ای از نما را دریافت کنید.
از
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);