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

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

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

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

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

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

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

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 दोनों का इस्तेमाल किया गया है

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

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

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

अन्य संसाधन

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

अगले चरण

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