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

अगर आपके पास पहले से कोई व्यू-आधारित ऐप्लिकेशन है, तो हो सकता है कि आप उसके पूरे यूज़र इंटरफ़ेस (यूआई) को एक साथ फिर से न लिखना चाहें. इस पेज की मदद से, अपने मौजूदा ऐप्लिकेशन में नए Compose कॉम्पोनेंट जोड़े जा सकते हैं. अपने ऐप्लिकेशन में Compose का इस्तेमाल शुरू करने के लिए, किसी मौजूदा ऐप्लिकेशन के लिए Compose सेट अप करना लेख पढ़ें.

Jetpack Compose को शुरुआत से ही, व्यू इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) के साथ डिज़ाइन किया गया था. इस सुविधा का मतलब है कि आपके पास अपने मौजूदा View-आधारित ऐप्लिकेशन को Compose पर माइग्रेट करने का विकल्प है. साथ ही, आपके पास नई सुविधाएं बनाने का विकल्प भी है. Compose पर माइग्रेट करने के लिए, हमारा सुझाव है कि आप धीरे-धीरे माइग्रेट करें. इससे आपके कोड बेस में Compose और व्यू, दोनों एक साथ मौजूद रहेंगे. ऐसा तब तक होगा, जब तक आपका ऐप्लिकेशन पूरी तरह से Compose पर माइग्रेट नहीं हो जाता.

पहली इमेज. व्यू-आधारित ऐप्लिकेशन को Compose पर माइग्रेट करने के चरण

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

1. Compose की मदद से नई स्क्रीन बनाएं.
2. सुविधाएं बनाते समय, फिर से इस्तेमाल किए जा सकने वाले एलिमेंट की पहचान करें और सामान्य यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट की लाइब्रेरी बनाना शुरू करें.
3. एक बार में एक स्क्रीन पर, मौजूदा सुविधाओं को बदलें.

Compose की मदद से नई स्क्रीन बनाना

Compose का इस्तेमाल करके, पूरी स्क्रीन पर दिखने वाली नई सुविधाएं बनाना, Compose को अपनाने का सबसे अच्छा तरीका है. इस रणनीति की मदद से, सुविधाएं जोड़ी जा सकती हैं और Compose के फ़ायदों का इस्तेमाल किया जा सकता है. साथ ही, अपनी कंपनी की कारोबारी ज़रूरतों को पूरा किया जा सकता है.

दूसरी इमेज. Compose में लिखी गई नई स्क्रीन

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

किसी फ़्रैगमेंट में Compose का इस्तेमाल करने के लिए, अपने फ़्रैगमेंट के onCreateView() लाइफ़साइकल मेथड में ComposeView को रिटर्न करें. ComposeView में एक setContent() तरीका होता है, जिसमें ऐप्लिकेशन बनाने की सुविधा दी जा सकती है.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

ज़्यादा जानने के लिए, फ़्रैगमेंट में ComposeView देखें.

मौजूदा स्क्रीन में नई सुविधाएं जोड़ना

तीसरी इमेज. व्यू और Compose, दोनों का इस्तेमाल करके बनाई गई मौजूदा स्क्रीन

अगर जोड़ी जा रही नई सुविधा किसी मौजूदा स्क्रीन का हिस्सा है, तो व्यू पर आधारित मौजूदा स्क्रीन में भी Compose का इस्तेमाल किया जा सकता है. ऐसा करने के लिए, व्यू हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम) में 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>
migration_strategy_existing_screens.xml

व्यू को इनफ़्लेट करने के बाद, हैरारकी में ComposeView को रेफ़रंस के तौर पर इस्तेमाल किया जा सकता है. साथ ही, setContent() को कॉल किया जा सकता है.

ComposeView के बारे में ज़्यादा जानने के लिए, इंटरऑपरेबिलिटी एपीआई देखें.

यूज़र इंटरफ़ेस (यूआई) के सामान्य कॉम्पोनेंट की लाइब्रेरी बनाना

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

आपके ऐप्लिकेशन के साइज़ के हिसाब से, यह लाइब्रेरी एक अलग पैकेज, मॉड्यूल या लाइब्रेरी मॉड्यूल हो सकती है. अपने ऐप्लिकेशन में मॉड्यूल व्यवस्थित करने के बारे में ज़्यादा जानने के लिए, Android ऐप्लिकेशन को मॉड्यूलर बनाने की गाइड देखें.

