अपना नेविगेशन ग्राफ़ डिज़ाइन करना

नेविगेशन कॉम्पोनेंट आपके ऐप्लिकेशन को मैनेज करने के लिए नेविगेशन ग्राफ़ का इस्तेमाल करता है नेविगेशन. नेविगेशन ग्राफ़ एक ऐसा डेटा स्ट्रक्चर है जिसमें आपके ऐप्लिकेशन के डेस्टिनेशन और उनके बीच के कनेक्शन की जानकारी देता है.

डेस्टिनेशन के टाइप

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

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

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

• डायलॉग डेस्टिनेशन
• गतिविधि के डेस्टिनेशन

फ़्रेमवर्क

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

• लिखें: कंपोज़ेबल NavHost का इस्तेमाल करें. इसका इस्तेमाल करके इसमें NavGraph जोड़ें Kotlin DSL. ग्राफ़ बनाने के दो तरीके हैं:
  • NavHost के हिस्से के तौर पर: नेविगेशन ग्राफ़ को सीधे इस तरह बनाएं हिस्सा है, जो NavHost को जोड़ने का हिस्सा है.
  • प्रोग्राम के हिसाब से: NavController.createGraph() तरीके का इस्तेमाल करना एक NavGraph बनाने और उसे सीधे NavHost को पास करने के लिए.
• फ़्रैगमेंट: व्यू यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क के साथ फ़्रैगमेंट का इस्तेमाल करते समय, NavHostFragment को होस्ट के तौर पर जोड़ा गया है. नेविगेशन बनाने के कई तरीके हैं ग्राफ़:
  • प्रोग्राम के हिसाब से: Kotlin DSL का इस्तेमाल करके NavGraph बनाएं और इसे सीधे NavHostFragment पर लागू करें.
    • दोनों के लिए, Kotlin DSL के साथ createGraph() फ़ंक्शन का इस्तेमाल किया गया फ़्रैगमेंट और लिखना एक जैसा है.
  • एक्सएमएल: अपना नेविगेशन होस्ट और ग्राफ़ सीधे एक्सएमएल में लिखें.
  • Android Studio एडिटर: Android Studio में जीयूआई एडिटर का इस्तेमाल करके एक्सएमएल रिसॉर्स फ़ाइल के तौर पर आपका ग्राफ़ बनाना और उसमें बदलाव करना.

Compose

Compose में, रूट तय करने के लिए, क्रम से लगाए जा सकने वाले ऑब्जेक्ट या क्लास का इस्तेमाल करें. रास्ता किसी गंतव्य पर पहुंचने का तरीका बताता है और इसमें वह सब जानकारी शामिल होती है जो गंतव्य आवश्यक है. रास्ते तय करने के बाद, NavHost का इस्तेमाल करें कंपोज़ेबल. यह उदाहरण देखें:

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

1. क्रम से लगाया जा सकने वाला ऑब्जेक्ट, इन दोनों रूट में से हर एक को दिखाता है, Profile और FriendsList.
2. NavHost कंपोज़ेबल को किया गया कॉल, NavController और एक रास्ते से गुज़रता है शुरुआती डेस्टिनेशन के लिए.
3. NavHost को भेजा गया Lambda फ़ंक्शन, NavController.createGraph() और NavGraph दिखाता है.
4. हर रूट को टाइप आर्ग्युमेंट के तौर पर दिया जाता है NavGraphBuilder.composable<T>(), जो डेस्टिनेशन को नतीजे के तौर पर NavGraph मिलेंगे.
5. composable को पास किया गया Lambda फ़ंक्शन, इसी के लिए NavHost दिखाता है गंतव्य.

Labda को समझें

NavGraph बनाने वाले Lambda फ़ंक्शन को बेहतर तरीके से समझने के लिए, इन बातों को ध्यान में रखें पिछले स्निपेट की तरह ही ग्राफ़ बनाना चाहते हैं, तो आप NavController.createGraph() का इस्तेमाल करके NavGraph को अलग से ट्रांसफ़र करें और इसे पास करें NavHost को सीधे तौर पर:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = Profile)) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

