एंड्रॉइड के लिए नेविगेशन नेविगेशन आर्किटेक्चर घटक का उपयोग करना: वॉकथ्रू

आइए, आधिकारिक गाइड और कोड उदाहरणों का उपयोग करके, नेविगेशन आर्किटेक्चर घटक के मानकों के अनुसार भविष्य के मल्टी-स्क्रीन एप्लिकेशन के लिए एक कार्यशील नेविगेशन सिस्टम बनाने के लिए। लेख में निम्नलिखित अनुभाग शामिल हैं:

भाग 1. तैयारी का काम
- 1.1। परियोजना निर्माण
- 1.2। निर्भर करता है (निर्भरता)
- 1.3। पेज: टुकड़े बनाना
- 1.4। पते: "नेविगेशन" संसाधन फ़ाइल टाइप करें
- 1.5। फ़्रेम: NavHostFragment विजेट
भाग 2. नेविगेशन तत्व
- 2.1। बटन नेविगेशन
- 2.2। साइड मेनू (दराज)
- 2.3। टूलबार: ActionBar के बजाय टूलबार
- 2.4। निचला मेनू (निचला नेविगेशन)
- 2.5। पॉप-अप मेनू
सारांश और जीथब लिंक

भाग 1. तैयारी का काम

1.1। परियोजना निर्माण

हमें कोटलिन , आईडीई एंड्रॉइड स्टूडियो संस्करण के बुनियादी ज्ञान की आवश्यकता होगी जो 3.3 से कम नहीं है, एक स्मार्टफोन या एपीआई संस्करण 14 के साथ एमुलेटर।

आइए "नेविगेशन2019" नामक एंड्रॉइड स्टूडियो में एक नया प्रोजेक्ट बनाएं।





IDE मुख्य गतिविधि फ़ाइल "MainActivity.kt" और इसका लेआउट (टेम्पलेट) "activity_main.xml" बनाएगा।

1.2। निर्भर करता है (निर्भरता)

मॉड्यूल की फ़ाइल "build.gradle" खोलें (प्रोजेक्ट नहीं, लेकिन मॉड्यूल) और ब्लॉक "निर्भरता" के लिए आवश्यक निर्भरता जोड़ें:

def nav_version = «1.0.0» implementation «android.arch.navigation:navigation-fragment-ktx:$nav_version» implementation «android.arch.navigation:navigation-ui-ktx:$nav_version» 

हमने पुस्तकालयों के संस्करण 1.0.0 का उपयोग किया, लेकिन भविष्य में स्थिति बदल सकती है। यहां देखें कि कौन से लाइब्रेरी संस्करण प्रासंगिक हैं ।

1.3। पेज: टुकड़े बनाना

टुकड़े हमारे भविष्य के अनुप्रयोग के "पृष्ठ" हैं। "नई -> टुकड़ा -> टुकड़ा (रिक्त)" कमांड "Fragment1" का उपयोग करके, वर्ग फ़ाइलों के साथ निर्देशिका पर राइट-क्लिक करें।





आईडीई एक खंड फ़ाइल के साथ एक केटी फ़ाइल और एक खंड लेआउट के साथ एक xml फ़ाइल बनाएगा। उसी तरह, हम तीन और टुकड़े उत्पन्न करते हैं ("Fragment2", "Fragment3", "Fragment4")। हम उन्हें चार अलग-अलग प्रकार के एप्लिकेशन नेविगेशन बनाने के लिए उपयोग करेंगे।

1.4। पते: "नेविगेशन" संसाधन फ़ाइल टाइप करें

"रेस" फ़ोल्डर पर राइट-क्लिक करके, "path.xml" ("मार्गों") नाम के साथ "नेविगेशन" प्रकार की एक संसाधन फ़ाइल बनाएं।





आइए बनाई गई फ़ाइल खोलें और नेविगेशन आरेख में हमारे टुकड़े जोड़ने के लिए "नया गंतव्य" बटन का उपयोग करें।





"लोभी" टुकड़े के दाईं ओर के बीच में माउस , टुकड़े को एक दूसरे से कनेक्ट करें क्योंकि उन्हें अनुप्रयोग में जोड़ा जाना चाहिए।



उनके नामों के अनुसार, हमारे टुकड़ों को पहचानकर्ता (आईडी) "खंड 1", "खंड 2", "खंड 3", "खंड 4" प्राप्त होंगे। ये "पते" हैं जो नेविगेशन नियंत्रक के निर्देशों में गंतव्यों को इंगित करते समय उपयोग किए जाएंगे।

"आईडी" के अलावा, प्रत्येक टैग "टुकड़े" में तीन और पैरामीटर होते हैं: "नाम", "लेबल" और "लेआउट"। "नाम" और "लेआउट" पैरामीटर अब हमारे लिए रुचि के नहीं हैं। "मार्गों.xml" फ़ाइल में संपादन के लायक एकमात्र चीज़ टुकड़ों के नाम ("लेबल") है। उन्हें "टुकड़ा नंबर 1", "टुकड़ा नंबर 2", "टुकड़ा नंबर 3" और "टुकड़ा नंबर 4" के साथ बदलें।

