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

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

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

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

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

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

माइग्रेशन के चरण

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

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

Navigation Compose पर माइग्रेट करने के लिए, यह तरीका अपनाएं:

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

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

    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 UI को आर्किटेक्ट करने से जुड़े दिशा-निर्देशों का पालन किया है, तो आपको यह भी पता होगा कि ViewModel और नेविगेशन इवेंट को कंपोज़ेबल में कैसे पास किया जाना चाहिए. अब आपको यह बदलना होगा कि हर स्क्रीन कंपोज़ेबल को ViewModel कैसे दिया जाता है. hiltViewModel के ज़रिए, Hilt इंजेक्शन और Compose और Navigation के साथ इसके इंटिग्रेशन पॉइंट का इस्तेमाल किया जा सकता है:

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

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

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

    @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 नेविगेशन डिपेंडेंसी हटाएं.

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

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

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

माइग्रेट करते समय, इन मामलों में सामान्य तौर पर माइग्रेशन किया जाता है:

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

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

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

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

सीमाएं

इस सेक्शन में, Navigation Compose की मौजूदा सीमाओं के बारे में बताया गया है.

Navigation Compose पर धीरे-धीरे माइग्रेट करना

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

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

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

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

Navigation Compose पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए लेख पढ़ें:

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