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

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

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

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

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

setCustomControl तरीका ऐसी पोज़िशन देता है जिसकी जानकारी CustomControlPosition में दी गई है enum:

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

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

कस्टम कंट्रोल
जगह

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

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

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

  1. कोई Android व्यू बनाएं कस्टम यूज़र इंटरफ़ेस (यूआई) एलिमेंट या ViewGroup के साथ.
  2. एक्सएमएल को इनफ़्लेट करें या कस्टम व्यू को इंस्टैंशिएट करें, ताकि सेकंडरी हेडर के तौर पर जोड़ने के लिए देखें.
  3. NavigationView.setCustomControl का इस्तेमाल करें या इस तौर पर CustomControlPosition के साथ 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 व्यू बनाएं उस यूज़र इंटरफ़ेस (यूआई) एलिमेंट या व्यू ग्रुप के साथ जिसे आपको जोड़ना है.
  2. नेविगेशन व्यू या फ़्रैगमेंट बनाएं.
  3. नेविगेशन व्यू या फ़्रैगमेंट पर 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);

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

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

नीतियां देखें पेज पर जाएं. नेविगेशन यूज़र इंटरफ़ेस (यूआई) में स्वीकार किए जाने वाले बदलाव.

कोड देखें

नेविगेशन हेडर में बदलाव करना

इस्तेमाल की जाने वाली चीज़ें 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 का इस्तेमाल करता है. YouTube Studio के Maps API से जुड़ा दस्तावेज़ हमारा वीडियो देखें.

फ़्लोटिंग टेक्स्ट

आप अपने ऐप्लिकेशन में कहीं भी फ़्लोटिंग टेक्स्ट जोड़ सकते हैं, बशर्ते कि वह Google एट्रिब्यूशन. नेविगेशन SDK टूल में, टेक्स्ट को ऐंकर करने की सुविधा काम नहीं करती मैप पर अक्षांश/देशांतर तक या लेबल में दिखेंगे. जानकारी पर जाएं ज़्यादा जानकारी के लिए, Windows जानकारी.

गति सीमा दिखाएं

प्रोग्राम बनाकर, रफ़्तार की सीमा का आइकॉन दिखाया या छिपाया जा सकता है. इस्तेमाल की जाने वाली चीज़ें NavigationView.setSpeedLimitIconEnabled() या SupportNavigationFragment.setSpeedLimitIconEnabled() का इस्तेमाल करें. इसे चालू करने पर, रफ़्तार की सीमा का आइकॉन दिशा-निर्देश के दौरान, सबसे नीचे कोने में दिखता है. इस आइकॉन से पता चलता है कि रफ़्तार की सीमा क्या है उस सड़क के बारे में बताएं जिस पर वाहन चल रहा है. आइकन केवल स्थानों में दिखाई देता है जहां भरोसेमंद स्पीड लिमिट का डेटा उपलब्ध होता है.

 // Display the Speed Limit icon 
 mNavFragment.setSpeedLimitIconEnabled(true);

जब दोबारा सेंटर में जाने वाला बटन होता है, तब रफ़्तार की सीमा का आइकॉन कुछ समय के लिए छिपा होता है दिखाया जाएगा.

नाइट मोड सेट करें

प्रोग्राम बनाकर नाइट मोड के व्यवहार को प्रोग्राम के हिसाब से कंट्रोल किया जा सकता है. इस्तेमाल की जाने वाली चीज़ें NavigationView.setForceNightMode() या SupportNavigationFragment.setForceNightMode() नाइट मोड चालू या बंद करने के लिए या Android के लिए नेविगेशन SDK टूल को उसे कंट्रोल करें.

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