इस पेज का अनुवाद Cloud Translation API से किया गया है.

व्यू में कंपोज़ की सुविधा इस्तेमाल करना

ऐसे मौजूदा ऐप्लिकेशन में कंपोज़ की सुविधा वाला यूज़र इंटरफ़ेस (यूआई) जोड़ा जा सकता है जिसमें व्यू-आधारित डिज़ाइन का इस्तेमाल किया जाता हो.

नई और पूरी तरह से लिखने के तरीके पर आधारित स्क्रीन बनाने के लिए, अपनी गतिविधि से setContent() मेथड को कॉल करने के लिए कहें. साथ ही, कंपोज़ेबल फ़ंक्शन को पास करने के लिए कहें.

class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { // In here, we can call composables!
            MaterialTheme {
                Greeting(name = "compose")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}InteroperabilityAPIsSnippets.kt

यह कोड ठीक वैसा ही दिखता है जैसा आपको सिर्फ़ कंपोज़ की सुविधा वाले किसी ऐप्लिकेशन में मिलेगा.

`ComposeView` के लिए `ViewCompositionStrategy`

ViewCompositionStrategy इससे यह तय होता है कि कंपोज़िशन को कब हटाना चाहिए. डिफ़ॉल्ट रूप से, ViewCompositionStrategy.Default, कंपोज़िशन को तब नष्ट करता है, जब मौजूदा ComposeView विंडो से यह कंपोज़िशन अलग हो जाती है. हालांकि, ऐसा तब नहीं होता है, जब वह RecyclerView जैसे पूलिंग कंटेनर का हिस्सा हो. अगर आपके ऐप्लिकेशन में सिर्फ़ एक गतिविधि है और उसमें Compose का इस्तेमाल किया जा रहा है, तो डिफ़ॉल्ट रूप से यह व्यवहार ठीक रहेगा. हालांकि, अगर आपने अपने कोडबेस में Compose को धीरे-धीरे जोड़ा है, तो इस व्यवहार की वजह से कुछ मामलों में स्टेटस मिट सकता है.

ViewCompositionStrategy को बदलने के लिए, setViewCompositionStrategy() तरीके का इस्तेमाल करें और कोई दूसरी रणनीति उपलब्ध कराएं.

नीचे दी गई टेबल में, उन अलग-अलग स्थितियों के बारे में बताया गया है जिनमें ViewCompositionStrategy का इस्तेमाल किया जा सकता है:

`ViewCompositionStrategy`	जानकारी और इंटरऑपरेबिलिटी की स्थिति
`DisposeOnDetachedFromWindow`	जब विंडो से `ComposeView` को हटाया जाएगा, तब कंपोज़िशन को हटा दिया जाएगा. इसके बाद, `DisposeOnDetachedFromWindowOrReleasedFromPool` का इस्तेमाल किया गया. इंटरऑपरेबिलिटी की स्थिति: * `ComposeView` यह ज़रूरी नहीं है कि यह व्यू हैरारकी में एकमात्र एलिमेंट हो या मिक्स किए गए व्यू/कॉम्पोज़ स्क्रीन (फ़्रैगमेंट में नहीं) के संदर्भ में हो.
`DisposeOnDetachedFromWindowOrReleasedFromPool` (डिफ़ॉल्ट)	`DisposeOnDetachedFromWindow` की तरह ही, जब कंपोज़िशन, पूलिंग कंटेनर में न हो, जैसे कि `RecyclerView`. अगर यह पूलिंग कंटेनर में है, तो यह तब डिस्पोज हो जाएगा, जब पूलिंग कंटेनर खुद विंडो से अलग हो जाएगा या आइटम को खारिज किया जा रहा होगा (यानी पूल भर जाने पर). इंटरऑपरेबिलिटी की स्थिति: * `ComposeView` क्या यह व्यू हैरारकी में एकमात्र एलिमेंट है या मिक्स किए गए व्यू/कॉम्पोज़ स्क्रीन (फ़्रैगमेंट में नहीं) के संदर्भ में है. * पूलिंग कंटेनर में आइटम के तौर पर `ComposeView`, जैसे कि `RecyclerView`.
`DisposeOnLifecycleDestroyed`	दिए गए `Lifecycle` को नष्ट करने पर, कॉम्पोज़िशन को हटा दिया जाएगा. इंटरऑपरेबिलिटी की स्थिति * `ComposeView` फ़्रैगमेंट के व्यू में.
`DisposeOnViewTreeLifecycleDestroyed`	जब व्यू जिस अगली विंडो से जुड़ा है उसकी `ViewTreeLifecycleOwner.get` से वापस किए गए `LifecycleOwner` के मालिकाना हक वाले `Lifecycle` को नष्ट कर दिया जाएगा, तब कॉम्पोज़िशन को हटा दिया जाएगा. इंटरऑपरेबिलिटी का उदाहरण: * फ़्रैगमेंट के व्यू में `ComposeView`. * `ComposeView` ऐसे व्यू में, जिसकी लाइफ़साइकल के बारे में अभी तक पता नहीं है.

फ़्रैगमेंट में `ComposeView`

अगर आपको किसी फ़्रैगमेंट या मौजूदा व्यू लेआउट में, Compose यूज़र इंटरफ़ेस का कॉन्टेंट शामिल करना है, तो ComposeView का इस्तेमाल करें और उसका setContent() तरीका कॉल करें. ComposeView एक Android View है.

अपने एक्सएमएल लेआउट में, ComposeView को किसी अन्य View की तरह ही रखा जा सकता है:

<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

Kotlin के सोर्स कोड में, एक्सएमएल में तय किए गए लेआउट रिसॉर्स से लेआउट को इनफ़्लेट करें. इसके बाद, एक्सएमएल आईडी का इस्तेमाल करके ComposeView पाएं. साथ ही, होस्ट View के लिए सबसे सही कॉम्पोज़िशन रणनीति सेट करें और Compose का इस्तेमाल करने के लिए setContent() को कॉल करें.

class ExampleFragmentXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_example, container, false)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }
}InteroperabilityAPIsSnippets.kt

