इस पेज का अनुवाद Cloud Translation API से किया गया है.

नेस्ट किए गए ग्राफ़

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

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

उदाहरण

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

**पहली इमेज.** टॉप-लेवल नेविगेशन ग्राफ़.

उदाहरण के लिए, मान लें कि आपको उपयोगकर्ता को title_screen और register स्क्रीन सिर्फ़ तब दिखानी हैं, जब ऐप्लिकेशन पहली बार लॉन्च किया जाए. इसके लिए, पहले चित्र में दिए गए टॉप-लेवल नेविगेशन ग्राफ़ का इस्तेमाल करें. इसके बाद, उपयोगकर्ता की जानकारी सेव हो जाती है. ऐप्लिकेशन को फिर से खोलने पर, उपयोगकर्ता को सीधे मैच स्क्रीन पर ले जाया जाना चाहिए.

सबसे सही तरीका यह है कि मैच स्क्रीन को सबसे ऊपर के लेवल के नेविगेशन ग्राफ़ के शुरुआती डेस्टिनेशन के तौर पर सेट करें. साथ ही, टाइटल और रजिस्टर स्क्रीन को नेस्ट किए गए ग्राफ़ में ले जाएं, जैसा कि पहले चित्र में दिखाया गया है:

**दूसरी इमेज.** टॉप-लेवल नेविगेशन ग्राफ़ में अब नेस्ट किया गया ग्राफ़ शामिल है.

मैच स्क्रीन लॉन्च होने पर, देखें कि कोई रजिस्टर किया गया उपयोगकर्ता है या नहीं. अगर उपयोगकर्ता ने रजिस्टर नहीं किया है, तो उसे रजिस्ट्रेशन स्क्रीन पर ले जाएं.

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

Compose

Compose का इस्तेमाल करके नेस्ट किया गया नेविगेशन ग्राफ़ बनाने के लिए, NavGraphBuilder.navigation() फ़ंक्शन का इस्तेमाल करें. ग्राफ़ में डेस्टिनेशन जोड़ते समय, navigation() का इस्तेमाल ठीक वैसे ही किया जाता है जैसे NavGraphBuilder.composable() और NavGraphBuilder.dialog() फ़ंक्शन का किया जाता है.

इन दोनों के बीच मुख्य अंतर यह है कि navigation, नए डेस्टिनेशन के बजाय नेस्ट किया गया ग्राफ़ बनाता है. इसके बाद, नेस्ट किए गए ग्राफ़ में डेस्टिनेशन जोड़ने के लिए, navigation() के लैम्ब्डा फ़ंक्शन में composable() और dialog() को कॉल किया जाता है.

देखें कि नीचे दिया गया स्निपेट, Compose का इस्तेमाल करके, दूसरी इमेज में दिए गए ग्राफ़ को कैसे लागू करता है:

// Routes
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(navController, startDestination = Title) {
   composable<Title> {
       TitleScreen(
           onPlayClicked = { navController.navigate(route = Register) },
           onLeaderboardsClicked = { /* Navigate to leaderboards */ }
       )
   }
   composable<Register> {
       RegisterScreen(
           onSignUpComplete = { navController.navigate(route = Game) }
       )
   }
   navigation<Game>(startDestination = Match) {
       composable<Match> {
           MatchScreen(
               onStartGame = { navController.navigate(route = InGame) }
           )
       }
       composable<InGame> {
           InGameScreen(
               onGameWin = { navController.navigate(route = ResultsWinner) },
               onGameLose = { navController.navigate(route = GameOver) }
           )
       }
       composable<ResultsWinner> {
           ResultsWinnerScreen(
               onNextMatchClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               },
               onLeaderboardsClicked = { /* Navigate to leaderboards */ }
           )
       }
       composable<GameOver> {
           GameOverScreen(
               onTryAgainClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               }
           )
       }
   }
}

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

navController.navigate(route = Match)

लेख पढ़ें

XML

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

नेविगेशन एडिटर में, Shift बटन को दबाकर रखें और उन डेस्टिनेशन पर क्लिक करें जिन्हें नेस्ट किए गए ग्राफ़ में शामिल करना है.
संदर्भ मेन्यू खोलने के लिए, राइट क्लिक करें. इसके बाद, नेस्ट किए गए ग्राफ़ में ले जाएं > नया ग्राफ़ चुनें. डेस्टिनेशन, नेस्ट किए गए ग्राफ़ में शामिल होते हैं. दूसरी इमेज में, नेविगेशन एडिटर में नेस्ट किया गया ग्राफ़ दिखाया गया है:

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

एक्सएमएल व्यू पर टॉगल करने के लिए, टेक्स्ट टैब पर क्लिक करें. नेविगेशन ग्राफ़ को नेस्ट किया गया है और उसे ग्राफ़ में जोड़ा गया है. इस नेविगेशन ग्राफ़ में, अपने आईडी के साथ-साथ navigation एलिमेंट और startDestination एट्रिब्यूट भी होता है. यह एट्रिब्यूट, नेस्ट किए गए ग्राफ़ के पहले डेस्टिनेशन पर ले जाता है:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

अपने कोड में, रूट ग्राफ़ को नेस्ट किए गए ग्राफ़ से कनेक्ट करने वाली कार्रवाई का रिसॉर्स आईडी पास करें:

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);

डिज़ाइन टैब पर वापस जाकर, रूट पर क्लिक करके रूट ग्राफ़ पर वापस जाएं.

'शामिल करें' फ़ंक्शन का इस्तेमाल करके, अन्य नेविगेशन ग्राफ़ का रेफ़रंस देना

अपने ग्राफ़ के स्ट्रक्चर को मॉड्यूलर बनाने का एक और तरीका है. इसके लिए, पैरंट नेविगेशन ग्राफ़ में <include> एलिमेंट का इस्तेमाल करके, एक ग्राफ़ को दूसरे में शामिल करें. इससे, शामिल किए गए ग्राफ़ को अलग मॉड्यूल या प्रोजेक्ट में पूरी तरह से तय किया जा सकता है. इससे, ग्राफ़ को फिर से इस्तेमाल करने की संभावना बढ़ जाती है.

यहां दिए गए स्निपेट में, <include> का इस्तेमाल करने का तरीका बताया गया है:

<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

अन्य संसाधन

नेविगेशन के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य संसाधन देखें.

कोडलैब

Jetpack Navigation के बारे में जानें

वीडियो

Android Jetpack: नेविगेशन कंट्रोलर की मदद से यूज़र इंटरफ़ेस (यूआई) नेविगेशन मैनेज करना (Google I/O '18)