Compose पर आधारित यूज़र इंटरफ़ेस (यूआई) को, व्यू पर आधारित डिज़ाइन का इस्तेमाल करने वाले किसी मौजूदा ऐप्लिकेशन में जोड़ा जा सकता है.
नई और पूरी तरह से लिखने के तरीके पर आधारित स्क्रीन बनाने के लिए, अपनी गतिविधि से 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!") }
यह कोड, सिर्फ़ Compose ऐप्लिकेशन में दिखने वाले कोड जैसा ही दिखता है.
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 |
कंपोज़िशन को तब नष्ट किया जाएगा, जब LifecycleOwner के मालिकाना हक वाले Lifecycle को अगली विंडो से ViewTreeLifecycleOwner.get के ज़रिए दिखाया जाएगा, जहां से व्यू अटैच किया गया है.इंटरऑप स्थिति: * फ़्रैगमेंट के व्यू में 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>
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 } }
इसके अलावा, 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 } }
पहली इमेज. यह उस कोड का आउटपुट दिखाता है जो Compose एलिमेंट को व्यू यूज़र इंटरफ़ेस (यूआई) की हैरारकी में जोड़ता है. "नमस्ते Android!" टेक्स्ट, TextView
विजेट से दिखाया गया है. "नमस्ते Compose!" टेक्स्ट, Compose टेक्स्ट एलिमेंट से दिखाया जाता है.
अगर आपकी फ़ुल स्क्रीन 'लिखें' सुविधा की मदद से बनाई गई है, तो सीधे फ़्रैगमेंट में 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!") } } } } }
एक ही लेआउट में कई 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 // ... } ) } }
ComposeView
आईडी, res/values/ids.xml
फ़ाइल में तय किए जाते हैं:
<resources> <item name="compose_view_x" type="id" /> <item name="compose_view_y" type="id" /> </resources>
लेआउट एडिटर में, कॉम्पोज़ेबल की झलक देखना
ComposeView
वाले एक्सएमएल लेआउट के लिए, लेआउट एडिटर में भी कॉम्पोज़ेबल की झलक देखी जा सकती है. ऐसा करने से, आपको यह देखने का मौका मिलता है कि आपके कॉम्पोज़ेबल, व्यू और Compose लेआउट के साथ कैसे दिखते हैं.
मान लें कि आपको लेआउट एडिटर में यह कॉम्पोज़ेबल दिखाना है. ध्यान दें कि @Preview
के साथ एनोटेट किए गए कॉम्पोज़ेबल, लेआउट एडिटर में झलक देखने के लिए सही होते हैं.
@Preview @Composable fun GreetingPreview() { Greeting(name = "Android") }
इस कॉम्पोज़ेबल को दिखाने के लिए, 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>
अगले चरण
अब आपके पास, व्यू में Compose का इस्तेमाल करने के लिए इंटरऑपरेबिलिटी एपीआई के बारे में जानकारी है. अब Compose में व्यू का इस्तेमाल करने का तरीका जानें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ध्यान देने वाली अन्य बातें
- माइग्रेशन की रणनीति {:#migration-strategy}
- लिखने और देखने की परफ़ॉर्मेंस की तुलना करना