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

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

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

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

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

setCustomControl तरीका, CustomControlPosition की वैल्यू के हिसाब से पोज़िशन देता है:

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

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

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

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

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

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

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

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

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

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

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

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

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

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

  1. यूज़र इंटरफ़ेस (यूआई) एलिमेंट या व्यू ग्रुप के साथ एक Android View बनाएं, जिसे आपको जोड़ना है.
  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));

ट्रैफ़िक लाइट चालू करें और साइनबोर्ड बंद करें

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

नेविगेशन 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 के नेविगेशन SDK टूल को उसे कंट्रोल करने दें.

  • AUTO नेविगेशन 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);

यात्रा का प्रोग्रेस बार

नेविगेशन में यात्रा का प्रोग्रेस बार जोड़ा गया है.

यात्रा का प्रोग्रेस बार एक वर्टिकल बार होता है. यह नेविगेशन शुरू होने पर, मैप के पीछे दाएं किनारे पर दिखता है. इसे चालू करने पर, ड्राइवर की मंज़िल और मौजूदा स्थिति के साथ, पूरी यात्रा की खास जानकारी दिखती है.

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

यात्रा का प्रोग्रेस बार, इन स्टेटस इंडिकेटर को दिखाता है:

  • बीता हुआ रास्ता—यात्रा का बीता हुआ हिस्सा.

  • मौजूदा स्थिति—यात्रा के दौरान ड्राइवर की मौजूदा जगह.

  • ट्रैफ़िक की स्थिति—आने वाले ट्रैफ़िक की स्थिति.

  • फ़ाइनल डेस्टिनेशन—आखिरी यात्रा के लिए डेस्टिनेशन.

यात्रा के प्रोग्रेस बार को setTripProgressBarEnabled() तरीके को NavigationView या SupportNavigationFragment को कॉल करके चालू करें. उदाहरण के लिए:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);