नेविगेशन यूज़र इंटरफ़ेस (यूआई) में बदलाव करना

Android के लिए Navigation SDK का इस्तेमाल करके, अपने मैप के उपयोगकर्ता अनुभव में बदलाव किया जा सकता है. इसके लिए, यह तय करना होगा कि मैप पर कौनसे यूज़र इंटरफ़ेस (यूआई) कंट्रोल और एलिमेंट दिखें. नेविगेशन यूज़र इंटरफ़ेस (यूआई) के विज़ुअल लुक में भी बदलाव किया जा सकता है. नेविगेशन यूज़र इंटरफ़ेस (यूआई) में किए जा सकने वाले बदलावों के दिशा-निर्देशों के लिए, नीतियां पेज पर जाएं.

यह दस्तावेज़ दो तरीके से आपके मैप के यूज़र इंटरफ़ेस को बदलने का तरीका बताता है:

मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल

मैप के यूज़र इंटरफ़ेस (यूआई) के कंट्रोल, नेविगेशन व्यू में सबसे ऊपर होते हैं. Android के लिए Navigation SDK टूल, डिफ़ॉल्ट लेआउट में बदलाव होने पर, आपके कस्टम कंट्रोल को अपने-आप फिर से सेट कर देता है. लेआउट की हर जगह के लिए, एक कस्टम कंट्रोल सेट किया जा सकता है. कस्टम कंट्रोल, एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट हो सकता है. अगर आपके डिज़ाइन के लिए ज़्यादा यूआई एलिमेंट की ज़रूरत है, तो कई यूज़र इंटरफ़ेस (यूआई) एलिमेंट के साथ ViewGroup का इस्तेमाल किया जा सकता है.

setCustomControl तरीका, CustomControlPosition enum में बताई गई स्थितियों के बारे में बताता है:

  • SECONDARY_HEADER (सिर्फ़ पोर्ट्रेट मोड में दिखता है)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

उदाहरण के लिए, यहां दी गई इमेज में यूज़र इंटरफ़ेस (यूआई) कंट्रोल की अलग-अलग जगहों के उदाहरण दिखाए गए हैं. इनसे, राइड शेयर ड्राइवर को पिकअप के दौरान, यात्री की जगह की जानकारी मिलती है.

कस्टम कंट्रोल की पोज़िशन

कस्टम सेकंडरी हेडर जोड़ना

नेविगेशन मोड में स्क्रीन लेआउट, डिफ़ॉल्ट रूप से मुख्य हेडर के नीचे एक सेकंडरी हेडर के लिए जगह देते हैं. यह सेकंडरी हेडर ज़रूरत पड़ने पर दिखता है. जैसे, लेन गाइडेंस के साथ. आपका ऐप्लिकेशन, कस्टम कॉन्टेंट के लिए लेआउट के इस सेकंडरी हेडर की पोज़िशन का इस्तेमाल कर सकता है. इस सुविधा का इस्तेमाल करने पर, आपके कंट्रोल में डिफ़ॉल्ट सेकंडरी हेडर का कॉन्टेंट भी शामिल हो जाता है. अगर आपके नेविगेशन व्यू में कोई बैकग्राउंड है, तो वह बैकग्राउंड अपनी जगह पर ही रहेगा और उसे सेकंडरी हेडर से कवर किया जाएगा. जब आपका ऐप्लिकेशन कस्टम कंट्रोल हटाता है, तो उसकी जगह पर कोई भी डिफ़ॉल्ट सेकंडरी हेडर दिख सकता है.

कस्टम सेकंडरी हेडर की पोज़िशन, अपने ऊपरी हिस्से को प्राइमरी हेडर के निचले हिस्से के साथ अलाइन करती है. यह पोज़िशन सिर्फ़ portrait mode में काम करती है. landscape mode में, सेकंडरी हेडर उपलब्ध नहीं है और लेआउट में बदलाव नहीं होता.

  1. कस्टम यूज़र इंटरफ़ेस एलिमेंट या ViewGroup की मदद से, Android व्यू बनाएं.
  2. सेकंडरी हेडर के तौर पर जोड़ने के लिए, व्यू का कोई इंस्टेंस पाने के लिए एक्सएमएल को इनफ्लेट करें या कस्टम व्यू को इंस्टैंशिएट करें.
  3. NavigationView.setCustomControl या SupportNavigationFragment.setCustomControl का इस्तेमाल करें. साथ ही, CustomControlPosition को SECONDARY_HEADER के तौर पर सेट करें.

    यहां दिए गए उदाहरण में, एक फ़्रैगमेंट बनाया गया है और सेकंडरी हेडर पोज़िशन में कस्टम कंट्रोल जोड़ा गया है.

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

सेकंडरी हेडर हटाना

सेकंडरी हेडर हटाने और डिफ़ॉल्ट कॉन्टेंट पर वापस जाने के लिए, setCustomControl तरीके का इस्तेमाल करें.

व्यू हटाने के लिए, व्यू को null पर सेट करें.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

नेविगेशन व्यू के नीचे कस्टम कंट्रोल जोड़ें

आपका ऐप्लिकेशन, नेविगेशन व्यू के निचले किनारे पर अलाइन किया गया कस्टम कंट्रोल तय कर सकता है. जब आपका ऐप्लिकेशन कस्टम कंट्रोल जोड़ता है, तो उसे जगह देने के लिए, फिर से बीच में ले जाने वाला बटन और Google का लोगो ऊपर की ओर बढ़ जाता है.

  1. आपको जो यूज़र इंटरफ़ेस (यूआई) एलिमेंट या व्यू ग्रुप जोड़ना है उसके साथ Android व्यू बनाएं.
  2. नेविगेशन व्यू या फ़्रैगमेंट बनाएं.
  3. नेविगेशन व्यू या फ़्रैगमेंट पर setCustomControl तरीके को कॉल करें. साथ ही, कंट्रोल और इस्तेमाल करने की जगह के बारे में बताएं.

यहां दिए गए उदाहरण में, SupportNavigationFragment में जोड़ा गया कस्टम View दिखाया गया है:

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

मैप के यूज़र इंटरफ़ेस (यूआई) की एक्सेसरी

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 एट्रिब्यूशन को न छिपाए. नेविगेशन 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);