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

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

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

उदाहरण

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

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

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

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

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

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

कंडिशनल नेविगेशन स्थितियों के बारे में ज़्यादा जानने के लिए, शर्तों नेविगेशन.

Compose

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

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

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

// 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

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

  1. नेविगेशन एडिटर में, Shift बटन को दबाकर रखें और ऐसे डेस्टिनेशन जिन्हें आपको नेस्ट किए गए ग्राफ़ में शामिल करना है.

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

    दूसरी इमेज. नेविगेशन एडिटर में नेस्ट किया गया ग्राफ़

  3. नेस्ट किए गए ग्राफ़ पर क्लिक करें. ये एट्रिब्यूट एट्रिब्यूट पैनल:

    • टाइप, जिसमें "नेस्ट किया गया ग्राफ़" शामिल होता है
    • ID, जिसमें नेस्ट किए गए ग्राफ़ के लिए सिस्टम से असाइन किया गया आईडी होता है. यह आईडी का इस्तेमाल, आपके कोड से नेस्ट किए गए ग्राफ़ का रेफ़रंस देने के लिए किया जाता है.

  4. नेस्ट किए गए ग्राफ़ के डेस्टिनेशन दिखाने के लिए उस पर दो बार क्लिक करें.

  5. एक्सएमएल व्यू पर टॉगल करने के लिए, टेक्स्ट टैब पर क्लिक करें. नेस्ट किया गया नेविगेशन ग्राफ़ को ग्राफ़ में जोड़ दिया गया है. इस नेविगेशन ग्राफ़ का अपना 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>

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

Kotlin

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

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
  1. डिज़ाइन टैब पर वापस आएं और रूट ग्राफ़ पर वापस जाने के लिए, रूट.

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

ग्राफ़ संरचना को मॉड्यूलराइज़ करने का एक अन्य तरीका है कि में एक ग्राफ़ शामिल करें अन्य विकल्प को चुनने के लिए, पैरंट नेविगेशन ग्राफ़ में मौजूद <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>

अन्य संसाधन

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

सैंपल

कोड लैब

वीडियो