जेटपैक नेविगेशन को नेविगेशन के लिए लिखने की सुविधा पर माइग्रेट करें

Navigation Compose API की मदद से, Compose ऐप्लिकेशन में एक कॉम्पोनेंट से दूसरे कॉम्पोनेंट पर नेविगेट किया जा सकता है. साथ ही, Jetpack Navigation के कॉम्पोनेंट, इन्फ़्रास्ट्रक्चर, और सुविधाओं का फ़ायदा भी लिया जा सकता है.

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

माइग्रेशन से जुड़ी ज़रूरी शर्तें

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

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

माइग्रेट करने का तरीका

माइग्रेट करने के लिए सुझाई गई रणनीति का पालन करने या किसी और तरीके का इस्तेमाल करने पर भी, आपको एक ऐसी जगह पर पहुंचना होगा जहां सभी नेविगेशन डेस्टिनेशन, स्क्रीन कॉम्पोज़ेबल होंगे. साथ ही, फ़्रैगमेंट सिर्फ़ कॉम्पोज़ेबल कंटेनर के तौर पर काम करेंगे. इस चरण में, नेविगेशन कंपोज़ पर माइग्रेट किया जा सकता है.

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

नेविगेशन कंपोज़ में माइग्रेट करने के लिए, यह तरीका अपनाएं:

  1. अपने ऐप्लिकेशन में Navigation Compose की डिपेंडेंसी जोड़ें.

  2. App-level कॉम्पोज़ेबल बनाएं और उसे अपने Activity में, Compose के एंट्री पॉइंट के तौर पर जोड़ें. इसके लिए, व्यू लेआउट के सेटअप को बदलें:

    class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

  3. हर नेविगेशन डेस्टिनेशन के लिए टाइप बनाएं. जिन डेस्टिनेशन के लिए डेटा की ज़रूरत नहीं है उनके लिए data object का इस्तेमाल करें. साथ ही, जिन डेस्टिनेशन के लिए डेटा की ज़रूरत है उनके लिए data class या class का इस्तेमाल करें.

    @Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third

    MigrationCommonScenariosSnippets.kt

  4. NavController को ऐसी जगह पर सेट अप करें जहां जिन कॉम्पोज़ेबल को इसका रेफ़रंस चाहिए उनके पास इसका ऐक्सेस हो. आम तौर पर, यह आपके Appकॉम्पोज़ेबल में होता है. यह तरीका, स्टेट हॉइस्टिंग के सिद्धांतों का पालन करता है. साथ ही, आपको NavController को सटीक जानकारी देने वाले सोर्स के तौर पर इस्तेमाल करने की सुविधा देता है. इससे, कॉम्पोज़ेबल स्क्रीन के बीच नेविगेट करने और बैक स्टैक को बनाए रखने में मदद मिलती है:

    @Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}
    MigrationCommonScenariosSnippets.kt

  5. App कॉम्पोनेंट में अपने ऐप्लिकेशन का NavHost बनाएं और navController को पास करें:

    @Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

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

    class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

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

    @Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}
    MigrationCommonScenariosSnippets.kt

  8. सभी findNavController() नेविगेशन कॉल को navController वाले कॉल से बदलें और पूरे navController को पास करने के बजाय, इन्हें हर कॉम्पोज़ेबल स्क्रीन पर नेविगेशन इवेंट के तौर पर पास करें. यह तरीका, कॉल करने वालों को कंपोज किए जा सकने वाले फ़ंक्शन से इवेंट एक्सपोज़ करने के सबसे सही तरीकों का पालन करता है. साथ ही, navController को एक ही सोर्स के तौर पर रखता है.

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

    @Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  9. सभी फ़्रैगमेंट, काम के एक्सएमएल लेआउट, ग़ैर-ज़रूरी नेविगेशन, और अन्य संसाधनों को हटाएं. साथ ही, पुराने फ़्रैगमेंट और Jetpack नेविगेशन की डिपेंडेंसी को भी हटाएं.

सेटअप से जुड़े दस्तावेज़ में, नेविगेशन कंपोज़ से जुड़ी ज़्यादा जानकारी के साथ ये ही चरण देखे जा सकते हैं.

इस्तेमाल के सामान्य उदाहरण

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

माइग्रेट करने के सामान्य इस्तेमाल के उदाहरणों में ये शामिल हैं:

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

नेविगेट करते समय जटिल डेटा हासिल करना

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

अगर आपके फ़्रैगमेंट, आर्ग्युमेंट के तौर पर जटिल ऑब्जेक्ट पास कर रहे हैं, तो पहले अपने कोड को रीफ़ैक्टोर करें. ऐसा इस तरह करें कि इन ऑब्जेक्ट को डेटा लेयर में सेव और फ़ेच किया जा सके. उदाहरणों के लिए, Android के डेटा स्टोर में मौजूद देखें.

सीमाएं

इस सेक्शन में, नेविगेशन कंपोज़ की मौजूदा सीमाओं के बारे में बताया गया है.

Compose में नेविगेशन के लिए इंक्रीमेंटल माइग्रेशन

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

ट्रांज़िशन ऐनिमेशन

Navigation 2.7.0-alpha01 से, कस्टम ट्रांज़िशन सेट करने की सुविधा जोड़ी गई है. पहले, यह सुविधा AnimatedNavHost में उपलब्ध थी. अब यह सुविधा सीधे NavHost में काम करती है. ज़्यादा जानकारी के लिए, रिलीज़ नोट पढ़ें.

ज़्यादा जानें

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

  • Navigation Compose कोडलैब: इस कोडलैब में, Navigation Compose के बारे में बुनियादी बातें जानें.
  • अब Android रिपॉज़िटरी में उपलब्ध है: यह पूरी तरह से काम करने वाला Android ऐप्लिकेशन है. इसे पूरी तरह से Kotlin और Jetpack Compose की मदद से बनाया गया है. यह ऐप्लिकेशन, Android डिज़ाइन और डेवलपमेंट के सबसे सही तरीकों का पालन करता है. साथ ही, इसमें Navigation Compose भी शामिल है.
  • Sunflower को Jetpack Compose पर माइग्रेट करना: यह एक ब्लॉग पोस्ट है, जिसमें Sunflower के सैंपल ऐप्लिकेशन को व्यू से Compose पर माइग्रेट करने की प्रोसेस के बारे में बताया गया है. इसमें, Navigation Compose पर माइग्रेट करने की प्रोसेस के बारे में भी बताया गया है.
  • हर स्क्रीन के लिए Jetnews: यह एक ब्लॉग पोस्ट है, जिसमें Jetnews के सैंपल को फिर से तैयार करने और उसे माइग्रेट करने के बारे में बताया गया है. ऐसा इसलिए किया गया है, ताकि Jetpack Compose और Navigation Compose की मदद से, सभी स्क्रीन पर Jetnews का इस्तेमाल किया जा सके.