मौजूदा सुविधाओं को Compose से बदलना

नई सुविधाएं बनाने के लिए Compose का इस्तेमाल करने के साथ-साथ, आपको अपने ऐप्लिकेशन में मौजूद सुविधाओं को धीरे-धीरे माइग्रेट करना होगा, ताकि Compose का फ़ायदा लिया जा सके.

सिर्फ़ Compose का इस्तेमाल करके ऐप्लिकेशन बनाने से, ऐप्लिकेशन को तेज़ी से डेवलप किया जा सकता है. साथ ही, इससे APK का साइज़ और ऐप्लिकेशन को बनाने में लगने वाला समय कम हो सकता है. ज़्यादा जानने के लिए, Compose और View की परफ़ॉर्मेंस की तुलना करना लेख पढ़ें.

ध्यान दें: यूज़र इंटरफ़ेस (यूआई) की जांच करें, ताकि यह पक्का किया जा सके कि माइग्रेशन के दौरान, ऐप्लिकेशन की परफ़ॉर्मेंस में कोई गिरावट न आए. यूज़र इंटरफ़ेस (यूआई) की जांच करने के बारे में ज़्यादा जानने के लिए, Android पर ऐप्लिकेशन की जांच करना और Compose लेआउट की जांच करना लेख पढ़ें.

सिंपल स्क्रीन

मौजूदा सुविधाओं को Compose पर माइग्रेट करते समय, सबसे पहले आसान स्क्रीन पर ध्यान देना चाहिए. सिंपल स्क्रीन, वेलकम स्क्रीन, पुष्टि करने वाली स्क्रीन या सेटिंग स्क्रीन हो सकती है. इसमें यूज़र इंटरफ़ेस (यूआई) में दिखने वाला डेटा, ज़्यादातर स्टैटिक होता है.

इस एक्सएमएल फ़ाइल को देखें:

<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>
migration_strategy_xml_example.xml

एक्सएमएल फ़ाइल को 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))
        }
    }
}
MigrationStrategySnippets.kt

मिक्स्ड व्यू और Compose स्क्रीन

ऐसी स्क्रीन जिसमें पहले से ही Compose का थोड़ा-बहुत कोड मौजूद है, उसे भी Compose पर पूरी तरह से माइग्रेट किया जा सकता है. स्क्रीन की जटिलता के आधार पर, इसे पूरी तरह से Compose पर माइग्रेट किया जा सकता है या इसे टुकड़ों में किया जा सकता है. अगर स्क्रीन को यूज़र इंटरफ़ेस (यूआई) की हैरारकी के सबट्री में Compose के साथ शुरू किया गया है, तो यूज़र इंटरफ़ेस (यूआई) एलिमेंट को तब तक माइग्रेट करना जारी रखें, जब तक कि पूरी स्क्रीन Compose में न आ जाए. इस तरीके को बॉटम-अप तरीका भी कहा जाता है.

चौथी इमेज. व्यू और Compose यूज़र इंटरफ़ेस (यूआई) के मिले-जुले यूज़र इंटरफ़ेस (यूआई) को Compose पर माइग्रेट करने का बॉटम-अप तरीका

फ़्रैगमेंट और नेविगेशन कॉम्पोनेंट हटाना

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

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

अन्य संसाधन

अपने मौजूदा व्यू-आधारित ऐप्लिकेशन को Compose पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य लेख पढ़ें:

• कोडलैब
  • Jetpack Compose पर माइग्रेट करना: इस कोडलैब में, Sunflower ऐप्लिकेशन के कुछ हिस्सों को Compose पर माइग्रेट करने का तरीका जानें.
• ब्लॉग पोस्ट
  • Sunflower को Jetpack Compose पर माइग्रेट करना: इस पेज पर बताई गई रणनीति का इस्तेमाल करके, Sunflower को Compose पर माइग्रेट करने का तरीका जानें.
  • Jetpack Compose इंटरऑप: RecyclerView में Compose का इस्तेमाल करना: RecyclerView में Compose का बेहतर तरीके से इस्तेमाल करने का तरीका जानें.

अगले चरण

अब आपको अपने मौजूदा व्यू-आधारित ऐप्लिकेशन को माइग्रेट करने की रणनीति के बारे में पता चल गया है. ज़्यादा जानने के लिए, इंटरऑपरेबिलिटी एपीआई के बारे में जानें.