किसी डेस्टिनेशन तक नेविगेट करें

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

इस गाइड में बताया गया है कि अलग-अलग कॉन्टेक्स्ट में, किसी डेस्टिनेशन पर जाने के लिए नेविगेशन कॉम्पोनेंट का इस्तेमाल कैसे किया जा सकता है.

NavController का इस्तेमाल करना

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

चाहे किसी भी यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क का इस्तेमाल किया जा रहा हो, डेस्टिनेशन पर नेविगेट करने के लिए सिर्फ़ एक फ़ंक्शन का इस्तेमाल किया जा सकता है: NavController.navigate().

navigate() के लिए कई ओवरलोड उपलब्ध हैं. आपको अपने कॉन्टेक्स्ट के हिसाब से सही ओवरलोड चुनना चाहिए. उदाहरण के लिए, कंपोज़ेबल पर नेविगेट करते समय एक ओवरलोड का इस्तेमाल करना चाहिए और व्यू पर नेविगेट करते समय दूसरे ओवरलोड का इस्तेमाल करना चाहिए.

यहां दिए गए सेक्शन में, navigate() के कुछ मुख्य ओवरलोड के बारे में बताया गया है. इनका इस्तेमाल किया जा सकता है.

किसी कंपोज़ेबल पर जाना

किसी कंपोज़ेबल पर जाने के लिए, आपको NavController.navigate<T> का इस्तेमाल करना चाहिए. इस ओवरलोड के साथ, navigate() फ़ंक्शन में सिर्फ़ एक route आर्ग्युमेंट होता है. इसके लिए, आपको एक टाइप पास करना होता है. यह किसी जगह पर जाने के लिए ज़रूरी जानकारी होती है.

@Serializable
object FriendsList

navController.navigate(route = FriendsList)

नेविगेशन ग्राफ़ में किसी कंपोज़ेबल पर जाने के लिए, सबसे पहले अपना NavGraph इस तरह से तय करें कि हर डेस्टिनेशन किसी टाइप से मेल खाए. कंपोज़ेबल के लिए, composable() फ़ंक्शन का इस्तेमाल किया जाता है.

अपने कंपोज़ेबल से इवेंट दिखाना

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

सीधे तौर पर कहें, तो आपके कंपोज़ेबल में () -> Unit टाइप का पैरामीटर होना चाहिए. composable() फ़ंक्शन का इस्तेमाल करके, अपने NavHost में डेस्टिनेशन जोड़ते समय, अपने कंपोज़ेबल को NavController.navigate() पर कॉल पास करें.

इसका उदाहरण देखने के लिए, यहां दिया गया सब-सेक्शन देखें.

उदाहरण

पिछले सेक्शन में दी गई जानकारी को समझने के लिए, इस स्निपेट में दी गई बातों पर ध्यान दें:

  1. ग्राफ़ में मौजूद हर डेस्टिनेशन को एक रूट का इस्तेमाल करके बनाया जाता है. यह एक सीरियलाइज़ किया जा सकने वाला ऑब्जेक्ट या क्लास होता है. इसमें उस डेस्टिनेशन के लिए ज़रूरी डेटा के बारे में बताया जाता है.
  2. MyAppNavHost कंपोज़ेबल में NavController इंस्टेंस होता है.
  3. इसलिए, navigate() को कॉल करने का काम वहीं होना चाहिए, न कि ProfileScreen जैसे किसी छोटे कंपोज़ेबल में.
  4. ProfileScreen में एक बटन होता है. इस पर क्लिक करने से, उपयोगकर्ता को FriendsList पर रीडायरेक्ट किया जाता है. हालांकि, यह navigate() को अपने-आप कॉल नहीं करता.
  5. इसके बजाय, बटन एक ऐसे फ़ंक्शन को कॉल करता है जिसे पैरामीटर onNavigateToFriends के तौर पर दिखाया जाता है.
  6. जब MyAppNavHost नेविगेशन ग्राफ़ में ProfileScreen जोड़ता है, तो onNavigateToFriends के लिए, यह एक लैम्डा पास करता है, जो navigate(route = FriendsList को कॉल करता है.
  7. इससे यह पक्का होता है कि जब उपयोगकर्ता ProfileScreen बटन दबाता है, तो वह सही तरीके से FriendsListScreen पर नेविगेट करे.
@Serializable
object Profile
@Serializable
object FriendsList

@Composable
fun MyAppNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
) {
    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = Profile
    ) {
        composable<Profile> {
            ProfileScreen(
                onNavigateToFriends = { navController.navigate(route = FriendsList) },
                /*...*/
            )
        }
        composable<FriendsList> { FriendsListScreen(/*...*/) }
    }
}

