Android नेविगेशन घटक कैसे बनाएं

किसी एप्लिकेशन को डिज़ाइन करना बोझिल हो जाता है और अधिक बार नहीं, एक व्हाइटबोर्ड होता है जिसमें विभिन्न बिंदुओं से दूसरों की ओर इशारा करते हुए तीर होते हैं।

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

नेविगेशन घटक को नमस्ते कहें।

अपरिचित के लिए, नेविगेशन घटक कोई अन्य UI वर्ग नहीं है जिसे आप अपनी गतिविधि/टुकड़े के लेआउट के बजाय रखते हैं। इसे एक मानचित्र की तरह समझें, जहां महाद्वीपों के बजाय आपके टुकड़े हों, और आपको दिशा-निर्देशों की आवश्यकता होगी महाद्वीप से महाद्वीप तक जाने के लिए। यह आपके अंशों और उनके बीच के संबंधों को ऊपर से नीचे की तरह प्रस्तुत करता है। इस लेख में, हम इस घटक के मुख्य पहलुओं पर विचार करेंगे और सीखेंगे कि हम इसे अपने अनुप्रयोगों में कैसे एकीकृत कर सकते हैं।

पाल सेट करने के लिए तैयार हैं? ️

रोप्स सीखना

नेविगेशन घटक Android Studio 3.3 और उसके बाद के संस्करण से उपलब्ध है। इसका उपयोग करने के लिए, अपने प्रोजेक्ट में निम्नलिखित निर्भरताएँ जोड़ें:

android {
    ...
}

dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.0.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.0.0'
}

काम करने के लिए कुछ करने के लिए, आइए कल्पना करें कि हमने निम्नलिखित संरचना के साथ एक एप्लिकेशन डिज़ाइन किया है:

• टुकड़ा शुरू करें
• टुकड़ा ए
• टुकड़ा बी

उपयोगकर्ता या तो प्रारंभ खंड से Fragment A या Fragment B पर जा सकता है।

यदि हम यह सब नेविगेशन घटक के बिना करना चाहते हैं, तो हमें किसी एक बटन पर क्लिक करने पर एक टुकड़ा खोलने के लिए सभी परिचित कोड जोड़ना होगा।

val myFragment : MyFragment = MyFragment()
supportFragmentManager.beginTransaction().add(R.id.container, myFragment).commit()

हमारे छोटे से उदाहरण में, यह कई छोटी पंक्तियों के बराबर है और बल्कि जटिल है, लेकिन मुझे लगता है कि हम सभी सहमत हो सकते हैं कि यह उचित पैमाने पर नहीं होगा यदि हमारा आवेदन बड़ा था और अधिक जटिल उपयोगकर्ता प्रवाह था।

सब पर सवार

नेविगेशन घटक का उपयोग शुरू करने के लिए, हमें एक नेविगेशन ग्राफ़ बनाना होगा। यह ग्राफ हमारे मानचित्र के रूप में कार्य करेगा, हमारे आवेदन में उपयोगकर्ता प्रवाह को रेखांकित करेगा। एक बनाने के लिए, रेस फ़ोल्डर पर राइट क्लिक करें और एक नई संसाधन फ़ाइल बनाएं। हम अपना नाम रखेंगे:user_flow_graph.xml . फ़ाइल के प्रकार को नेविगेशन के रूप में चिह्नित करना सुनिश्चित करें।

प्रत्येक यात्रा एक घरेलू आधार से शुरू होती है और हमारी यात्रा अलग नहीं है। हमारे घर को NavHost . कहा जाता है . जब कोई उपयोगकर्ता हमारे UI के साथ इंटरैक्ट करता है तो यह गंतव्यों की अदला-बदली के लिए प्लेसहोल्डर के रूप में कार्य करेगा। हमें अपनी गतिविधि के मुख्य लेआउट में NavHost को जोड़ने की आवश्यकता है:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/user_flow_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

हमने एक टुकड़ा तत्व जोड़ा है जो घर में होगा जहां हमारे टुकड़े प्रदर्शित होंगे और स्वैप किए जाएंगे। navGraph . पर ध्यान दें विशेषता, जिसे हमने अपनी पहले बनाई गई XML फ़ाइल से लिंक किया है।

अब हमें एक प्रारंभिक गंतव्य जोड़ने की आवश्यकता है, क्योंकि यदि हम ऐसा नहीं करेंगे तो हमारा आवेदन संकलित नहीं होगा।

user_flow_graph.xml ओपन होने के साथ, हमें नेविगेशन एडिटर में छोटे प्लस आइकन पर क्लिक करना होगा:

आप दिखाई देने वाले मेनू में देख सकते हैं कि हम या तो एक प्लेसहोल्डर बना सकते हैं जिसे बाद में भरने की आवश्यकता होगी या हम अपने पास मौजूद किसी भी टुकड़े से चुन सकते हैं:

हमारा उपयोगकर्ता प्रवाह स्टार्ट फ्रैगमेंट से शुरू होता है, तो चलिए इसे पहले चुनते हैं।

आइए हमारे अन्य दो टुकड़े, खंड ए और खंड बी जोड़ें।

जब हम किसी गंतव्य पर होवर करते हैं और उसे दूसरे स्थान पर खींचते हैं तो दिखाई देने वाले बिंदु पर क्लिक करके हम दो गंतव्यों को जोड़ते हैं।

हमने अभी-अभी प्रारंभ खंड और खंड A और B के बीच जो बनाया है, वे क्रियाएं हैं ।

मुझे कंपकंपी वाली इमारती लकड़ी