इसके अलावा, अपनी एक्सएमएल लेआउट फ़ाइल के लिए जनरेट की गई बाइंडिंग क्लास का रेफ़रंस देकर, ComposeView के रेफ़रंस पाने के लिए व्यू बाइंडिंग का भी इस्तेमाल किया जा सकता है:

class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null

    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}InteroperabilityAPIsSnippets.kt

दो मामूली अलग-अलग टेक्स्ट एलिमेंट, एक के ऊपर एक

पहली इमेज. यह उस कोड का आउटपुट दिखाता है जो Compose एलिमेंट को व्यू यूज़र इंटरफ़ेस (यूआई) की हैरारकी में जोड़ता है. "नमस्ते Android!" टेक्स्ट, TextView विजेट से दिखाया गया है. "नमस्ते लिखें!" टेक्स्ट, टेक्स्ट लिखें एलिमेंट के ज़रिए दिखाया जाता है.

अगर आपकी फ़ुल स्क्रीन 'लिखें' सुविधा की मदद से बनाई गई है, तो सीधे फ़्रैगमेंट में ComposeView को भी शामिल किया जा सकता है. इससे आपको एक्सएमएल लेआउट फ़ाइल का इस्तेमाल करने से पूरी तरह बचने में मदद मिलती है.

class ExampleFragmentNoXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }
}InteroperabilityAPIsSnippets.kt

एक ही लेआउट में कई `ComposeView` इंस्टेंस

अगर एक ही लेआउट में कई ComposeView एलिमेंट हैं, तो हर एक के पास एक यूनीक आईडी होना चाहिए, ताकि savedInstanceState काम कर सके.

class ExampleFragmentMultipleComposeView : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = LinearLayout(requireContext()).apply {
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_x
                // ...
            }
        )
        addView(TextView(requireContext()))
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_y
                // ...
            }
        )
    }
}InteroperabilityAPIsSnippets.kt

ComposeView आईडी, res/values/ids.xml फ़ाइल में तय किए जाते हैं:

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>ids.xml

लेआउट एडिटर में, कंपोज़ेबल की झलक देखें

लेआउट एडिटर में, ComposeView वाले एक्सएमएल लेआउट के लिए कंपोज़ेबल की झलक भी देखी जा सकती है. ऐसा करने से, यह देखा जा सकता है कि आपके कंपोज़ेबल का व्यू और Compose का लेआउट, दोनों में कैसा दिखता है.

मान लें कि आपको लेआउट एडिटर में इस कंपोज़ेबल को दिखाना है. ध्यान दें कि @Preview के साथ एनोटेट किए गए कॉम्पोज़ेबल, लेआउट एडिटर में झलक देखने के लिए सही होते हैं.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}InteroperabilityAPIsSnippets.kt

इस कॉम्पोज़ेबल को दिखाने के लिए, tools:composableName टूल एट्रिब्यूट का इस्तेमाल करें. साथ ही, इसकी वैल्यू को कॉम्पोज़ेबल के पूरी तरह से सही नाम पर सेट करें, ताकि लेआउट में इसकी झलक देखी जा सके.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/my_compose_view"
      tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview"
      android:layout_height="match_parent"
      android:layout_width="match_parent"/>

</LinearLayout>interop_layout_preview_composable.xml

लेआउट एडिटर में कंपोज़ेबल दिखाया गया

अगले चरण

अब आपके पास, व्यू में Compose का इस्तेमाल करने के लिए इंटरऑपरेबिलिटी एपीआई के बारे में जानकारी है. अब Compose में व्यू का इस्तेमाल करने का तरीका जानें.

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

ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
ध्यान देने वाली अन्य बातें
माइग्रेशन की रणनीति {:#migration-strategy}
लिखने और देखने की परफ़ॉर्मेंस की तुलना करना