जेटपैक नेविगेशन को नेविगेशन के लिए लिखने की सुविधा पर माइग्रेट करें

Navigation Compose API की मदद से, Compose ऐप्लिकेशन में कंपोज़ेबल के बीच नेविगेट किया जा सकता है. साथ ही, Jetpack Navigation's कॉम्पोनेंट, इन्फ़्रास्ट्रक्चर, और सुविधाओं का फ़ायदा लिया जा सकता है.

इस पेज पर, फ़्रैगमेंट पर आधारित Jetpack Navigation से Navigation Compose पर माइग्रेट करने का तरीका बताया गया है. यह Jetpack Compose पर व्यू पर आधारित यूज़र इंटरफ़ेस (यूआई) को माइग्रेट करने की प्रोसेस का हिस्सा है.

माइग्रेशन से जुड़ी ज़रूरी शर्तें

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

माइग्रेशन के चरण

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

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

Navigation Compose पर माइग्रेट करने के लिए, यह तरीका अपनाएं:

1. अपने ऐप्लिकेशन में Navigation Compose डिपेंडेंसी जोड़ें.

2. एक App-level कंपोज़ेबल बनाएं और उसे अपने Activity में Compose एंट्री पॉइंट के तौर पर जोड़ें. इससे व्यू लेआउट का सेटअप बदल जाएगा:

   class SampleActivity : ComponentActivity() {
   
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
           setContent {
               SampleApp(/* ... */)
           }
       }
   }
   MigrationCommonScenariosSnippets.kt

3. हर नेविगेशन डेस्टिनेशन के लिए टाइप बनाएं. जिन डेस्टिनेशन के लिए किसी डेटा की ज़रूरत नहीं होती उनके लिए data object का इस्तेमाल करें. साथ ही, जिन डेस्टिनेशन के लिए डेटा की ज़रूरत होती है उनके लिए data class या class का इस्तेमाल करें.

   @Serializable data object First
   @Serializable data class Second(val id: String)
   @Serializable data object Third
   MigrationCommonScenariosSnippets.kt

4. NavController को ऐसी जगह पर सेट अप करें जहां इसे रेफ़रंस करने वाले सभी कंपोज़ेबल इसे ऐक्सेस कर सकें. आम तौर पर, यह आपके App कंपोज़ेबल के अंदर होता है. इस तरीके में, स्टेट होइस्टिंग के सिद्धांतों का पालन किया जाता है. साथ ही, आपको कंपोज़ेबल स्क्रीन के बीच नेविगेट करने और बैक स्टैक को बनाए रखने के लिए, NavController को सोर्स ऑफ़ ट्रुथ के तौर पर इस्तेमाल करने की सुविधा मिलती है:

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
       // ...
   }
   MigrationCommonScenariosSnippets.kt

