Navigation Compose: यह क्या है, आर्किटेक्चर और डेवलपमेंट में कार्य

Navigation Compose क्या है?

Navigation Compose Jetpack सूट की एक लाइब्रेरी है जो Compose एप्लिकेशनों के लिए नेविगेशन फ्रेमवर्क प्रदान करती है। लाइब्रेरी View सिस्टम के लिए नेविगेशन कंपोनेंट के समान सिद्धांतों पर आधारित है, लेकिन Compose की डिक्लेरेटिव प्रकृति के अनुकूल बनाई गई है: FragmentTransaction के बजाय composable फ़ंक्शन का उपयोग किया जाता है, और नेविगेशन ग्राफ Kotlin DSL के माध्यम से बनाया जाता है।

Navigation Compose और क्लासिक नेविगेशन के बीच मुख्य अंतर FragmentManager की अनुपस्थिति है। प्रत्येक स्क्रीन एक composable फ़ंक्शन है जो रूट मिलान होने पर NavHost में रेंडर होता है। बैक स्टैक Fragment नहीं, बल्कि रूट, आर्गुमेंट्स और स्थिति के साथ एक रिकॉर्ड संग्रहीत करता है। यह आर्किटेक्चर को सरल बनाता है और Fragment-आधारित नेविगेशन के लिए विशिष्ट लाइफसाइकिल संघर्षों को समाप्त करता है।

Google (2025) के अनुसार, Navigation Compose प्रयोगात्मक से स्थिर हो गया है और संस्करण 2.8.0 से Jetpack का हिस्सा है। लाइब्रेरी Material3, Type-Safe Navigation (Kotlin Serialization के माध्यम से), नेस्टेड ग्राफ और मॉड्यूलराइज़ेशन का समर्थन करती है। एकमात्र सीमा यह है कि लाइब्रेरी मैन्युअल कॉन्फ़िगरेशन के बिना BottomNavigation के लिए मल्टी-बैक स्टैक का समर्थन नहीं करती, हालाँकि Google इस पर काम कर रहा है।

Navigation Compose का आर्किटेक्चर तीन संस्थाओं के इर्द-गिर्द घूमता है: NavController (स्टैक प्रबंधन), NavHost (ग्राफ कंटेनर) और NavDestination (composable के साथ व्यक्तिगत रूट)। उनके बीच बातचीत डिक्लेरेटिव है: डेवलपर रूट और आर्गुमेंट्स का वर्णन करता है, और लाइब्रेरी लोडिंग, प्रिज़र्व और रिस्टोर स्थितियों को संभालती है।

NavController: निर्माण और नेविगेशन विधियाँ

NavController Navigation Compose का केंद्रीय तत्व है, जो नेविगेशन स्टैक का प्रबंधन करता है। यह rememberNavController() के माध्यम से बनाया जाता है और NavHost को पास किया जाता है। NavController बैक स्टैक, वर्तमान प्रवेश बिंदु संग्रहीत करता है और विलंबित क्रियाओं (ग्राफ़ आरंभीकरण के बाद डीपलिंक) का समर्थन करता है।

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("profile/{userId}") { backStackEntry ->
            ProfileScreen(
                userId = backStackEntry.arguments?.getString("userId") ?: ""
            )
        }
    }
}

NavController की मुख्य विधियाँ: navigate(route) — रूट पर नेविगेट करें, popBackStack() — पिछली स्क्रीन पर वापस जाएँ, navigateAndClear(route) — स्टैक साफ़ करके नेविगेट करें। NavOptions व्यवहार निर्दिष्ट करते हैं: launchSingleTop डुप्लिकेट रोकता है, popUpTo निर्दिष्ट रूट तक स्टैक साफ़ करता है, restoreState पिछली स्थिति पुनर्स्थापित करता है।

गहराई से नेस्टेड composable फ़ंक्शन से NavController तक पहुँचने के लिए, CompositionLocal के माध्यम से NavHostController का उपयोग करें। LocalNavController NavHost के अंदर ScopedNavController में प्रदान किया जाता है। NavHost के बाहर (उदाहरण के लिए, BottomNavigation में), नियंत्रक पैरामीटर या ViewModel के माध्यम से पास किया जाता है।

NavHost: रूट ग्राफ का निर्माण

NavHost एक composable कंटेनर है जो NavController को रूट ग्राफ से जोड़ता है। प्रत्येक रूट composable(route, arguments, deepLinks) के माध्यम से घोषित किया जाता है, जहाँ route वैकल्पिक {param} प्लेसहोल्डर के साथ एक रूट स्ट्रिंग है। जब वर्तमान रूट मेल खाता है, तो NavHost संबंधित composable ब्लॉक रेंडर करता है।

रूट ग्राफ पदानुक्रमिक रूप से बनाया गया है: एक मॉड्यूल के भीतर रूट को समूहित करने के लिए navigation() के माध्यम से ग्राफ को नेस्ट किया जा सकता है। नेस्टेड ग्राफ का अपना startDestination होता है और एक सामान्य रूट उपसर्ग के तहत संयुक्त होते हैं। यह एक मॉड्यूलर आर्किटेक्चर को व्यवस्थित करने की अनुमति देता है जहाँ प्रत्येक फीचर मॉड्यूल अपना स्वयं का उपग्राफ पंजीकृत करता है।

NavHost(
    navController = navController,
    startDestination = "main"
) {
    composable("main") { MainScreen(navController) }
    navigation(
        route = "auth",
        startDestination = "auth/login"
    ) {
        composable("auth/login") { LoginScreen(navController) }
        composable("auth/register") { RegisterScreen(navController) }
    }
}

NavHost स्वचालित रूप से LocalBackDispatcher के माध्यम से सिस्टम बैक बटन (बैक प्रेस) को संभालता है। Material3 Scaffold में, यह डिफ़ॉल्ट रूप से सही BottomNavigation संचालन के लिए NavController लेता है। NavHost रूट बदलने पर composable को पुनः बनाता है, लेकिन इनपुट फ़ील्ड और स्क्रॉल के लिए rememberSaveable के माध्यम से स्थिति को संरक्षित करता है।

स्क्रीन के बीच आर्गुमेंट्स पास करना

Navigation Compose रूट पैरामीटर और NavType के माध्यम से स्क्रीन के बीच टाइप किए गए आर्गुमेंट्स पास करने का समर्थन करता है। पैरामीटर रूट में {paramName} के रूप में निर्दिष्ट किए जाते हैं और composable() में arguments के माध्यम से प्रकार इंगित किया जाता है। NavType String, Int, Long, Float, Boolean, Parcelable और Serializable का समर्थन करता है।

आर्गुमेंट्स NavBackStackEntry से arguments?.getType(key) के माध्यम से निकाले जाते हैं। अनिवार्य पैरामीटर के लिए defaultValue का उपयोग करें, वैकल्पिक के लिए — nullable। Parcelable समर्थन केवल Kotlin Parcelize या kotlinx.parcelize लाइब्रेरी के साथ काम करता है। जटिल ऑब्जेक्ट के लिए, पूरे ऑब्जेक्ट को सीरियलाइज़ करने के बजाय ID पास करने और ViewModel के माध्यम से डेटा लोड करने की अनुशंसा की जाती है।

Navigation 2.8.0 से, Kotlin Serialization के साथ Type-Safe Navigation शुरू की गई: रूट को डेटा क्लास के रूप में और आर्गुमेंट्स को फ़ील्ड के रूप में परिभाषित किया जाता है। यह स्ट्रिंग रूट को टाइप किए गए ऑब्जेक्ट से बदल देता है और रूट नामों में त्रुटियों को समाप्त करता है। माइग्रेशन के लिए Kotlin Serialization प्लगइन और navigation-compose-typesafe निर्भरता की आवश्यकता है।

@Serializable
/* sealed class Route */
sealed class ProfileRoute(val route: String) {
    data object Home : ProfileRoute("home")
    data class Profile(val userId: String) : ProfileRoute("profile/{userId}")
}

Navigation Compose में डीप लिंक्स

डीप लिंक्स एक नेविगेशन तंत्र है जो URL या intent-filter के माध्यम से एक विशिष्ट एप्लिकेशन स्क्रीन खोलने की अनुमति देता है। Navigation Compose में, डीप लिंक्स composable() में deepLinks पैरामीटर के माध्यम से कॉन्फ़िगर किए जाते हैं और URI पैटर्न से मेल खाने पर स्वचालित रूप से संसाधित होते हैं।

