Android Kotlin Fundamentals 03.1: फ़्रैगमेंट बनाना

यह कोडलैब, Android Kotlin Fundamentals कोर्स का हिस्सा है. अगर कोडलैब को क्रम से पूरा किया जाता है, तो आपको इस कोर्स से सबसे ज़्यादा फ़ायदा मिलेगा. कोर्स के सभी कोडलैब, Android Kotlin Fundamentals कोडलैब के लैंडिंग पेज पर दिए गए हैं.

इस कोडलैब में, आपको फ़्रैगमेंट के बारे में जानकारी मिलेगी. साथ ही, AndroidTrivia नाम के स्टार्टर ऐप्लिकेशन में फ़्रैगमेंट बनाने का तरीका बताया जाएगा. अगले कोडलैब में, आपको नेविगेशन के बारे में ज़्यादा जानकारी मिलेगी. साथ ही, AndroidTrivia ऐप्लिकेशन पर आगे काम करने का मौका मिलेगा.

आपको पहले से क्या पता होना चाहिए

• Kotlin की बुनियादी बातें
• Kotlin में बुनियादी Android ऐप्लिकेशन बनाने का तरीका
• लेआउट इस्तेमाल करने का तरीका

आपको क्या सीखने को मिलेगा

• अपने ऐप्लिकेशन में किसी फ़्रैगमेंट को स्टैटिक तौर पर जोड़ने का तरीका

आपको क्या करना होगा

• किसी गतिविधि में फ़्रैगमेंट बनाएं.

इस लेसन में शामिल तीन कोडलैब में, आपको AndroidTrivia नाम के ऐप्लिकेशन पर काम करना है. यह एक गेम है, जिसमें उपयोगकर्ता को Android कोडिंग के बारे में तीन सवालों के जवाब देने होते हैं. अगर उपयोगकर्ता तीनों सवालों के सही जवाब देता है, तो वह गेम जीत जाता है और अपने नतीजे शेयर कर सकता है.

AndroidTrivia ऐप्लिकेशन में, नेविगेशन के पैटर्न और कंट्रोल दिखाए गए हैं. ऐप्लिकेशन में कई कॉम्पोनेंट होते हैं:

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

ऐप्लिकेशन में सबसे ऊपर, रंगीन व्यू दिखता है. इसे ऐप्लिकेशन बार कहा जाता है. इसे ऐक्शन बार के नाम से भी जाना जाता है.

इस कोडलैब में, आपको एक स्टार्टर ऐप्लिकेशन का इस्तेमाल करना होगा. इसमें टेंप्लेट कोड और फ़्रैगमेंट क्लास दिए गए हैं. Trivia ऐप्लिकेशन को पूरा करने के लिए, आपको इनकी ज़रूरत होगी.

1. AndroidTrivia-Starter Android Studio प्रोजेक्ट डाउनलोड करें.
2. Android Studio में प्रोजेक्ट खोलें और ऐप्लिकेशन चलाएं. ऐप्लिकेशन खुलने पर, यह ऐप्लिकेशन का नाम और एक खाली स्क्रीन दिखाने के अलावा कुछ नहीं करता.
   
   
   
3. प्रोजेक्ट फ़ाइलों को एक्सप्लोर करने के लिए, Android Studio के प्रोजेक्ट पैन में जाकर, प्रोजेक्ट: Android व्यू खोलें. MainActivity क्लास और फ़्रैगमेंट क्लास देखने के लिए, app > java फ़ोल्डर खोलें.
   
   
4. res > layout फ़ोल्डर खोलें और activity_main.xml पर दो बार क्लिक करें. लेआउट एडिटर में activity_main.xml फ़ाइल दिखती है.
5. डिज़ाइन टैब पर क्लिक करें. activity_main.xml फ़ाइल के लिए कॉम्पोनेंट ट्री में, रूट लेआउट को वर्टिकल LinearLayout के तौर पर दिखाया गया है.
   
   
   
   वर्टिकल लीनियर लेआउट में, लेआउट के सभी चाइल्ड व्यू वर्टिकली अलाइन होते हैं.

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

फ़्रैगमेंट को किसी ऐक्टिविटी के मॉड्यूलर सेक्शन के तौर पर देखा जा सकता है. यह "सब ऐक्टिविटी" की तरह होता है, जिसका इस्तेमाल अन्य ऐक्टिविटी में भी किया जा सकता है:

• फ़्रैगमेंट का अपना लाइफ़साइकल होता है और इसे अपने इनपुट इवेंट मिलते हैं.
• ऐक्टिविटी के चालू रहने के दौरान, फ़्रैगमेंट को जोड़ा या हटाया जा सकता है.
• फ़्रैगमेंट को Kotlin क्लास में तय किया जाता है.
• किसी फ़्रैगमेंट का यूज़र इंटरफ़ेस (यूआई), एक्सएमएल लेआउट फ़ाइल में तय किया जाता है.

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

पहला चरण: फ़्रैगमेंट क्लास जोड़ना

इस चरण में, आपको एक खाली TitleFragment क्लास बनानी होगी. सबसे पहले, नए फ़्रैगमेंट के लिए Kotlin क्लास बनाएं:

1. प्रोजेक्ट फ़ाइलों पर वापस जाने के लिए, Android Studio में प्रोजेक्ट पैन में कहीं भी क्लिक करें. उदाहरण के लिए, com.example.android.navigation फ़ोल्डर पर क्लिक करें.
2. फ़ाइल > नया > फ़्रैगमेंट > फ़्रैगमेंट (खाली) चुनें.
3. फ़्रैगमेंट के नाम के लिए, TitleFragment का इस्तेमाल करें. सभी चेकबॉक्स से सही का निशान हटाएं. इनमें लेआउट एक्सएमएल बनाएं, फ़्रैगमेंट फ़ैक्ट्री के तरीके शामिल करें, और इंटरफ़ेस कॉलबैक शामिल करें शामिल हैं.
4. पूरा करें पर क्लिक करें.
5. अगर TitleFragment.kt फ़्रैगमेंट फ़ाइल पहले से खुली हुई नहीं है, तो उसे खोलें. इसमें onCreateView() तरीका शामिल होता है. यह उन तरीकों में से एक है जिन्हें किसी फ़्रैगमेंट की लाइफ़साइकल के दौरान कॉल किया जाता है.
6. onCreateView() में, return TextView(activity).apply सेक्शन को हटा दें. इसमें setText से शुरू होने वाली लाइन भी शामिल है. onCreateView() फ़ंक्शन में सिर्फ़ यह कोड बचा है:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

बाइंडिंग ऑब्जेक्ट बनाना

अब फ़्रैगमेंट कंपाइल नहीं होगा. फ़्रैगमेंट को कंपाइल करने के लिए, आपको एक बाइंडिंग ऑब्जेक्ट बनाना होगा. साथ ही, फ़्रैगमेंट के व्यू को बड़ा करना होगा. यह किसी गतिविधि के लिए setContentView() का इस्तेमाल करने के बराबर है.

1. TitleFragment.kt में onCreateView() तरीके का इस्तेमाल करके, binding वैरिएबल (val binding) बनाएं.
2. फ़्रैगमेंट के व्यू को इनफ़्लेट करने के लिए, फ़्रैगमेंट के Binding ऑब्जेक्ट पर DataBindingUtil.inflate() मेथड को कॉल करें. यह FragmentTitleBinding है.
   
   इस तरीके में चार पैरामीटर पास करें:

• inflater, जो बाइंडिंग लेआउट को बड़ा करने के लिए इस्तेमाल किया गया LayoutInflater है.
• इनफ़्लेट किए जाने वाले लेआउट का एक्सएमएल लेआउट रिसॉर्स. आपके लिए पहले से तय किए गए लेआउट, R.layout.fragment_title में से किसी एक का इस्तेमाल करें.
• ViewGroup के लिए container. (यह पैरामीटर ज़रूरी नहीं है.)
• attachToParent वैल्यू के लिए false.
  

2. DataBindingUtil.inflate से मिले बाइंडिंग को binding वैरिएबल को असाइन करें.
3. तरीके से binding.root को वापस लाएं, जिसमें बढ़ा हुआ व्यू शामिल है. आपका onCreateView() तरीका अब इस कोड की तरह दिखता है:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

दूसरा चरण: मुख्य लेआउट फ़ाइल में नया फ़्रैगमेंट जोड़ना

इस चरण में, आपको ऐप्लिकेशन की activity_main.xml लेआउट फ़ाइल में TitleFragment जोड़ना होता है.

1. res > layout > activity_main.xml खोलें. इसके बाद, लेआउट एक्सएमएल कोड देखने के लिए Text टैब पर क्लिक करें.
2. मौजूदा LinearLayout एलिमेंट में, fragment एलिमेंट जोड़ें.
3. फ़्रैगमेंट के आईडी को titleFragment पर सेट करें.
4. फ़्रैगमेंट के नाम को फ़्रैगमेंट क्लास के पूरे पाथ पर सेट करें. इस मामले में, यह com.example.android.navigation.TitleFragment है.
5. लेआउट की चौड़ाई और ऊंचाई को match_parent पर सेट करें.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>

