नेविगेशन कंपोज़ एपीआई की मदद से, अलग-अलग कंपोज़ेबल में नेविगेट करने के लिए, ऐप्लिकेशन कंपोज़ करें और Jetpack नेविगेशन के कॉम्पोनेंट इस्तेमाल करते हुए, बुनियादी सुविधाओं, और सुविधाओं के बारे में बात करते हैं.
इस पेज में बताया गया है कि फ़्रैगमेंट पर आधारित जेटपैक नेविगेशन से कैसे नेविगेशन कंपोज़िशन, जेटपैक पर व्यू-आधारित यूज़र इंटरफ़ेस (यूआई) माइग्रेशन के हिस्से के तौर पर लिखें.
माइग्रेशन से जुड़ी ज़रूरी शर्तें
अगर आप कोई विकल्प चुनने के बाद सभी कीवर्ड को बदलना चाहते हैं, तो नेविगेशन कंपोज़िशन पर माइग्रेट कर सकते हैं स्क्रीन कंपोज़ेबल से जुड़े फ़्रैगमेंट. स्क्रीन कंपोज़ेबल में यह शामिल हो सकता है लिखें और देखें कॉन्टेंट का मिक्स, लेकिन सभी नेविगेशन डेस्टिनेशन कंपोज़ेबल का इस्तेमाल करें. तब तक, आपको अपने इंटरऑप व्यू में फ़्रैगमेंट पर आधारित नेविगेशन कॉम्पोनेंट का इस्तेमाल जारी रखें और कोड बेस लिखें. ज़्यादा जानकारी के लिए, नेविगेशन इंटरऑप दस्तावेज़ देखें जानकारी.
सिर्फ़-लिखने के लिए ऐप्लिकेशन में नेविगेशन कंपोज़ का इस्तेमाल करना एक ज़रूरी शर्त नहीं है. आप फ़्रैगमेंट-आधारित नेविगेशन कॉम्पोनेंट का इस्तेमाल करना जारी रखें, जब तक कि आपके कंपोज़ेबल कॉन्टेंट को होस्ट करने के लिए फ़्रैगमेंट.
माइग्रेशन का तरीका
चाहे आप हमारी सुझाई गई माइग्रेशन रणनीति का पालन कर रहे हों या दूसरा तरीका है, तो आप एक ऐसे बिंदु पर पहुंच जाएंगे, जहां सभी नेविगेशन डेस्टिनेशन स्क्रीन कंपोज़ेबल, जिसमें फ़्रैगमेंट सिर्फ़ कंपोज़ेबल कंटेनर के तौर पर काम करते हैं. इस पर स्टेज, नेविगेशन कंपोज़ पर माइग्रेट किया जा सकता है.
अगर आपका ऐप्लिकेशन पहले से ही यूडीएफ़ डिज़ाइन पैटर्न का पालन करता है और हमारी गाइड आर्किटेक्चर का इस्तेमाल करते हैं, तो Jetpack Compose और नेविगेशन कंपोज़ में माइग्रेट नहीं किया जाना चाहिए के लिए यूज़र इंटरफ़ेस (यूआई) लेयर के अलावा, आपके ऐप्लिकेशन की अन्य लेयर की बड़ी रीफ़ैक्टरिंग की ज़रूरत होती है.
नेविगेशन कंपोज़ पर माइग्रेट करने के लिए, यह तरीका अपनाएं:
- अपने ऐप्लिकेशन में, नेविगेशन कंपोज़ डिपेंडेंसी जोड़ें.
कोई
App-level
कंपोज़ेबल बनाएं और इसे अपनेActivity
में अपने व्यू लेआउट के सेटअप को बदलते हुए, एंट्री पॉइंट लिखें:class SampleActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample) setContent { SampleApp(/* ... */) } } }
NavController
को ऐसी जगह सेट अप करें जहां सभी कंपोज़ेबल को उसे ऐक्सेस करने की अनुमति देने के लिए (आम तौर पर, यह आपकेApp
के अंदर होता है कंपोज़ेबल). यह तरीका राज्य को बढ़ाने के सिद्धांतों का पालन करता है और की मदद से नेविगेट करने के लिए,NavController
का इस्तेमाल सोर्स के तौर पर किया जा सकता है स्क्रीन और पिछली गतिविधियों के रखरखाव के बीच:@Composable fun SampleApp() { val navController = rememberNavController() // ... }
ऐप्लिकेशन कंपोज़ेबल में अपने ऐप्लिकेशन का
NavHost
बनाएं औरnavController
:@Composable fun SampleApp() { val navController = rememberNavController() SampleNavHost(navController = navController) } @Composable fun SampleNavHost( navController: NavHostController ) { NavHost(navController = navController, startDestination = "first") { // ... } }
अपना नेविगेशन ग्राफ़ बनाने के लिए,
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(/* ... */) } // ... } }
अगर आपने Compose के यूज़र इंटरफ़ेस (यूआई) को संग्रहित करने से जुड़े निर्देशों का पालन किया है, खास तौर पर,
ViewModel
s और नेविगेशन इवेंट को कंपोज़ेबल. इसके बाद, अगले चरण के तौर पर यह बदलना है किViewModel
कैसे उपलब्ध कराया जाए लिखने के लिए डिज़ाइन किया जा सकता है. Hilt इंजेक्शन और इसके इंटिग्रेशन का इस्तेमाल किया जा सकता हैhiltViewModel
के ज़रिए लिखें और नेविगेशन का इस्तेमाल करके पॉइंट करें:@Composable fun FirstScreen( // viewModel: FirstViewModel = viewModel(), viewModel: FirstViewModel = hiltViewModel(), onButtonClick: () -> Unit = {}, ) { // ... }
सभी
findNavController()
नेविगेशन कॉल कोnavController
से बदलें और उन्हें नेविगेशन इवेंट के तौर पर, हर कंपोज़ेबल स्क्रीन पर पास किया जा सकता है. पूरेnavController
को पास करने से बेहतर है. यह तरीका अपनाने के सबसे सही तरीके कंपोज़ेबल फ़ंक्शन से लेकर कॉलर और सबसे अहम सोर्स के तौर परnavController
को सेव रखता है.- अगर आपने पहले ही जनरेट करने के लिए Safe Args प्लगिन का इस्तेमाल किया है को बदलने के लिए, उसे एक रूट से बदलें — ए आपके कंपोज़ेबल का स्ट्रिंग पाथ, जो हर डेस्टिनेशन के लिए यूनीक होता है.
- डेटा पास करते समय Safe Args को बदलने के लिए, इसके साथ नेविगेट करें आर्ग्युमेंट.
नेविगेशन कंपोज़ में टाइप की सुरक्षा के लिए, सुरक्षित Args सेक्शन पढ़ें देखें.
@Composable fun SampleNavHost( navController: NavHostController ) { NavHost(navController = navController, startDestination = "first") { composable("first") { FirstScreen( onButtonClick = { // findNavController().navigate(firstScreenToSecondScreenAction) navController.navigate("second_screen_route") } ) } composable("second") { SecondScreen( onIconClick = { // findNavController().navigate(secondScreenToThirdScreenAction) navController.navigate("third_screen_route") } ) } // ... } }
सभी फ़्रैगमेंट, काम के एक्सएमएल लेआउट, गै़र-ज़रूरी नेविगेशन वगैरह हटाएं संसाधन, और पुराना फ़्रैगमेंट और Jetpack नेविगेशन डिपेंडेंसी.
नेविगेशन कंपोज़ की सुविधा से जुड़ी ज़्यादा जानकारी के साथ, समान चरण यहां देखें: सेटअप से जुड़े दस्तावेज़.
इस्तेमाल के सामान्य उदाहरण
इससे कोई फ़र्क नहीं पड़ता कि आप किस नेविगेशन घटक का उपयोग कर रहे हैं, नेविगेशन लागू होता है.
माइग्रेट करते समय, आम तौर पर इन उदाहरणों का इस्तेमाल किया जाता है:
- कंपोज़ेबल (कंपोज़ेबल) पर जाना
- तर्क की मदद से नेविगेट करना
- डीप लिंक
- नेस्ट किया गया नेविगेशन
- सबसे नीचे वाले नेविगेशन बार के साथ इंटिग्रेशन
- कस्टम नेविगेशन कॉम्पोनेंट के साथ इंटिग्रेशन
इन उपयोग के उदाहरणों के बारे में अधिक विस्तृत जानकारी के लिए, इसके साथ नेविगेट करना देखें लिखें.
Safe Args
नेविगेशन कंपोज़िशन, जेटपैक नेविगेशन से अलग है. इसमें सेफ़ सर्च का इस्तेमाल नहीं किया जा सकता कोड जनरेशन के लिए Args प्लगिन. इसके बजाय, इनकी मदद से, टाइप की सुरक्षा नेविगेशन कंपोज़िशन: अपने कोड को स्ट्रक्चर करके उसे टाइप-सुरक्षित बनाएं रनटाइम.
नेविगेट करते समय जटिल डेटा वापस पाएं
नेविगेशन कंपोज़, स्ट्रिंग के रूट पर आधारित होता है और Jetpack नेविगेशन के उलट, यह काम करता है कस्टम पार्स किए जा सकने वाले और क्रम में लगाए जा सकने वाले कोड को आर्ग्युमेंट के तौर पर पास करने की सुविधा नहीं मिलती.
हमारा सुझाव है कि नेविगेट करते समय, जटिल डेटा ऑब्जेक्ट पास न करें. इसके बजाय, कम से कम ज़रूरी जानकारी पास करें. जैसे, यूनीक आइडेंटिफ़ायर या का इस्तेमाल करें. आपको ऐसा करना चाहिए जटिल ऑब्जेक्ट को डेटा के रूप में एक ही जगह पर स्टोर करते हैं, जैसे कि डेटा लेयर. अधिक जानकारी के लिए, जब जटिल डेटा को पुनर्प्राप्त करना हो नेविगेट करना.
अगर आपके फ़्रैगमेंट, कॉम्प्लेक्स ऑब्जेक्ट को आर्ग्युमेंट के तौर पर पास कर रहे हैं, तो रीफ़ैक्टरिंग करें अपने कोड को पहले इस तरह से सेट करें कि को ट्रैक किया जा सकता है. अब Android डेटा स्टोर करने की जगह में देखें उदाहरण.
सीमाएं
इस सेक्शन में, नेविगेशन कंपोज़ की मौजूदा सीमाओं के बारे में बताया गया है.
नेविगेशन कंपोज़ की सुविधा पर इंक्रीमेंटल माइग्रेशन
फ़िलहाल, आप फ़्रैगमेंट का इस्तेमाल इस रूप में करते हुए नेविगेशन कंपोज़ की सुविधा का इस्तेमाल नहीं कर सकते: गंतव्यों को शामिल करें. मार्गदर्शक लिखें का उपयोग करना प्रारंभ करने के लिए, अपने सभी डेस्टिनेशन, कंपोज़ेबल होने चाहिए. आप इस सुविधा के अनुरोध को समस्या को ट्रैक करने वाला टूल.
ट्रांज़िशन ऐनिमेशन
नेविगेशन 2.7.0-alpha01 से शुरू होने वाली सुविधा, कस्टम सेटिंग के लिए सहायता
ट्रांज़िशन हैं, जो पहले AnimatedNavHost
से थे, अब
NavHost
में सीधे तौर पर इस्तेमाल किया जा सकता है. प्रॉडक्ट की जानकारी पढ़ें
हमारा वीडियो देखें.
ज़्यादा जानें
नेविगेशन कंपोज़ पर माइग्रेट करने के बारे में ज़्यादा जानकारी के लिए, यह देखें संसाधन:
- नेविगेशन कंपोज़ कोडलैब: इसकी मदद से नेविगेशन कंपोज़ की बुनियादी बातें सीखें कोडलैब की सुविधा है.
- अब Android डेटा स्टोर करने की जगह में: पूरी तरह से काम करने वाला Android ऐप्लिकेशन इसे पूरी तरह से Kotlin और Jetpack Compose के साथ बनाया गया है, जो Android के डिज़ाइन को फ़ॉलो करते हैं साथ ही, नेविगेशन कंपोज़ की सुविधा भी शामिल है.
- Sunflower को Jetpack Compose में माइग्रेट करना: एक ब्लॉग पोस्ट Sunflower सैंपल ऐप्लिकेशन के माइग्रेशन की प्रोसेस को, व्यू से लेकर Compose में, नेविगेशन कंपोज़ पर माइग्रेट करने की सुविधा भी शामिल है.
- हर स्क्रीन के लिए Jeetnews: एक ब्लॉग पोस्ट, जिसमें सभी स्क्रीन पर काम करने के लिए, Jetnews सैंपल की रीफ़ैक्टरिंग और माइग्रेशन Jetpack Compose और नेविगेशन कंपोज़.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose की मदद से नेविगेट करना
- लिखें और अन्य लाइब्रेरी
- ध्यान देने वाली अन्य बातें