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

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

Jetpack Compose को शुरू से ही View के साथ काम करने के लिए डिज़ाइन किया गया था. इस सुविधा का मतलब है कि आपके पास अपने मौजूदा View-based ऐप्लिकेशन को 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 देखें.

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

तीसरी इमेज. व्यू और 'लिखें' टैब वाली मौजूदा स्क्रीन

अगर जोड़ी जा रही नई सुविधा, किसी मौजूदा स्क्रीन का हिस्सा है, तो 'लिखें' सुविधा का इस्तेमाल, व्यू पर आधारित मौजूदा स्क्रीन में भी किया जा सकता है. ऐसा करने के लिए, किसी भी दूसरे व्यू की तरह ही व्यू की हैरारकी में 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 पर माइग्रेट करने का बॉटम-अप अप्रोच

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

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

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

अन्य संसाधन

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

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

अगले चरण

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