6. ऐप्लिकेशन चलाएं. फ़्रैगमेंट को आपकी मुख्य स्क्रीन पर जोड़ दिया गया है.

Android Studio प्रोजेक्ट: AndroidTriviaFragment

इस कोडलैब में, आपने AndroidTrivia ऐप्लिकेशन में एक फ़्रैगमेंट जोड़ा है. इस लेसन के अगले दो कोडलैब में, आपको इस पर काम करना जारी रखना होगा.

• फ़्रैगमेंट, किसी ऐक्टिविटी का मॉड्यूलर सेक्शन होता है.
• फ़्रैगमेंट का अपना लाइफ़साइकल होता है और इसे अपने इनपुट इवेंट मिलते हैं.
• एक्सएमएल लेआउट फ़ाइल में फ़्रैगमेंट के लेआउट को तय करने के लिए, <fragment> टैग का इस्तेमाल करें.
• onCreateView() में किसी फ़्रैगमेंट के लिए लेआउट इनफ़्लेट करें.
• ऐक्टिविटी के चालू रहने के दौरान, फ़्रैगमेंट को जोड़ा या हटाया जा सकता है.

Udacity का कोर्स:

• Kotlin की मदद से Android ऐप्लिकेशन डेवलप करना

Android डेवलपर का दस्तावेज़:

• लीनियर लेआउट
• LinearLayout
• फ़्रैगमेंट लाइफ़साइकल
• DataBindingUtil

इस सेक्शन में, उन छात्र-छात्राओं के लिए होमवर्क असाइनमेंट की सूची दी गई है जो किसी शिक्षक के कोर्स के हिस्से के तौर पर इस कोडलैब पर काम कर रहे हैं. शिक्षक के पास ये विकल्प होते हैं:

• अगर ज़रूरी हो, तो होमवर्क असाइन करें.
• छात्र-छात्राओं को बताएं कि होमवर्क असाइनमेंट कैसे सबमिट किए जाते हैं.
• होमवर्क असाइनमेंट को ग्रेड दें.

शिक्षक इन सुझावों का इस्तेमाल अपनी ज़रूरत के हिसाब से कर सकते हैं. साथ ही, वे चाहें, तो कोई दूसरा होमवर्क भी दे सकते हैं.

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

इन सवालों के जवाब दें

Question 1

फ़्रैगमेंट और ऐक्टिविटी के बीच कुछ अंतर क्या हैं? सभी सही जवाब चुनें.

• फ़्रैगमेंट बनाते समय, लेआउट को onCreateView() मेथड में इनफ़्लेट किया जाता है. गतिविधि बनाते समय, लेआउट को onCreate() में बड़ा किया जाता है.
• किसी ऐक्टिविटी का अपना लेआउट होता है, लेकिन किसी फ़्रैगमेंट का अपना लेआउट नहीं हो सकता.
• किसी ऐक्टिविटी का अपना लाइफ़साइकल होता है, लेकिन फ़्रैगमेंट का नहीं.
• किसी फ़्रैगमेंट या ऐक्टिविटी के लिए लेआउट को बड़ा करते समय, लेआउट को R.layout.layoutname के तौर पर रेफ़रंस किया जा सकता है.

दूसरा सवाल

फ़्रैगमेंट के बारे में इनमें से कौनसी बातें सही हैं? लागू होने वाले सभी विकल्पों को चुनें.

• किसी फ़्रैगमेंट का इस्तेमाल एक से ज़्यादा ऐक्टिविटी में किया जा सकता है.
• एक ऐक्टिविटी में कई फ़्रैगमेंट हो सकते हैं.
• Kotlin क्लास में फ़्रैगमेंट तय करने के बाद, फ़्रैगमेंट को activity_main.xml लेआउट फ़ाइल में अपने-आप जोड़ दिया जाता है.
• लेआउट फ़ाइल में उस जगह को तय करने के लिए <fragment> टैग का इस्तेमाल करें जहां फ़्रैगमेंट डाला जाना है.

अगला सबक शुरू करें: 3.2 नेविगेशन पाथ तय करना

इस कोर्स में मौजूद अन्य कोडलैब के लिंक के लिए, Android Kotlin Fundamentals कोडलैब का लैंडिंग पेज देखें.