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

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

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

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

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

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

फ़्रेमवर्क

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

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

Compose

Compose में, रास्ते को तय करने के लिए, सीरियलाइज़ किए जा सकने वाले ऑब्जेक्ट या क्लास का इस्तेमाल करें. रास्ते से किसी डेस्टिनेशन तक पहुंचने का तरीका पता चलता है. साथ ही, इसमें उस डेस्टिनेशन से जुड़ी सभी जानकारी होती है.

अपने रूट टाइप के लिए, ज़रूरी क्रम सेड्यूल करने और क्रम सेड्यूल हटाने के तरीके अपने-आप बनाने के लिए, @Serializable एनोटेशन का इस्तेमाल करें. यह एनोटेशन, Kotlin Serialization प्लग इन से मिलता है. इस प्लग इन को जोड़ने के लिए, इन निर्देशों का पालन करें.

रूट तय करने के बाद, नेविगेशन ग्राफ़ बनाने के लिए 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 फ़ंक्शन में इस्तेमाल किया गया लैम्ब्डा फ़ंक्शन, आखिर में NavController.createGraph() को कॉल करता है और NavGraph दिखाता है.
4. हर रूट को NavGraphBuilder.composable<T>() के लिए टाइप आर्ग्युमेंट के तौर पर दिया जाता है. इससे, NavGraph में डेस्टिनेशन जुड़ जाता है.
5. composable को पास किया गया lambda, उस डेस्टिनेशन के लिए NavHost दिखाता है.

लैंम्ब्डा फ़ंक्शन को समझना

NavGraph बनाने वाले लैम्ब्डा फ़ंक्शन को बेहतर तरीके से समझने के लिए, ध्यान दें कि पिछले स्निपेट में मौजूद ग्राफ़ जैसा ही ग्राफ़ बनाने के लिए, 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)

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

वैकल्पिक आर्ग्युमेंट के लिए, डिफ़ॉल्ट वैल्यू वाले ऐसे फ़ील्ड बनाएं जिनमें कोई वैल्यू नहीं डाली जा सकती.

@Serializable
data class Profile(val nickname: String? = null)

रास्ते का इंस्टेंस पाना

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 कंपोजबल, अपने name आर्ग्युमेंट के लिए profile.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 एक ऐसा लैम्ब्डा पास करता है जो NavController.navigate() को कॉल करता है.

फ़्रैगमेंट

जैसा कि पिछले सेक्शन में बताया गया है, फ़्रैगमेंट का इस्तेमाल करते समय, आपके पास Kotlin DSL, एक्सएमएल या 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 में नेविगेशन एडिटर का इस्तेमाल करके, अपने ऐप्लिकेशन के नेविगेशन ग्राफ़ को मैनेज किया जा सकता है. यह एक ऐसा जीयूआई है जिसका इस्तेमाल करके, NavigationFragment एक्सएमएल बनाया जा सकता है और उसमें बदलाव किया जा सकता है. इस बारे में पिछले सेक्शन में बताया गया है.

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

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

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

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

नेविगेशन के मुख्य कॉन्सेप्ट के बारे में ज़्यादा जानने के लिए, ये गाइड देखें:

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