आर्ग्युमेंट पास करें

अगर आपको किसी डेस्टिनेशन को डेटा भेजना है, तो रूट को ऐसी क्लास के साथ तय करें जिसमें के पैरामीटर हैं. उदाहरण के लिए, Profile रूट, name वाली डेटा क्लास है पैरामीटर.

@Serializable
data class Profile(val name: String)

जब भी आपको उस डेस्टिनेशन में आर्ग्युमेंट पास करने हों, तो एक इंस्टेंस बनाएं आपके रूट क्लास का एक हिस्सा है, जो क्लास कंस्ट्रक्टर को आर्ग्युमेंट पास करता है.

रूट इंस्टेंस पाएं

आप NavBackStackEntry.toRoute() से रूट इंस्टेंस पा सकते हैं या SavedStateHandle.toRoute(). जब आप इसका इस्तेमाल करके कोई डेस्टिनेशन बनाते हैं composable(), NavBackStackEntry पैरामीटर के तौर पर उपलब्ध है.

@Serializable
data class Profile(val name: String)

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(name = profile.name) }
}

इस स्निपेट में नीचे दी गई बातों का ध्यान रखें:

• Profile रूट, नेविगेशन में शुरुआती डेस्टिनेशन के बारे में बताता है ग्राफ़, जिसमें name के लिए तर्क के रूप में "John Smith" दिया गया है.
• डेस्टिनेशन में ही composable<Profile>{} ब्लॉक शामिल है.
• ProfileScreen कंपोज़ेबल में profile.name की वैल्यू मिलती है name आर्ग्युमेंट.
• इस तरह, "John Smith" मान ProfileScreen से होकर गुज़रता है.

कम से कम उदाहरण

NavController और NavHost के एक साथ काम करने का पूरा उदाहरण:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
    profile: Profile
    onNavigateToFriendsList: () -> Unit,
  ) {
  Text("Profile for ${profile.name}")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
  Text("Friends List")
  Button(onClick = { onNavigateToProfile() }) {
    Text("Go to Profile")
  }
}

// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = Profile(name = "John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(
            profile = profile,
            onNavigateToFriendsList = {
                navController.navigate(route = FriendsList)
            }
        )
    }
    composable<FriendsList> {
      FriendsListScreen(
        onNavigateToProfile = {
          navController.navigate(
            route = Profile(name = "Aisha Devi")
          )
        }
      )
    }
  }
}

जैसा कि स्निपेट दिखाता है, NavController को आपके कंपोज़ेबल, NavHost में किसी इवेंट को दिखाता है. इसका मतलब है कि कंपोज़ेबल को इसमें () -> Unit टाइप का ऐसा पैरामीटर है जिसके लिए NavHost, Lambda फ़ंक्शन को पास करती है जो NavController.navigate() पर कॉल करता है.

फ़्रैगमेंट

जैसा कि पिछले सेक्शन में बताया गया है, फ़्रैगमेंट का इस्तेमाल करते समय आपके पास Kotlin DSL, XML या Android Studio का एडिटर.

नीचे दिए गए सेक्शन में, इन अलग-अलग तरीकों के बारे में बताया गया है.

प्रोग्रैम्ड तरीके से

Kotlin DSL, प्रोग्राम के हिसाब से अपने-आप होने वाली प्रोसेस की मदद से नेविगेशन ग्राफ़ बनाने का तरीका देता है फ़्रैगमेंट. कई मायनों में, यह एक्सएमएल का इस्तेमाल करने की तुलना में बेहतर और आधुनिक है संसाधन फ़ाइल में उपलब्ध है.

यहां दिए गए उदाहरण पर गौर करें. यह दो-स्क्रीन वाला नेविगेशन ग्राफ़ लागू करता है.

सबसे पहले, NavHostFragment बनाना ज़रूरी है. इसमें यह शामिल नहीं होना चाहिए app:navGraph एलिमेंट:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

इसके बाद, NavHostFragment के id को पास करें NavController.findNavController. यह NavController को NavHostFragment.