@Composable
fun ProfileScreen(
    onNavigateToFriends: () -> Unit,
    /*...*/
) {
    /*...*/
    Button(onClick = onNavigateToFriends) {
        Text(text = "See friends list")
    }
}

पूर्णांक आईडी का इस्तेमाल करके नेविगेट करना

पूर्णांक आईडी का इस्तेमाल करके किसी डेस्टिनेशन पर जाने के लिए, navigate(int) ओवरलोड को कॉल करें. यह किसी कार्रवाई या डेस्टिनेशन का संसाधन आईडी लेता है. नीचे दिए गए कोड स्निपेट में बताया गया है कि इस ओवरलोड का इस्तेमाल करके, ViewTransactionsFragment पर कैसे जाया जा सकता है:

Kotlin

viewTransactionsButton.setOnClickListener { view ->
  view.findNavController().navigate(R.id.viewTransactionsAction)
}

Java

viewTransactionsButton.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
      Navigation.findNavController(view).navigate(R.id.viewTransactionsAction);
  }
});

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

फ़्रैगमेंट पर आधारित ऐप्लिकेशन में Compose से नेविगेट करना

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

Compose कोड से डेस्टिनेशन बदलने के लिए, अपने कंपोज़ेबल से कोई इवेंट (लैम्ब्डा) दिखाएं:

@Composable
fun MyScreen(onNavigateToProfile: () -> Unit) {
    Button(onClick = { onNavigateToProfile() }) {
        Text("Go to Profile")
    }
}

अपने फ़्रैगमेंट में, Compose और फ़्रैगमेंट पर आधारित नेविगेशन कॉम्पोनेंट को ब्रिज करें. इसके लिए, इवेंट ट्रिगर होने पर फ़्रैगमेंट के NavController को कॉल करें:

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    return ComposeView(requireContext()).apply {
        setContent {
            MyScreen(onNavigateToProfile = { findNavController().navigate(R.id.nav_profile) })
        }
    }
}

इस तरीके से, आपके कंपोज़ेबल को फिर से इस्तेमाल किया जा सकता है और उनकी जांच की जा सकती है. ऐसा इसलिए, क्योंकि वे सीधे तौर पर फ़्रैगमेंट के NavController पर निर्भर नहीं होते.

NavDeepLinkRequest का इस्तेमाल करके नेविगेट करना

इंप्लिसिट डीप लिंक डेस्टिनेशन पर जाने के लिए, navigate(NavDeepLinkRequest) ओवरलोड का इस्तेमाल करें. नीचे दिए गए स्निपेट में, इस तरीके को लागू करने का तरीका बताया गया है:

Kotlin

val request = NavDeepLinkRequest.Builder
  .fromUri("android-app://androidx.navigation.app/profile".toUri())
  .build()
findNavController().navigate(request)

Java

NavDeepLinkRequest request = NavDeepLinkRequest.Builder
  .fromUri(Uri.parse("android-app://androidx.navigation.app/profile"))
  .build()
NavHostFragment.findNavController(this).navigate(request)

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

कार्रवाइयां और MIME टाइप

Uri के अलावा, NavDeepLinkRequest में भी कार्रवाइयों और MIME टाइप वाले डीप लिंक इस्तेमाल किए जा सकते हैं. अनुरोध में कोई कार्रवाई जोड़ने के लिए, fromAction() या setAction() का इस्तेमाल करें. किसी अनुरोध में MIME टाइप जोड़ने के लिए, fromMimeType() या setMimeType() का इस्तेमाल करें.

किसी NavDeepLinkRequest को इंप्लिसिट डीप लिंक डेस्टिनेशन से सही तरीके से मैच करने के लिए, यूआरआई, कार्रवाई, और MIME टाइप, डेस्टिनेशन में मौजूद NavDeepLink से मैच होने चाहिए. यूआरआई, पैटर्न से मेल खाने चाहिए. कार्रवाइयां, पूरी तरह से मेल खानी चाहिए. साथ ही, MIME टाइप एक-दूसरे से मिलते-जुलते होने चाहिए. उदाहरण के लिए, image/jpg का मिलान image/\* से होता है

अन्य संदर्भ

इस दस्तावेज़ में, NavController.navigate() को इस्तेमाल करने के सबसे सामान्य उदाहरणों के बारे में बताया गया है. हालांकि, इस फ़ंक्शन में कई ओवरलोड होते हैं. इनका इस्तेमाल अलग-अलग कॉन्टेक्स्ट में किया जा सकता है. साथ ही, इनका इस्तेमाल किसी भी यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क के साथ किया जा सकता है. इन ओवरलोड के बारे में ज़्यादा जानकारी के लिए, रेफ़रंस दस्तावेज़ देखें.

इस बारे में और पढ़ें

ज़्यादा जानकारी के लिए, इन पेजों पर जाएं: