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