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

नेविगेशन कंपोज़ एपीआई आपको Jetpack नेविगेशन के कॉम्पोनेंट, इंफ़्रास्ट्रक्चर, और सुविधाओं का फ़ायदा लेते हुए, किसी कंपोज़ेबल में नेविगेट करने की सुविधा देता है.

इस पेज पर, फ़्रैगमेंट पर आधारित Jetpack नेविगेशन से नेविगेशन Compose पर माइग्रेट करने का तरीका बताया गया है. यह तरीका, व्यू पर आधारित यूज़र इंटरफ़ेस (यूआई) को Jetpack 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 डेस्टिनेशन जोड़ें. अगर हर स्क्रीन को पहले ही 'लिखें' विंडो में माइग्रेट किया गया है, तो इस चरण में सिर्फ़ आपके फ़्रैगमेंट से, स्क्रीन कंपोज़ेबल को 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 में नेविगेशन के लिए इंक्रीमेंटल माइग्रेशन

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

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

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

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

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

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