1.5। फ़्रेम: NavHostFragment विजेट

लेआउट फ़ाइल खोलें "res / layout / activity_main.xml" और पाठ विजेट "हैलो वर्ल्ड!" को हटाएं, हमें इसकी आवश्यकता नहीं है। पैलेट में, "कंटेनर" अनुभाग का चयन करें और गतिविधि लेआउट पर नवहॉस्टफ्रैगमेंट विजेट को वहां से खींचें (हमारे "मार्गों" फ़ाइल को इसके लिए जानकारी के स्रोत के रूप में निर्दिष्ट करें)। यह एक फ्रेम की भूमिका को पूरा करेगा जिसमें आवेदन के विभिन्न टुकड़े प्रदर्शित किए जाएंगे।





टुकड़े की आईडी को "नेवफ्रैगमेंट" में बदलें। मुख्य गतिविधि के लिए लेआउट कोड अब इस तरह दिखेगा:



इस पर, प्रारंभिक कार्य पूरा हो गया है, अब आप सीधे नेविगेशन तत्वों के निर्माण के लिए आगे बढ़ सकते हैं।

भाग 2. नेविगेशन तत्व

2.1। बटन नेविगेशन

पहले टुकड़े का लेआउट खोलें ("fragment_fragment1.xml")। अनावश्यक टेक्स्ट विजेट को हटाएं, लेआउट प्रकार को "फ्रेमलैटआउट" से रैखिक ऊर्ध्वाधर में बदलें और पहचानकर्ताओं के साथ तीन बटन जोड़ें "बटन 2", "बटन 3", "बटन 4" और संबंधित नाम "फ्रेग्मेंट 2", "फ्रेग्मेंट 3", "फ्रेग्मेंट 4"।



टुकड़े के "onCreateView" विधि में, हम नेविगेशन नियंत्रक ("NavController" ऑब्जेक्ट) के लिए एक लिंक प्राप्त करते हैं और बटन दबाए जाने पर व्यवहार को प्रोग्राम करते हैं: "setOnClickListener" कमांड के साथ, प्रत्येक बटन के लिए हम एक बटन श्रोता बनाते हैं जो बटन पर क्लिक करने पर, नेविगेशन नियंत्रक (आईडी) आईडी पर भेज देगा। निर्दिष्ट पते पर नेविगेट करने के लिए कमांड के साथ गंतव्य।



आइए देखें कि हमारे बटन कैसे काम करते हैं।



एक बटन - कोड की एक पंक्ति - और बटन पर क्लिक करने से हम निर्दिष्ट टुकड़े पर चले जाते हैं। सरल, सही?

लेकिन मेनू के बिना यह बहुत सुविधाजनक नहीं है, आपको स्टार्ट स्क्रीन पर लौटने के लिए "बैक" बटन का उपयोग करना होगा।

2.2। साइड मेनू (दराज)

2.2.1। मेनू संसाधन फ़ाइल

"रिस / मेनू" निर्देशिका में, एक संसाधन मेनू फ़ाइल बनाएँ "drawer_menu.xml"। हम इसमें मेनू आइटम जोड़ते हैं, जिनमें से प्रत्येक "आईडी" पैरामीटर के साथ एक टैग "आइटम" है (जो कि नेविगेशन कॉलम "मार्गों.xml", "शीर्षक" (शीर्षक, यह अलग हो सकता है) के अनुरूप होना चाहिए, "आइकन" (हम हम सभी वस्तुओं के लिए एक ही चित्र का उपयोग करते हैं, लेकिन, निश्चित रूप से, वे अलग हो सकते हैं), आदि हमारा मेनू इस तरह दिखाई देगा:

2.2.2। गतिविधि लेआउट में ड्रॉअरआउट टेम्पलेट और नेविगेशन व्यू विजेट

गतिविधि लेआउट फ़ाइल "activity_main.xml" खोलें।

पहले टैग (xml संस्करण ...) के बाद टैग "DrawerLayout" की शुरुआत जोड़ें।



फ़ाइल के अंत में, "नेवीगेशन व्यू" विजेट और "ड्राअर लयआउट" टैग के अंत में जोड़ें।

2.2.3। एक गतिविधि वर्ग में एक साइड मेनू कनेक्ट करना

फ़ाइल खोलें "MainActivity.kt" और "onCreate" विधि में हमें "navController" के लिए एक लिंक मिलता है (गतिविधि में यह टुकड़े की तुलना में थोड़ा अधिक जटिल दिखता है)।



फिर साइड मेनू चालू करें:



वर्ग कोड अब इस तरह दिखता है:



अब स्क्रीन के बाएं किनारे से स्वाइप के जवाब में मेनू दिखाई देता है:



साइड मेनू, दाईं ओर कॉल करने के लिए ऊपर बाईं ओर एक बटन जोड़ना अच्छा होगा?

2.3। टूलबार पर बटन और टुकड़े का नाम

डिफ़ॉल्ट ActionBar, आधिकारिक गाइड द्वारा अनुशंसित के रूप में, टूलबार द्वारा प्रतिस्थापित किया जाता है।

किसी मौजूदा ActionBar को निष्क्रिय करने के लिए, फ़ाइल में "res / मान / स्टाइल.xml" हम लाइन पाते हैं

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 

और "DarkActionBar" को "NoActionBar" से बदलें।



महान, हमने ActionBar को निष्क्रिय कर दिया।



अब टूलबार जोड़ें। फ़ाइल खोलें "activity_main.xml", पैलेट में "कंटेनर" अनुभाग चुनें और गतिविधि लेआउट पर "टूलबार" विजेट को वहां से खींचें। टूलबार जोड़ा गया है, लेकिन यह अभी तक खाली है।



गतिविधि फ़ाइल "MainActivity.kt" पर जाएं। टूलबार पर बटन और वर्तमान टुकड़े के नाम को प्रदर्शित करने के लिए, निम्नलिखित पंक्तियों को "onCreate ()") में जोड़ें:



टूलबार अब नेस्टेड टुकड़ों के लिए खंड नाम और अप बटन प्रदर्शित करता है।



एंड्रॉइड में अप बटन बाएं तीर द्वारा इंगित किसी कारण के लिए है:



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





इस बटन पर क्लिक करने से साइड मेनू प्रदर्शित होता है।

2.4। निचला मेनू (निचला नेविगेशन)

कभी-कभी कुछ कार्यों पर उपयोगकर्ता का ध्यान केंद्रित करना आवश्यक होता है, और नीचे मेनू प्रभावी रूप से ऐसा करने में मदद करता है। इसे तीसरे टुकड़े में जोड़ें।

सबसे पहले, लिंक के एक जोड़े के साथ एक संसाधन मेनू फ़ाइल "bottom_nav_menu.xml" बनाएं। फिर, खंड # 3 का लेआउट खोलें (फ़ाइल "fragment_fragment3.xml") और उस पर "बॉटनव्यूज़ व्यू" विजेट को खींचें, साथ ही साथ com.android.support.design लाइब्रेरी को निर्भरता में जोड़ने के लिए IDE के प्रस्ताव से सहमत हैं।





यदि हमने नीचे का मेनू एक टुकड़े के लिए नहीं, बल्कि एक बार में सभी के लिए बनाया है, तो हमें निम्नलिखित कोड को गतिविधि वर्ग के ऑनक्रिएट विधि (फ़ाइल "MainActivity.kt") में शामिल करना होगा:



निश्चित रूप से, इस मामले में बॉटमवेशन व्यू विजेट को एक्टिविटी लेआउट में रखा जाना चाहिए, न कि टुकड़ा।

लेकिन जब से हमें केवल खंड संख्या 3 में इस मेनू की आवश्यकता है, हम टुकड़े वर्ग (फ़ाइल "Fragment3.kt") को संपादित करेंगे, और कोड थोड़ा और अधिक जटिल दिखेगा:



नतीजतन, हमें नीचे मेनू मिलता है, जो केवल 3 टुकड़े में प्रदर्शित होगा।



वही, लेकिन अन्य लिंक के साथ, हम 4 वें टुकड़े में करेंगे।

2.5। पॉप-अप मेनू

एक अन्य प्रकार का मेनू एक पॉप-अप मेनू है जो स्क्रीन के ऊपरी दाएं कोने में बटन (तीन लंबवत स्थित डॉट्स) पर क्लिक करने पर दिखाई देता है।



आवश्यक लिंक के साथ एक संसाधन मेनू फ़ाइल "top_right_menu.xml" बनाएं।

"MainActivity" फ़ाइल में, "onCreate" विधि में, "toolBar.setupWithNavController ..." लाइन से पहले "setSupportActionBar (toolBar)" जोड़ें।



और आगे उसी कक्षा में हम दो विधियों को फिर से परिभाषित करते हैं:



शीर्ष दायां बटन दबाने पर अब एक पॉपअप मेनू प्रदर्शित होता है:

सारांश और जीथब लिंक

जाहिर है, नेविगेशन आर्किटेक्चर घटक डेवलपर के काम को बहुत सुविधाजनक बनाता है। अतीत में मुश्किल काम अब कोड की कुछ लाइनों के साथ हल हो गए हैं।

चूंकि इस प्रकाशन का मुख्य उद्देश्य एंड्रॉइड एप्लिकेशन में नेविगेशन बनाने के लिए बुनियादी एल्गोरिदम को रोशन करना था, इसलिए कई कार्यान्वयन विवरण जानबूझकर पर्दे के पीछे छोड़ दिए गए थे।

मेरा कार्य शेड्यूल आमतौर पर मुझे चर्चाओं का समर्थन करने की अनुमति नहीं देता है, लेकिन किसी भी मामले में आपकी टिप्पणी साइट पर आगंतुकों के लिए उपयोगी होगी और इसलिए हमेशा स्वागत है।

प्रोजेक्ट फाइलें यहां हैं ।