5. App कंपोज़ेबल के अंदर, अपने ऐप्लिकेशन का NavHost बनाएं और navController पास करें:

   @Composable
   fun SampleApp() {
       val navController = rememberNavController()
   
       SampleNavHost(navController = navController)
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

6. अपना नेविगेशन ग्राफ़ बनाने के लिए, composable डेस्टिनेशन जोड़ें. अगर हर स्क्रीन को पहले ही Compose में माइग्रेट कर दिया गया है, तो इस चरण में सिर्फ़ इन स्क्रीन कंपोज़ेबल को अपने फ़्रैगमेंट से composable डेस्टिनेशन में एक्सट्रैक्ट करना होता है:

   class FirstFragment : Fragment() {
   
       override fun onCreateView(
           inflater: LayoutInflater,
           container: ViewGroup?,
           savedInstanceState: Bundle?
       ): View {
           return ComposeView(requireContext()).apply {
               setContent {
                   // FirstScreen(...) EXTRACT FROM HERE
               }
           }
       }
   }
   
   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(/* ... */) // EXTRACT TO HERE
           }
           composable<Second> {
               SecondScreen(/* ... */)
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

7. अगर आपने Compose UI को आर्किटेक्ट करने से जुड़े दिशा-निर्देशों का पालन किया है, तो आपको यह भी पता होगा कि ViewModel और नेविगेशन इवेंट को कंपोज़ेबल में कैसे पास किया जाना चाहिए. अब आपको हर स्क्रीन कंपोज़ेबल को ViewModel देने का तरीका बदलना होगा. hiltViewModel के ज़रिए, Hilt इंजेक्शन और Compose और Navigation के साथ इसके इंटिग्रेशन पॉइंट का इस्तेमाल अक्सर किया जा सकता है:

   @Composable
   fun FirstScreen(
       // viewModel: FirstViewModel = viewModel(),
       viewModel: FirstViewModel = hiltViewModel(),
       onButtonClick: () -> Unit = {},
   ) {
       // ...
   }
   MigrationCommonScenariosSnippets.kt

8. सभी findNavController() नेविगेशन कॉल को navController से बदलें और इन्हें हर कंपोज़ेबल स्क्रीन पर नेविगेशन इवेंट के तौर पर पास करें. पूरे navController को पास न करें. इस तरीके में, कंपोज़ेबल फ़ंक्शन से इवेंट को कॉल करने वालों के लिए उपलब्ध कराने के सबसे सही तरीकों का पालन किया जाता है. साथ ही, navController को एकमात्र भरोसेमंद सोर्स के तौर पर रखा जाता है.

   डेटा को किसी डेस्टिनेशन पर भेजने के लिए, उस डेस्टिनेशन के लिए तय की गई route क्लास का इंस्टेंस बनाया जा सकता है. इसके बाद, इसे सीधे तौर पर डेस्टिनेशन पर मौजूद पिछली गतिविधियां एंट्री से या ViewModel से SavedStateHandle.toRoute() का इस्तेमाल करके हासिल किया जा सकता है.

   @Composable
   fun SampleNavHost(
       navController: NavHostController
   ) {
       NavHost(navController = navController, startDestination = First) {
           composable<First> {
               FirstScreen(
                   onButtonClick = {
                       // findNavController().navigate(firstScreenToSecondScreenAction)
                       navController.navigate(Second(id = "ABC"))
                   }
               )
           }
           composable<Second> { backStackEntry ->
               val secondRoute = backStackEntry.toRoute<Second>()
               SecondScreen(
                   id = secondRoute.id,
                   onIconClick = {
                       // findNavController().navigate(secondScreenToThirdScreenAction)
                       navController.navigate(Third)
                   }
               )
           }
           // ...
       }
   }
   MigrationCommonScenariosSnippets.kt

9. सभी फ़्रैगमेंट, काम के एक्सएमएल लेआउट, ग़ैर-ज़रूरी नेविगेशन, और अन्य संसाधन हटाएं. साथ ही, पुराने फ़्रैगमेंट और Jetpack Navigation की डिपेंडेंसी हटाएं.

आपको सेटअप से जुड़े दस्तावेज़ में, नेविगेशन कंपोज़ से जुड़ी ज़्यादा जानकारी के साथ यही चरण मिल सकते हैं.

इस्तेमाल के सामान्य उदाहरण

चाहे किसी भी नेविगेशन कॉम्पोनेंट का इस्तेमाल किया जा रहा हो, नेविगेशन के सिद्धांत एक जैसे ही होते हैं.

माइग्रेट करते समय, इन सामान्य उदाहरणों का इस्तेमाल किया जा सकता है:

• किसी कंपोज़ेबल पर जाना
• आर्ग्युमेंट की मदद से नेविगेट करना
• डीप लिंक
• नेस्टेड नेविगेशन
• सबसे नीचे मौजूद नेविगेशन बार के साथ इंटिग्रेशन
• कस्टम नेविगेशन कॉम्पोनेंट के साथ इंटिग्रेशन

इन उदाहरणों के बारे में ज़्यादा जानकारी के लिए, Compose की मदद से नेविगेट करना लेख पढ़ें.

नेविगेट करते समय मुश्किल डेटा को वापस पाना

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

अगर आपके फ़्रैगमेंट, आर्ग्युमेंट के तौर पर जटिल ऑब्जेक्ट पास कर रहे हैं, तो सबसे पहले अपने कोड को इस तरह से रीफ़ैक्टर करें कि इन ऑब्जेक्ट को डेटा लेयर से सेव और फ़ेच किया जा सके. उदाहरणों के लिए, Now in Android repository देखें.

सीमाएं

इस सेक्शन में, Navigation Compose की मौजूदा सीमाओं के बारे में बताया गया है.

Navigation Compose पर धीरे-धीरे माइग्रेट करना

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

ट्रांज़िशन ऐनिमेशन

Navigation 2.7.0-alpha01 से, कस्टम ट्रांज़िशन सेट करने की सुविधा उपलब्ध है. पहले यह सुविधा AnimatedNavHost से मिलती थी. अब यह सुविधा सीधे तौर पर NavHost में उपलब्ध है. ज़्यादा जानकारी के लिए, रिलीज़ नोट पढ़ें.

ज़्यादा जानें

Navigation Compose पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए लेख पढ़ें:

• Navigation Compose कोडलैब: कोडलैब की मदद से, Navigation Compose की बुनियादी बातें जानें.
• Now in Android रिपॉज़िटरी: पूरी तरह से काम करने वाला Android ऐप्लिकेशन. इसे पूरी तरह से Kotlin और Jetpack Compose का इस्तेमाल करके बनाया गया है. यह Android डिज़ाइन और डेवलपमेंट के सबसे सही तरीकों का पालन करता है. इसमें Navigation Compose भी शामिल है.
• Sunflower को Jetpack Compose पर माइग्रेट करना: यह एक ब्‍लॉग पोस्‍ट है. इसमें Sunflower सैंपल के तौर पर मिले ऐप्लिकेशन को Views से Compose पर माइग्रेट करने की प्रोसेस के बारे में बताया गया है. इसमें Navigation Compose पर माइग्रेट करने की प्रोसेस भी शामिल है.
• हर स्क्रीन के लिए Jetnews: यह एक ब्लॉग पोस्ट है. इसमें Jetnews के सैंपल को रिफ़ैक्टर करने और माइग्रेट करने के बारे में बताया गया है. इससे Jetpack Compose और Navigation Compose की मदद से, सभी स्क्रीन पर Jetnews का इस्तेमाल किया जा सकेगा.

आपके लिए सुझाव

• ध्यान दें: JavaScript बंद होने पर लिंक का टेक्स्ट दिखता है
• Compose की मदद से नेविगेट करना
• Compose और अन्य लाइब्रेरी
• ध्यान देने लायक अन्य बातें