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

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

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

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

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

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 पर माइग्रेट करने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अन्य संसाधन देखें:

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

अगले चरण

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

आपके लिए सुझाव

ध्यान दें: JavaScript बंद होने पर, लिंक का टेक्स्ट दिखता है
व्यू में Compose का इस्तेमाल करना
Scroll
RecyclerView को लेज़ी लिस्ट पर माइग्रेट करना