इसके बाद, NavController.createGraph() को किए जाने वाले कॉल, ग्राफ़ को इससे लिंक कर देते हैं NavController और इस वजह से NavHostFragment:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Profile(name = "John Smith")
) {
    // Associate each destination with one of the route constants.
    fragment<ProfileFragment, Profile> {
        label = "Profile"
    }

    fragment<FriendsListFragment, FriendsList>() {
        label = "Friends List"
    }

    // Add other fragment destinations similarly.
}

इस तरीके से DSL का उपयोग करना लिखें में पिछला सेक्शन देखें. उदाहरण के लिए, वहां और यहां, NavController.createGraph() फ़ंक्शन NavGraph जनरेट करता है. इसी तरह, जबकि NavGraphBuilder.composable(), ग्राफ़ में कंपोज़ेबल डेस्टिनेशन जोड़ता है NavGraphBuilder.fragment() एक फ़्रैगमेंट डेस्टिनेशन जोड़ता है.

Kotlin DSL का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानकारी के लिए, NavGraphBuilder DSL.

XML

आप सीधे एक्सएमएल लिख सकते हैं. नीचे दिया गया उदाहरण इसकी जानकारी देता है जैसा ऊपर दिया गया है.

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

NavHostFragment को कम से कम लागू करना:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph" />

</FrameLayout>

NavHostFragment में app:navGraph एट्रिब्यूट शामिल होता है. इस एट्रिब्यूट का इस्तेमाल करें का इस्तेमाल करें. नीचे दी गई चीज़ें उदाहरण के लिए, आप ग्राफ़ को लागू करने का तरीका जान सकते हैं:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/profile">

    <fragment
        android:id="@+id/profile"
        android:name="com.example.ProfileFragment"
        android:label="Profile">

        <!-- Action to navigate from Profile to Friends List. -->
        <action
            android:id="@+id/action_profile_to_friendslist"
            app:destination="@id/friendslist" />
    </fragment>

    <fragment
        android:id="@+id/friendslist"
        android:name="com.example.FriendsListFragment"
        android:label="Friends List" />

    <!-- Add other fragment destinations similarly. -->
</navigation>

अलग-अलग डेस्टिनेशन के बीच के कनेक्शन को तय करने के लिए, कार्रवाइयों का इस्तेमाल किया जाता है. तय सीमा में इस उदाहरण में, profile फ़्रैगमेंट में एक ऐसी कार्रवाई है जो friendslist. ज़्यादा जानकारी के लिए, नेविगेशन कार्रवाइयों का इस्तेमाल करना और फ़्रैगमेंट.

संपादक

नेविगेशन एडिटर का इस्तेमाल करके, अपने ऐप्लिकेशन के नेविगेशन ग्राफ़ को Android Studio. यह एक ज़रूरी GUI है, जिसका इस्तेमाल करके आप अपनी फ़ाइल में NavigationFragment एक्सएमएल, जैसा कि पिछले सेक्शन में बताया गया है.

ज़्यादा जानकारी के लिए, नेविगेशन एडिटर देखें.

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

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

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

नेविगेशन के और मुख्य सिद्धांतों के लिए, नीचे दी गई गाइड देखें:

• खास जानकारी: नेविगेशन की सामान्य खास जानकारी पढ़ना न भूलें कॉम्पोनेंट.
• गतिविधि डेस्टिनेशन: डेस्टिनेशन लागू करने के तरीके के उदाहरण जो लोगों को गतिविधियों पर ले जाते हैं.
• डायलॉग डेस्टिनेशन: डेस्टिनेशन बनाने के तरीकों के उदाहरण उपयोगकर्ता को किसी डायलॉग पर ले जाएं.
• किसी डेस्टिनेशन पर जाना: इसमें पूरी जानकारी देने वाली गाइड शामिल है. एक मंज़िल से दूसरी मंज़िल पर नेविगेट करें.
• नेस्ट किए गए ग्राफ़: एक नेविगेशन को नेस्ट करने के तरीके के बारे में पूरी जानकारी देने वाली गाइड ग्राफ़ को किसी अन्य चार्ट में जोड़ें.