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، ٹائپ سیف نیویگیشن (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 کے ساتھ ٹائپ سیف نیویگیشن متعارف کرائی گئی: روٹس ڈیٹا کلاسز کے طور پر اور آرگیومینٹس فیلڈز کے طور پر متعین کیے جاتے ہیں۔ یہ سٹرنگ روٹس کو ٹائپ شدہ آبجیکٹس سے بدل دیتا ہے اور روٹ ناموں میں غلطیوں کو ختم کرتا ہے۔ منتقلی کے لیے 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% معیاری نیویگیشن کے لیے افقی سلائیڈ اینیمیشن استعمال کرتا ہے۔