आपने खुद से पूछा होगा कि क्या सिर्फ गंतव्यों को जोड़ने से हमारा यहां काम हो जाता है और किसी जादुई तरीके से सब कुछ काम करेगा।

खैर, ऐसा नहीं होगा।

गंतव्य पर नेविगेट करने के लिए हमें अपना कोड बताना होगा। तो, हम ऐसा कैसे कर सकते हैं? इस प्रक्रिया में कुछ जादू शामिल है।

पहली चीज जो हम करने जा रहे हैं, वह है एक ग्रेडल प्लगइन जोड़ना जिसे Safe Args कहा जाता है। . जब हम अपने गंतव्यों के बीच नेविगेट करेंगे तो यह टाइप की सुरक्षा सुनिश्चित करेगा।

buildscript {
   /...
    }
    dependencies {
        ...
        classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.0.0"
        
    }
}

हमें अपने एप्लिकेशन के बिल्ड.ग्रेडल में निम्नलिखित प्लगइन को भी जोड़ना होगा:

apply plugin: "androidx.navigation.safeargs.kotlin"

साथ ही, सुनिश्चित करें कि android.useAndroidX=true आपकी gradle.properties फ़ाइल में।

आगे बढ़ने से पहले, आइए समझते हैं कि हमें इन सभी कॉन्फ़िगरेशन को जोड़ने की आवश्यकता क्यों है। मूल रूप से, जब हमने पहले एक्शन बनाया था, तो पर्दे के पीछे, एंड्रॉइड स्टूडियो कोड उत्पन्न करता है जिसका उपयोग हम क्रियाओं को सक्रिय करने के लिए करेंगे। इस कोड में प्रत्येक क्रिया का प्रतिनिधित्व करने वाले तरीके और वर्ग होते हैं। आइए एक उदाहरण के रूप में हमारे प्रारंभ खंड को लें। हमारे द्वारा घोषित कार्रवाइयों के लिए उत्पन्न कोड में StartFragmentDirections नामक एक वर्ग होगा। . इस वर्ग की विधियाँ हमारे द्वारा पहले बनाई गई क्रियाओं का प्रतिनिधित्व करती हैं। तो हमारे दोनों अंशों के लिए, हम प्राप्त करेंगे:

• StartFragmentDirections.actionStartFragmentToFragmentA()
• StartFragmentDirections.actionStartFragmentToFragmentB()

अब जबकि हमारे कार्यों का कोड में अनुवाद कर दिया गया है, आइए उनका उपयोग करें:

val action = StartFragmentDirections.actionStartFragmentToFragmentA()

इस प्रक्रिया के अंतिम चरण में हमें NavController का उपयोग करना होगा। यह वस्तु हमारे NavHost के भीतर नेविगेशन के प्रबंधन का प्रभारी है। आप इन तीन विधियों में से किसी एक का उपयोग करके इसे एक्सेस कर सकते हैं:

• Fragment.findNavController()
• View.findNavController()
• Activity.findNavController(viewId:Int)

तो, एक साथ रखकर हमारे पास होगा:

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA()
    button.findNavController().navigate(action)
}

अपनी पाल ट्रिम करें

क्या होगा अगर हम अपने गंतव्यों के बीच डेटा पास करना चाहते हैं? एक ऐसे परिदृश्य की कल्पना करें जहां यदि उपयोगकर्ता किसी निश्चित आइटम पर क्लिक करता है, तो हम उस आइटम के साथ अपने अगले गंतव्य में कुछ करना चाहते हैं। उसके लिए, हमारे पास गंतव्य तर्क हैं। हमारा user_flow_graph.xml खोलें और Fragment A पर क्लिक करें। आप दायीं ओर देखेंगे, Fragment A की विभिन्न विशेषताओं का विवरण देने वाला एक मेनू। उन विशेषताओं में से एक तर्क होगा।

तर्क जोड़ने के लिए, बस आइकन पर क्लिक करें। एक पॉपअप विंडो खुलती है और इसमें हम अपने तर्क को कॉन्फ़िगर कर सकते हैं। आप इसे एक नाम दे सकते हैं, इसका प्रकार चुन सकते हैं और एक डिफ़ॉल्ट मान जोड़ सकते हैं। आइए स्ट्रिंग प्रकार का एक तर्क Fragment A में जोड़ें, जो कि प्रारंभ खंड से पारित संदेश होगा।

हमारे प्रारंभ खंड में, जहां हमने अपनी क्रिया को परिभाषित किया है और उत्पन्न विधि को कॉल कर रहे हैं, हम अपने तर्क में पारित करेंगे।

fragmentABtn.setOnClickListener { button ->
    val action = StartFragmentDirections.actionStartFragmentToFragmentA("Hello From Start Fragment")
    button.findNavController().navigate(action)
}

Fragment A में इसे एक्सेस करने के लिए, हमें इनमें से किसी एक की आवश्यकता होगी:

• बंडल तक पहुंचें और हमारा संदेश मूल्य प्राप्त करें

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val bundle = arguments
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = bundle?.getString("message")
        return root
    }
}

• यदि हम -ktx निर्भरता का उपयोग कर रहे हैं, तो navArgs का उपयोग करें

class FragmentA: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val args : FragmentAArgs by navArgs()
        val root = inflater.inflate(R.layout.fragment_a, container, false)
        val textView : TextView = root.findViewById(R.id.textView)
        textView.text = args.message
        return root
    }
}

navArgs का उपयोग करते समय, आपको अपनी build.gradle फ़ाइल में Java8 के लिए समर्थन जोड़ने की आवश्यकता होगी।

आप इस GitHub रिपॉजिटरी में यहां दिखाए गए सभी कोड पा सकते हैं।