अगर आपके पास व्यू-आधारित कोई मौजूदा ऐप्लिकेशन है, तो हो सकता है कि आप उसकी पूरी जानकारी को फिर से न लिखना चाहें यूज़र इंटरफ़ेस (यूआई) को एक साथ दिखाएं. यह पेज आपको अपने डिवाइस में नए कॉम्पोनेंट जोड़ने में मदद करता है मौजूदा ऐप्लिकेशन है. अपने ऐप्लिकेशन में 'लिखें' विंडो का इस्तेमाल शुरू करने के लिए, लिखें की सुविधा सेट अप करें मौजूदा ऐप्लिकेशन के लिए.
Jetpack Compose को शुरू से ही व्यू इंटरऑपरेबिलिटी के साथ डिज़ाइन किया गया है. इस सुविधा का मतलब है कि व्यू पर आधारित मौजूदा ऐप्लिकेशन को Compose में माइग्रेट किया जा सकता है साथ ही, नई सुविधाओं को बनाने के बारे में सोच रहे हैं. Compose में माइग्रेट करने के लिए, हम एक वृद्धिशील माइग्रेशन का सुझाव दें जहां लिखें और देखें कि आपकी साइट का कोड बेस तब तक सबमिट करें, जब तक आपका ऐप्लिकेशन पूरी तरह से Compose में नहीं आ जाता.
अपने ऐप्लिकेशन को Compose में माइग्रेट करने के लिए, यह तरीका अपनाएं:
- 'लिखें' सुविधा का इस्तेमाल करके नई स्क्रीन बनाएं.
- सुविधाएं बनाते समय, फिर से इस्तेमाल किए जा सकने वाले एलिमेंट की पहचान करें और सामान्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की लाइब्रेरी.
- मौजूदा सुविधाओं को एक बार में सिर्फ़ एक स्क्रीन बदलें.
Compose की सुविधा का इस्तेमाल करके नई स्क्रीन बनाना
पूरी स्क्रीन को घेरने वाली नई सुविधाएं बनाने के लिए, कंपोज़ की सुविधा का इस्तेमाल करना सबसे अच्छा है इससे आपको कंपोज़ की सुविधा इस्तेमाल करने का मौक़ा मिलेगा. इस कार्यनीति की सहायता से, आप सुविधाएं जोड़ सकते हैं साथ ही, लिखें की सुविधा के फ़ायदे पाने के साथ-साथ, आपके कंपनी की कारोबारी ज़रूरतों को पूरा करती है.
जब आप अपने मौजूदा ऐप्लिकेशन में नई स्क्रीन बनाने के लिए लिखें का इस्तेमाल करते हैं, तब भी आप अपने ऐप्लिकेशन के आर्किटेक्चर की सीमाओं के तहत काम करते हैं. अगर आप इसका इस्तेमाल कर रहे हैं, तो फ़्रैगमेंट और नेविगेशन घटक का उपयोग करते हैं, तो आपको फ़्रैगमेंट और उसका कॉन्टेंट Compose में मौजूद होना चाहिए.
किसी फ़्रैगमेंट में लिखें का इस्तेमाल करने के लिए, ComposeView
दिखाएं
आपके फ़्रैगमेंट का onCreateView()
लाइफ़साइकल तरीका. ComposeView
ने
setContent()
ऐसा तरीका जिसमें कंपोज़ेबल फ़ंक्शन दिया जा सकता है.
class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } }
ज़्यादा जानने के लिए, फ़्रैगमेंट में कंपोज़ व्यू देखें.
मौजूदा स्क्रीन में नई सुविधाएं जोड़ें
आप किसी मौजूदा दृश्य-आधारित स्क्रीन में भी कंपोज़ का उपयोग कर सकते हैं यदि आप नई सुविधा
जोड़ रहे हैं, तो वह मौजूदा स्क्रीन का हिस्सा है. ऐसा करने के लिए, ComposeView
अन्य व्यू की तरह ही व्यू हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम) देखें.
उदाहरण के लिए, मान लें कि आपको LinearLayout
में चाइल्ड व्यू जोड़ना है. आप ऐसा कर सकते हैं
एक्सएमएल में इस फ़ॉर्मैट का इस्तेमाल करें:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
व्यू इनफ़्लेट होने के बाद, ComposeView
का रेफ़रंस दिया जा सकता है
और setContent()
को कॉल करें.
ComposeView
के बारे में ज़्यादा जानने के लिए, Interoperability API देखें.
सामान्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की लाइब्रेरी बनाएं
Compose की सुविधा का इस्तेमाल करके सुविधाएं तैयार करते ही, आपको जल्द ही यह पता चल जाएगा कि आखिर में आपने कॉम्पोनेंट की लाइब्रेरी बनाने में मदद मिलती है. सामान्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की लाइब्रेरी बनाना आपको अपने ऐप्लिकेशन में इन कॉम्पोनेंट के लिए एक ही सोर्स रखने की अनुमति देता है और फिर से इस्तेमाल करने लायक बनाने में मदद मिलती है. फिर, आप जो सुविधाएं बनाएंगे वे इस लाइब्रेरी पर निर्भर कर सकती हैं. यह तकनीक विशेष रूप से तब उपयोगी होती है, जब आप कस्टम डिज़ाइन सिस्टम लिखें.
आपके ऐप्लिकेशन के साइज़ के हिसाब से, यह लाइब्रेरी एक अलग पैकेज, मॉड्यूल, या लाइब्रेरी मॉड्यूल का इस्तेमाल करना चाहिए. अपने ऐप्लिकेशन में मॉड्यूल व्यवस्थित करने के बारे में ज़्यादा जानकारी के लिए, Android ऐप्लिकेशन में मॉड्यूलराइज़ेशन की गाइड पढ़ें.
मौजूदा सुविधाओं को Compose से बदलें
नई सुविधाएं बनाने के लिए, कंपोज़ की सुविधा का इस्तेमाल करने के अलावा, आपको धीरे-धीरे Compose की सुविधा का इस्तेमाल करने के लिए, इसकी मौजूदा सुविधाओं को माइग्रेट कर सकते हैं.
ऐप्लिकेशन को सिर्फ़ लिखने के लिए सेट करने से, आपके ऐप्लिकेशन को तेज़ी से डेवलप करने में मदद मिलती है. साथ ही, इससे अपने ऐप्लिकेशन के APK का साइज़ और बिल्ड समय कम करना. लिखें और व्यू की तुलना करें परफ़ॉर्मेंस देखें.
सामान्य स्क्रीन
मौजूदा सुविधाओं को 'लिखें' बॉक्स में माइग्रेट करते समय, सबसे पहले इन पर नज़र रखनी चाहिए स्क्रीन. सामान्य स्क्रीन के तौर पर, वेलकम स्क्रीन, पुष्टि करने वाली स्क्रीन या सेटिंग स्क्रीन, जिसमें यूज़र इंटरफ़ेस (यूआई) में दिखाया गया डेटा स्थिर होता है.
यह एक्सएमएल फ़ाइल लें:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/title_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/title" android:textAppearance="?attr/textAppearanceHeadline2" /> <TextView android:id="@+id/subtitle_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/subtitle" android:textAppearance="?attr/textAppearanceHeadline6" /> <TextView android:id="@+id/body_text" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" android:text="@string/body" android:textAppearance="?attr/textAppearanceBody1" /> <Button android:id="@+id/confirm_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/confirm"/> </LinearLayout>
एक्सएमएल फ़ाइल को Compose में कुछ लाइनों में फिर से लिखा जा सकता है:
@Composable fun SimpleScreen() { Column(Modifier.fillMaxSize()) { Text( text = stringResource(R.string.title), style = MaterialTheme.typography.headlineMedium ) Text( text = stringResource(R.string.subtitle), style = MaterialTheme.typography.headlineSmall ) Text( text = stringResource(R.string.body), style = MaterialTheme.typography.bodyMedium ) Spacer(modifier = Modifier.weight(1f)) Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) { Text(text = stringResource(R.string.confirm)) } } }
मिले-जुले व्यू और कंपोज़ की सुविधा वाली स्क्रीन
जिस स्क्रीन पर लिखने के लिए थोड़ा-बहुत कोड पहले से मौजूद है वह एक अच्छे विकल्प है पूरी तरह से Compose में माइग्रेट करने के लिए. स्क्रीन की जटिलता के आधार पर, आप या तो इसे पूरी तरह से 'लिखें' पर माइग्रेट करें या एक-एक करके करें. अगर स्क्रीन पर यूज़र इंटरफ़ेस (यूआई) की हैरारकी के सबट्री में कंपोज़ की सुविधा का इस्तेमाल करके शुरू किया गया है, तो यूज़र इंटरफ़ेस (यूआई) एलिमेंट को तब तक माइग्रेट करना, जब तक कि पूरी स्क्रीन 'लिखें' विंडो में न चली जाए. यह तरीका, इसे बॉटम-अप अप्रोच भी कहा जाता है.
फ़्रैगमेंट और नेविगेशन कॉम्पोनेंट हटाना
सभी को हटाने के बाद, नेविगेशन कंपोज़ पर माइग्रेट करें अपने फ़्रैगमेंट को चालू करें और उन्हें स्क्रीन-लेवल के कंपोज़ेबल से बदलें. स्क्रीन-लेवल कंपोज़ेबल में लिखें और देखें का इस्तेमाल किया जा सकता है, लेकिन नेविगेशन डेस्टिनेशन में कंपोज़ेबल होने पर ही, नेविगेशन कंपोज़ की सुविधा चालू की जा सकेगी माइग्रेशन. तब तक आपको इस्तेमाल करते रहना चाहिए आपके मिक्स व्यू और कंपोज़ में फ़्रैगमेंट पर आधारित नेविगेशन कॉम्पोनेंट कोड बेस में एक्सपोर्ट करें. इनके लिए Jetpack नेविगेशन को नेविगेशन कंपोज़ पर माइग्रेट करना देखें ज़्यादा जानकारी देखें.
अन्य संसाधन
अपने डेटा माइग्रेट करने के बारे में अधिक जानने के लिए निम्न अतिरिक्त संसाधन देखें कंपोज़ करने के लिए मौजूदा व्यू-आधारित ऐप्लिकेशन:
- कोडलैब (कोड बनाना सीखना)
- Jetpack Compose पर माइग्रेट करना: Sunflower के हिस्सों को माइग्रेट करने का तरीका जानें ऐप्लिकेशन को इस कोडलैब में लिखने के लिए सेट करें.
- ब्लॉग पोस्ट
- Sunflower को Jetpack Compose में माइग्रेट करना: इसका तरीका जानें इस पेज पर बताई गई रणनीति का इस्तेमाल करके, Sunflower को Compose पर माइग्रेट किया गया.
- Jetpack Compose इंटरऑप: RecyclerView में Compose का इस्तेमाल करना:
RecyclerView
में कंपोज़ की सुविधा का बेहतर तरीके से इस्तेमाल करने के बारे में जानें.
अगले चरण
अब आपको पता है कि अपने मौजूदा व्यू-आधारित व्यू को माइग्रेट करने के लिए, कौनसी रणनीति अपनाई जा सकती है ऐप्लिकेशन के बारे में ज़्यादा जानने के लिए, Interoperability API को एक्सप्लोर करें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- व्यू में कंपोज़ की सुविधा इस्तेमाल करना
- Scroll
RecyclerView
को लेज़ी लिस्ट पर माइग्रेट करें