NavHost — यह क्या है, Jetpack Compose में नेविगेशन ग्राफ और रूट बनाना

Jetpack Compose में NavHost क्या है?

NavHost एक composable फ़ंक्शन है जो वर्तमान नेविगेशन स्क्रीन प्रदर्शित करने के लिए एक कंटेनर प्रदान करता है। NavHost एक NavController, startDestination और Kotlin DSL के माध्यम से बनाया गया रूट ग्राफ लेता है। जब वर्तमान रूट बदलता है, NavHost निर्दिष्ट एनिमेशन के साथ प्रदर्शित composable को स्विच करता है।

NavHost एक स्क्रीन स्विचर के रूप में काम करता है: यह NavController से वर्तमान NavBackStackEntry को ट्रैक करता है और संबंधित composable ब्लॉक को रेंडर करता है। प्रत्येक स्क्रीन एक स्वतंत्र composable फ़ंक्शन है जो रूट आर्गुमेंट के साथ NavBackStackEntry प्राप्त करता है। सभी स्क्रीन एक एकल रचना ट्री में मौजूद होती हैं, लेकिन NavHost एक बार में केवल एक दिखाता है, बाकी को एनिमेशन के माध्यम से छिपाता है।

FragmentManager के विपरीत, NavHost प्रत्येक स्क्रीन के लिए Fragment नहीं बनाता है। संपूर्ण जीवनचक्र CompositionLifecycle के माध्यम से प्रबंधित किया जाता है — composable फ़ंक्शन में onStart/onResume नहीं होता है, इसलिए साइड इफेक्ट के लिए LaunchedEffect और DisposableEffect का उपयोग किया जाता है। NavHost स्वचालित रूप से NavController की सदस्यता लेता है और रूट बदलने पर UI को पुनर्संयोजित करता है।

Google के अनुसार, NavHost Navigation 2.4.0 से एक स्थिर API है। 2.8.0 से शुरू करके, NavHost Kotlin Serialization के माध्यमից Type-Safe नेविगेशन का समर्थन करता है, स्ट्रिंग रूट को डेटा क्लास से बदलता है। NavHost नेस्टेड ग्राफ का भी समर्थन करता है, जो मॉड्यूल-आधारित नेविगेशन संगठन को सक्षम करता है।

NavHost बनाना और startDestination कॉन्फ़िगर करना

NavHost दो अनिवार्य पैरामीटर के साथ बनाया जाता है: navController (NavHostController का एक इंस्टेंस) और startDestination (पहली स्क्रीन का रूट स्ट्रिंग)। तीसरा पैरामीटर एक बिल्डर ब्लॉक है जहाँ composable(), navigation() और dialog() के माध्यम से सभी रूट पंजीकृत किए जाते हैं।

@Composable
fun AppNavHost(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen(navController) }
        composable("settings") { SettingsScreen(navController) }
    }
}

startDestination वह रूट है जो NavHost पहली बार लॉन्च होने पर खुलता है। यदि बैक स्टैक खाली है, NavHost स्वचालित रूप से स्टैक में startDestination जोड़ता है। पुनर्विन्यास (स्क्रीन रोटेशन) पर, NavHost savedState से अंतिम रूट को पुनर्स्थापित करता है, startDestination को नहीं।

BottomNavigation के लिए, startDestination निचले पैनल के रूट में से एक है। शेष पैनल रूट को अलग composable प्रविष्टियों के रूप में जोड़ा जाता है। NavHost को Scaffold.content के अंदर रखा जाना चाहिए — जहाँ मुख्य एप्लिकेशन सामग्री प्रदर्शित होती है। NavHost TopAppBar और BottomNavigation को छोड़कर सभी उपलब्ध ऊँचाई लेता है।

composable के माध्यम से रूट पंजीकृत करना

composable(route, arguments, deepLinks, enterTransition, exitTransition, content) फ़ंक्शन NavHost ग्राफ में एक रूट पंजीकृत करता है। रूट पैरामीटर एक स्ट्रिंग है जो {paramName} के रूप में वैकल्पिक प्लेसहोल्डर के साथ पथ का वर्णन करता है। नेविगेशन के दौरान प्लेसहोल्डर को एक वास्तविक मान से बदल दिया जाता है।

composable का content ब्लॉक एक NavBackStackEntry प्राप्त करता है जिससे आर्गुमेंट निकाले जाते हैं। स्क्रीन composable फ़ंक्शन केवल तभी रेंडर किया जाता है जब वर्तमान NavController रूट रूट से मेल खाता है। बेमेल होने पर, composable रचना से हटा दिया जाता है, लेकिन इसकी स्थिति rememberSaveable या SavedStateHandle के साथ ViewModel के माध्यम से संरक्षित की जा सकती है।

composable(
    route = "article/{articleId}",
    arguments = listOf(navArgument("articleId") {
        type = NavType.IntType
        defaultValue = 0
    }),
    deepLinks = listOf(navDeepLink { uriPattern = "https://app.example/article/{articleId}" })
) { backStackEntry ->
    val articleId = backStackEntry.arguments?.getInt("articleId") ?: 0
    ArticleScreen(articleId = articleId)
}

NavHost के अंदर composable प्रविष्टियों की संख्या कुछ से लेकर सैकड़ों तक हो सकती है। बड़े अनुप्रयोगों के लिए, रूट मॉड्यूल में विभाजित होते हैं और नेस्टेड ग्राफ के माध्यम से जुड़े होते हैं। प्रत्येक composable की अपनी एनिमेशन सेटिंग्स, डीप लिंक और आर्गुमेंट हो सकते हैं।

आर्गुमेंट और टाइप किए गए रूट पैरामीटर

रूट आर्गुमेंट composable() में arguments: List<NamedNavArgument> पैरामीटर के माध्यम से परिभाषित किए जाते हैं। प्रत्येक आर्गुमेंट navArgument(name) { type; defaultValue } के माध्यम से परिभाषित किया जाता है। NavType आर्गुमेंट प्रकार निर्धारित करता है: StringType, IntType, LongType, FloatType, BoolType, ParcelableType और ReferenceType।

आर्गुमेंट NavBackStackEntry से arguments?.getInt("id") के माध्यम से निकाले जाते हैं। अनिवार्य आर्गुमेंट के लिए, defaultValue छोड़ा जा सकता है — NavType null का उपयोग करेगा। वैकल्पिक आर्गुमेंट के लिए, defaultValue सेट होना चाहिए, अन्यथा नेविगेशन पैरामीटर अनुपस्थित होने पर एक अपवाद फेंकेगा।

Navigation 2.8.0 से, Type-Safe नेविगेशन की सिफारिश की जाती है: Kotlin Serialization के साथ रूट के लिए एक sealed class या data class परिभाषित करें। स्ट्रिंग रूट के बजाय, composable<RouteType> { backStackEntry -> } का उपयोग करें। यह रूट में टाइपो को समाप्त करता है और आर्गुमेंट के लिए स्वचालित रूप से NavType जनरेट करता है। माइग्रेट करने के लिए, navigation-compose-typesafe निर्भरता और Kotlin Serialization प्लगइन जोड़ें।

नेस्टेड नेविगेशन ग्राफ

nested graphs — navigation(route, startDestination) फ़ंक्शन का उपयोग करके NavHost के अंदर रूट को समूहित करने की एक तंत्र। नेस्टेड ग्राफ का अपना रूट उपसर्ग और startDestination होता है, और इसके सभी रूट उपसर्ग के माध्यम से सुलभ होते हैं। नेस्टेड ग्राफ मॉड्यूलर आर्किटेक्चर के लिए उपयोग किए जाते हैं, जहाँ प्रत्येक फीचर मॉड्यूल अपना स्वयं का उप-ग्राफ पंजीकृत करता है।

नेस्टेड ग्राफ के लाभ: मॉड्यूल के भीतर रूट अलगाव, स्क्रीन के समूह के लिए एकीकृत बैक स्टैक, और आंतरिक संरचना को उजागर किए बिना उपसर्ग द्वारा नेविगेट करने की क्षमता। उदाहरण के लिए, "auth" ग्राफ में "auth/login" और "auth/register" शामिल हैं। नेविगेशन पूर्ण रूट द्वारा या 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) }
    }
}

नेस्टेड ग्राफ ग्राफ स्तर पर आर्गुमेंट पासिंग का समर्थन करते हैं: ग्राफ के रूट में घोषित पैरामीटर सभी आंतरिक रूट में पास किए जाते हैं। नेस्टेड ग्राफ को साफ़ करने के लिए, popBackStack(route) का उपयोग करें — यह सभी आंतरिक प्रविष्टियों को हटा देगा। नेस्टेड ग्राफ की कोई गहराई सीमा नहीं है, लेकिन पठनीयता के लिए 3 स्तरों से अधिक की अनुशंसा नहीं की जाती है।

एनिमेशन और ट्रांज़िशन अनुकूलन

NavHost enterTransition, exitTransition, popEnterTransition और popExitTransition पैरामीटर के माध्यम से composable रूट के बीच ट्रांज़िशन एनिमेशन का समर्थन करता है। एनिमेशन एक बार NavHost के लिए सेट किए जाते हैं और सभी रूट पर लागू होते हैं, या प्रत्येक composable के लिए व्यक्तिगत रूप से। डिफ़ॉल्ट रूप से, एनिमेशन अक्षम होते हैं।

सामान्य कॉन्फ़िगरेशन: enterTransition = slideInHorizontally(initialOffsetX = { it }) — स्क्रीन दाईं ओर से अंदर आती है; exitTransition = slideOutHorizontally(targetOffsetX = { -it }) — स्क्रीन बाईं ओर बाहर जाती है। पॉप एनिमेशन के लिए, दिशाएँ उलट जाती हैं: स्क्रीन बाईं ओर से अंदर आती है और दाईं ओर बाहर जाती है। BottomNavigation के लिए, बिना स्लाइड के fadeIn/fadeOut का उपयोग किया जाता है।

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

कस्टम एनिमेशन Compose Animation API का उपयोग करके बनाए जाते हैं: AnimatedContentTransitionScope कंटेनर आयाम, एनिमेशन प्रगति और दिशा तक पहुँच प्रदान करता है। साझा तत्व ट्रांज़िशन (एक तत्व सुचारू रूप से दूसरी स्क्रीन पर जाता है) के लिए, Accompanist Navigation Animation लाइब्रेरी या sharedElement Modifier के माध्यम से कस्टम कार्यान्वयन की आवश्यकता होती है। Android Developers (2025) के अनुसार, डिफ़ॉल्ट स्लाइड एनिमेशन (दाईं ओर से प्रवेश, बाईं ओर निकास) नेविगेशन वाले 80% Android एप्लिकेशन में उपयोग किया जाता है।