Android के लिए Navigation SDK का इस्तेमाल करके, अपने मैप के उपयोगकर्ता अनुभव में बदलाव किया जा सकता है. इसके लिए, यह तय करना होगा कि मैप पर कौनसे यूज़र इंटरफ़ेस (यूआई) कंट्रोल और एलिमेंट दिखें. नेविगेशन यूज़र इंटरफ़ेस (यूआई) के विज़ुअल लुक में भी बदलाव किया जा सकता है. नेविगेशन यूज़र इंटरफ़ेस (यूआई) में किए जा सकने वाले बदलावों के दिशा-निर्देशों के लिए, नीतियां पेज पर जाएं.
इस दस्तावेज़ में, अपने मैप के यूज़र इंटरफ़ेस में दो तरीकों से बदलाव करने का तरीका बताया गया है:
मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल
नेविगेशन व्यू पर कस्टम यूज़र इंटरफ़ेस (यूआई) एलिमेंट डालने के लिए, मैप यूआई कंट्रोल का सुझाव दिया जाता है. इससे, एलिमेंट की सही पोज़िशनिंग की जा सकती है. जब डिवाइस में पहले से मौजूद लेआउट बदलता है, तो Android के लिए Navigation SDK टूल आपके कस्टम कंट्रोल को अपने-आप दूसरी जगह पर ले जाता है. हर पोज़िशन के लिए, एक बार में एक कस्टम कंट्रोल व्यू सेट किया जा सकता है. अगर आपके डिज़ाइन में एक से ज़्यादा यूज़र इंटरफ़ेस (यूआई) एलिमेंट की ज़रूरत है, तो उन्हें ViewGroup
में डालें और setCustomControl
तरीके में पास करें.
setCustomControl
method, CustomControlPosition
enum में बताई गई पोज़िशन दिखाता है:
SECONDARY_HEADER
(सिर्फ़ पोर्ट्रेट मोड में दिखता है)BOTTOM_START_BELOW
BOTTOM_END_BELOW
FOOTER
कस्टम कंट्रोल जोड़ना
- कस्टम यूज़र इंटरफ़ेस एलिमेंट या ViewGroup की मदद से, Android व्यू बनाएं.
- व्यू का इंस्टेंस पाने के लिए, एक्सएमएल को इनफ्लेट करें या कस्टम व्यू को इंस्टैंशिएट करें.
CustomControlPosition
enum से चुनी गई कस्टम कंट्रोल पोज़िशन के साथNavigationView.setCustomControl
याSupportNavigationFragment.setCustomControl
का इस्तेमाल करें.यहां दिए गए उदाहरण में, एक फ़्रैगमेंट बनाया गया है और सेकंडरी हेडर पोज़िशन में कस्टम कंट्रोल जोड़ा गया है.
mNavFragment.setCustomControl(getLayoutInflater(). inflate(R.layout.your_custom_control, null), CustomControlPosition.SECONDARY_HEADER); ```
कस्टम कंट्रोल हटाना
किसी कस्टम कंट्रोल को हटाने के लिए, null
व्यू पैरामीटर और चुनी गई कस्टम कंट्रोल पोज़िशन के साथ setCustomControl
तरीके को कॉल करें.
उदाहरण के लिए, नीचे दिया गया स्निपेट, किसी भी कस्टम सेकंडरी हेडर को हटा देता है और डिफ़ॉल्ट कॉन्टेंट पर वापस ले जाता है:
mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);
कस्टम कंट्रोल की पोज़िशन
सेकंडरी हेडर
कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, CustomControlPosition.SECONDARY_HEADER
को setCustomControl
पर पास करें.
नेविगेशन मोड में स्क्रीन लेआउट, डिफ़ॉल्ट रूप से मुख्य हेडर के नीचे एक सेकंडरी हेडर के लिए जगह देते हैं. यह सेकंडरी हेडर ज़रूरत पड़ने पर दिखता है. जैसे, लेन गाइडेंस के साथ. आपका ऐप्लिकेशन, कस्टम कॉन्टेंट के लिए लेआउट के इस सेकंडरी हेडर की पोज़िशन का इस्तेमाल कर सकता है. इस सुविधा का इस्तेमाल करने पर, आपके कंट्रोल में डिफ़ॉल्ट सेकंडरी हेडर का कॉन्टेंट भी शामिल हो जाता है. अगर आपके नेविगेशन व्यू में कोई बैकग्राउंड है, तो वह बैकग्राउंड अपनी जगह पर ही रहेगा और उसे सेकंडरी हेडर से कवर किया जाएगा. जब आपका ऐप्लिकेशन कस्टम कंट्रोल हटाता है, तो उसकी जगह पर कोई भी डिफ़ॉल्ट सेकंडरी हेडर दिख सकता है.
कस्टम सेकंडरी हेडर की पोज़िशन, अपने ऊपरी हिस्से को प्राइमरी हेडर के निचले हिस्से के साथ अलाइन करती है. यह पोज़िशन सिर्फ़ portrait mode
में काम करती है. landscape mode
में, सेकंडरी हेडर उपलब्ध नहीं है और लेआउट नहीं बदलता.
सबसे नीचे से शुरू करना
कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, CustomControlPosition.BOTTOM_START_BELOW
को setCustomControl
पर पास करें.
कस्टम कंट्रोल की यह पोज़िशन, मैप के सबसे नीचे बाएं कोने में होती है. portrait mode
और landscape mode
, दोनों में यह ईटीए कार्ड और/या कस्टम फ़ुटर के ऊपर दिखता है. अगर इनमें से कोई भी नहीं है, तो यह मैप के सबसे नीचे दिखता है. साथ ही, कस्टम कंट्रोल व्यू की ऊंचाई के हिसाब से, फिर से बीच में ले जाने वाले बटन और Google लोगो जैसे Nav SDK टूल ऊपर की ओर बढ़ जाते हैं. यह कंट्रोल, मैप के दिखने वाले हिस्से के अंदर होता है. इसलिए, मैप के नीचे या शुरू के किनारों पर जोड़ा गया कोई भी पैडिंग, इस कंट्रोल की पोज़िशन भी बदल देगा.
सबसे नीचे
कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, CustomControlPosition.BOTTOM_END_BELOW
को setCustomControl
पर पास करें.
कस्टम कंट्रोल की यह पोज़िशन, मैप के सबसे नीचे कोने में होती है. portrait mode
में, यह ईटीए कार्ड और/या कस्टम फ़ुटर के ऊपर दिखता है. अगर इनमें से कोई भी मौजूद नहीं है, तो यह मैप के सबसे नीचे दिखता है. हालांकि, landscape mode
में यह मैप के सबसे नीचे दिखता है. कस्टम कंट्रोल व्यू की ऊंचाई के हिसाब से, आखिरी हिस्से (एलटीआर में दाईं ओर) में दिखने वाले सभी Nav SDK टूल ऊपर की ओर बढ़ जाते हैं. यह कंट्रोल, मैप के दिखने वाले हिस्से के अंदर होता है. इसलिए, मैप के नीचे या आखिर में जोड़ी गई कोई भी पैडिंग, इस कंट्रोल की पोज़िशन भी बदल देगी.
फ़ुटर
कस्टम कंट्रोल की इस पोज़िशन का इस्तेमाल करने के लिए, CustomControlPosition.FOOTER
को setCustomControl
पर पास करें.
कस्टम कंट्रोल की यह पोज़िशन, कस्टम फ़ुटर व्यू के लिए डिज़ाइन की गई है. अगर Nav SDK टूल का ईटीए कार्ड दिख रहा है, तो यह कंट्रोल उसके ऊपर दिखता है. अगर ऐसा नहीं है, तो कंट्रोल को मैप के नीचे अलाइन किया जाता है. BOTTOM_START_BELOW
और BOTTOM_END_BELOW
कस्टम कंट्रोल के उलट, इस कंट्रोल को मैप के दिखने वाले हिस्से के बाहर रखा जाता है. इसका मतलब है कि मैप में जोड़ा गया कोई भी पैडिंग, इस कंट्रोल की पोज़िशन नहीं बदलेगी.
portrait mode
में, कस्टम फ़ुटर की चौड़ाई पूरी होती है. CustomControlPosition.BOTTOM_START_BELOW
और CustomControlPosition.BOTTOM_END_BELOW
, दोनों पोज़िशन में कस्टम कंट्रोल के साथ-साथ, Nav SDK टूल के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, जैसे कि फिर से बीच में ले जाने वाले बटन और Google लोगो को कस्टम कंट्रोल फ़ुटर के ऊपर रखा जाता है. शेवरॉन की डिफ़ॉल्ट पोज़िशन, कस्टम फ़ुटर की ऊंचाई को ध्यान में रखती है.
landscape mode
में, कस्टम फ़ुटर की चौड़ाई आधी होती है और यह Nav SDK के ETA कार्ड की तरह ही, शुरुआती हिस्से (एलटीआर में बाईं ओर) के साथ अलाइन होता है. CustomControlPosition.BOTTOM_START_BELOW
पोज़िशन में मौजूद कस्टम कंट्रोल और Nav SDK टूल के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, जैसे कि फिर से बीच में ले जाने वाले बटन और Google लोगो को कस्टम कंट्रोल फ़ुटर के ऊपर रखा जाता है. CustomControlPosition.BOTTOM_END_BELOW
पोज़िशन में मौजूद कस्टम कंट्रोल और आखिरी हिस्से (एलटीआर में दाईं ओर) के साथ-साथ Nav SDK टूल के यूज़र इंटरफ़ेस (यूआई) के सभी एलिमेंट, मैप के सबसे नीचे अलाइन रहते हैं. कस्टम फ़ुटर मौजूद होने पर, शेवरॉन की डिफ़ॉल्ट पोज़िशन नहीं बदलती, क्योंकि फ़ुटर मैप के आखिर तक नहीं दिखता.
CustomControlPosition.BOTTOM_START_BELOW
और CustomControlPosition.BOTTOM_END_BELOW
पोज़िशन में मौजूद कस्टम कंट्रोल के साथ-साथ, Nav SDK टूल के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, जैसे कि फिर से बीच में ले जाने वाले बटन और Google लोगो को कस्टम कंट्रोल फ़ुटर के ऊपर रखा जाता है.
मैप के यूज़र इंटरफ़ेस (यूआई) की एक्सेसरी
Android के लिए नेविगेशन SDK टूल, यूज़र इंटरफ़ेस (यूआई) ऐक्सेसरी उपलब्ध कराता है. ये ऐक्सेसरी, नेविगेशन के दौरान दिखती हैं. ये ऐक्सेसरी, Android के लिए Google Maps ऐप्लिकेशन में दिखने वाली ऐक्सेसरी से मिलती-जुलती होती हैं. इस सेक्शन में बताए गए तरीके से, इन कंट्रोल के दिखने या विज़ुअल के दिखने के तरीके में बदलाव किया जा सकता है. यहां किए गए बदलाव, अगले नेविगेशन सेशन के दौरान दिखते हैं.
नेविगेशन यूज़र इंटरफ़ेस (यूआई) में किए जा सकने वाले बदलावों के बारे में दिशा-निर्देश पाने के लिए, नीतियां पेज पर जाएं.
कोड देखना
नेविगेशन हेडर में बदलाव करना
नेविगेशन हेडर और अगले मोड़ के इंडिकेटर की थीम बदलने के लिए,
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);
कस्टम मार्कर जोड़ना
Android के लिए नेविगेशन SDK टूल, अब मार्कर के लिए Google Maps API का इस्तेमाल करता है. ज़्यादा जानकारी के लिए, Maps API से जुड़ा दस्तावेज़ पढ़ें.
फ़्लोटिंग टेक्स्ट
अपने ऐप्लिकेशन में कहीं भी फ़्लोटिंग टेक्स्ट जोड़ा जा सकता है. हालांकि, यह ज़रूरी है कि यह टेक्स्ट, Google एट्रिब्यूशन को न छिपाए. Navigation SDK, मैप पर किसी अक्षांश/देशांतर या लेबल पर टेक्स्ट को ऐंकर करने की सुविधा नहीं देता. ज़्यादा जानकारी के लिए, जानकारी वाली विंडो पर जाएं.
स्पीड की सीमा दिखाना
प्रोग्राम के हिसाब से, स्पीड लिमिट आइकॉन को दिखाया या छिपाया जा सकता है. स्पीड लिमिट आइकॉन को दिखाने या छिपाने के लिए,
NavigationView.setSpeedLimitIconEnabled()
या
SupportNavigationFragment.setSpeedLimitIconEnabled()
का इस्तेमाल करें. चालू होने पर, निर्देश के दौरान रफ़्तार की सीमा वाला आइकॉन सबसे नीचे कोने में दिखता है. इस आइकॉन से उस सड़क की स्पीड लिमिट का पता चलता है जिस पर वाहन चल रहा है. यह आइकॉन सिर्फ़ उन जगहों पर दिखता है जहां रफ़्तार की सीमा का भरोसेमंद डेटा उपलब्ध होता है.
// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);
रीसेंटर बटन दिखने पर, स्पीड की सीमा वाला आइकॉन कुछ समय के लिए छिप जाता है.
नाइट मोड सेट करना
नाइट मोड के काम करने के तरीके को प्रोग्राम के हिसाब से कंट्रोल किया जा सकता है. नाइट मोड को चालू या बंद करने के लिए,
NavigationView.setForceNightMode()
या
SupportNavigationFragment.setForceNightMode()
का इस्तेमाल करें. इसके अलावा, Android के लिए Navigation SDK टूल को इसे कंट्रोल करने दें.
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));
}
लाइफ़ साइकल इवेंट को 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);
यात्रा की प्रोग्रेस दिखाने वाला बार
यात्रा का प्रोग्रेस बार एक वर्टिकल बार होता है. यह मैप के दाएं किनारे पर दिखता है. यह तब दिखता है, जब नेविगेशन शुरू होता है. इस सुविधा के चालू होने पर, उपयोगकर्ता के डेस्टिनेशन और मौजूदा जगह के साथ-साथ पूरी यात्रा की खास जानकारी दिखती है.
इसकी मदद से, उपयोगकर्ताओं को ज़ूम इन किए बिना, आने वाली समस्याओं का अनुमान तुरंत लगाया जा सकता है. जैसे, ट्रैफ़िक. इसके बाद, वे ज़रूरत पड़ने पर यात्रा का रास्ता बदल सकते हैं. अगर उपयोगकर्ता यात्रा का रास्ता बदलता है, तो प्रोग्रेस बार रीसेट हो जाता है. ऐसा लगता है कि उस जगह से एक नई यात्रा शुरू हुई है.
यात्रा के प्रोग्रेस बार में, स्टेटस के ये इंडिकेटर दिखते हैं:
रास्ते में बीता समय—यात्रा का बीता हुआ समय.
मौजूदा जगह—यात्रा के दौरान उपयोगकर्ता की मौजूदा जगह.
ट्रैफ़िक की स्थिति—आने वाले ट्रैफ़िक की स्थिति.
फ़ाइनल डेस्टिनेशन—यात्रा की आखिरी मंज़िल.
NavigationView या SupportNavigationFragment पर setTripProgressBarEnabled()
तरीके को कॉल करके, यात्रा की प्रोग्रेस बार की सुविधा चालू करें.
उदाहरण के लिए:
// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);