डीप लिंक UriPattern सूची के रूप में निर्दिष्ट किया जाता है: "https://example.com/profile/{userId}". URI पैरामीटर स्वचालित रूप से रूट आर्गुमेंट्स में मैप हो जाते हैं। NavController एप्लिकेशन स्टार्टअप पर (intent के माध्यम से) और संचालन के दौरान (अंतर्निहित डीप लिंक के माध्यम से) डीप लिंक्स को संसाधित करता है। लंबित डीप लिंक्स को संभालने के लिए, ग्राफ़ आरंभीकरण के बाद NavController में handleDeepLink() का उपयोग करें।

Google के अनुसार, डीप लिंक्स की अनुशंसा की जाती है: पुश (Firebase Dynamic Links), ईमेल सत्यापन, सामग्री साझाकरण और वेब लिंक से क्रॉस-नेविगेशन के लिए। Android 12+ के लिए, डीप लिंक प्राधिकरण सत्यापित करने के लिए Digital Asset Links का उपयोग किया जाता है। AndroidManifest.xml में बिना डायलॉग के लिंक खोलने के लिए autoVerify="true" के साथ intent-filter होना चाहिए।

composable(
    route = "profile/{userId}",
    arguments = listOf(navArgument("userId") { type = NavType.StringType }),
    deepLinks = listOf(
        navDeepLink { uriPattern = "https://example.com/profile/{userId}" }
    )
) { backStackEntry ->
    ProfileScreen(userId = backStackEntry.arguments?.getString("userId") ?: "")
}

Navigation Compose में डीप लिंक्स की सीमाएँ: लाइब्रेरी विलंबित डीप लिंक्स का समर्थन नहीं करती — डीप लिंक केवल NavHost द्वारा ग्राफ़ पूरी तरह से बनाए जाने के बाद संसाधित होता है। यदि ग्राफ़ आरंभीकरण से पहले डीप लिंक आता है, तो इसे intent?.data के माध्यम से विलंबित किया जाना चाहिए और LaunchedEffect में संसाधित किया जाना चाहिए। Firebase Dynamic Links के लिए, Navigation Compose के साथ Firebase Dynamic Links SDK का उपयोग करें।

स्क्रीन के बीच ट्रांज़िशन एनिमेशन

Navigation Compose composable() में enterTransition, exitTransition, popEnterTransition और popExitTransition पैरामीटर के माध्यम से ट्रांज़िशन एनिमेशन का समर्थन करता है। एनिमेशन Compose Animation API का उपयोग करके कार्यान्वित किए जाते हैं: fadeIn, slideInHorizontally, expandIn और अन्य। डिफ़ॉल्ट रूप से, एनिमेशन अक्षम है — स्क्रीन तुरंत बदल दी जाती हैं।

सामान्य एनिमेशन परिदृश्य: आगे नेविगेशन के लिए slideInHorizontally (स्क्रीन दाईं ओर से आती है), वापसी के लिए slideOutHorizontally (स्क्रीन दाईं ओर जाती है)। BottomNavigation के लिए, बिना स्लाइड के फ़ेड एनिमेशन अधिक सामान्यतः उपयोग किया जाता है। एनिमेशन NavHost के माध्यम से सेट किए जाते हैं और सभी composable पर लागू होते हैं जब तक कि व्यक्तिगत एनिमेशन निर्दिष्ट न हों।

NavHost(
    navController = navController,
    startDestination = "home",
    enterTransition = { slideInHorizontally() + fadeIn() },
    exitTransition = { slideOutHorizontally() + fadeOut() },
    popEnterTransition = { fadeIn() },
    popExitTransition = { slideOutHorizontally() + fadeOut() }
) { /* composable */ }

एनिमेशन पैरामीटर सीधे composable() में पास करके प्रत्येक composable के लिए व्यक्तिगत रूप से एनिमेशन को ओवरराइड किया जा सकता है। महत्वपूर्ण बात यह है कि एनिमेशन को सिस्टम बैक प्रेस एनिमेशन के साथ संघर्ष नहीं करना चाहिए। शेयर्ड एलिमेंट ट्रांज़िशन के लिए, accompanist-navigation-animation लाइब्रेरी या Modifier.graphicsLayer के माध्यम से कस्टम कार्यान्वयन की आवश्यकता होती है। Android Developers (2025) के अनुसार, 80% प्रोडक्शन एप्लिकेशन मानक नेविगेशन के लिए स्लाइड क्षैतिज एनिमेशन का उपयोग करते हैं।