व्यू पर आधारित डिज़ाइन का इस्तेमाल करने वाले किसी मौजूदा ऐप्लिकेशन में, Compose पर आधारित यूज़र इंटरफ़ेस (यूआई) जोड़ा जा सकता है.
पूरी तरह से 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-only ऐप्लिकेशन में मौजूद कोड जैसा ही दिखता है.
ComposeView
के लिए ViewCompositionStrategy
ViewCompositionStrategy
यह तय करता है कि कंपोज़िशन को कब बंद किया जाना चाहिए. डिफ़ॉल्ट रूप से, ViewCompositionStrategy.Default
, कंपोज़िशन को तब हटा देता है, जब ComposeView
विंडो से अलग हो जाता है. हालांकि, ऐसा तब नहीं होता, जब कंपोज़िशन, RecyclerView
जैसे पूलिंग कंटेनर का हिस्सा हो. सिर्फ़ Compose का इस्तेमाल करने वाले सिंगल-ऐक्टिविटी ऐप्लिकेशन में, यह डिफ़ॉल्ट व्यवहार आपकी ज़रूरत के मुताबिक होता है. हालांकि, अगर अपने कोडबेस में Compose को धीरे-धीरे जोड़ा जा रहा है, तो इस व्यवहार की वजह से कुछ स्थितियों में स्टेट का डेटा मिट सकता है.
ViewCompositionStrategy
को बदलने के लिए, setViewCompositionStrategy()
तरीके को कॉल करें और कोई दूसरी रणनीति दें.
नीचे दी गई टेबल में, उन अलग-अलग स्थितियों के बारे में खास जानकारी दी गई है जिनमें ViewCompositionStrategy
का इस्तेमाल किया जा सकता है:
ViewCompositionStrategy |
जानकारी और इंटरऑपरेबिलिटी का उदाहरण |
---|---|
DisposeOnDetachedFromWindow |
जब विंडो से ComposeView अलग हो जाएगा, तब कंपोज़िशन को हटा दिया जाएगा. अब इसकी जगह DisposeOnDetachedFromWindowOrReleasedFromPool का इस्तेमाल किया जाता है.इंटरऑप का उदाहरण: * ComposeView यह व्यू हैरारकी में मौजूद इकलौता एलिमेंट है या व्यू/कंपोज़ स्क्रीन (फ़्रैगमेंट में नहीं) के संदर्भ में है. |
DisposeOnDetachedFromWindowOrReleasedFromPool (डिफ़ॉल्ट) |
DisposeOnDetachedFromWindow की तरह, जब कंपोज़िशन किसी पूलिंग कंटेनर में नहीं होती है, जैसे कि RecyclerView . अगर यह पूलिंग कंटेनर में है, तो यह तब बंद हो जाएगा, जब पूलिंग कंटेनर विंडो से अलग हो जाएगा या जब आइटम को खारिज किया जा रहा हो (यानी, जब पूल भर गया हो).इंटरऑप का उदाहरण: * ComposeView चाहे यह View हैरारकी में मौजूद इकलौता एलिमेंट हो या मिक्स्ड View/Compose स्क्रीन के कॉन्टेक्स्ट में हो (Fragment में नहीं).* ComposeView को RecyclerView जैसे पूलिंग कंटेनर में आइटम के तौर पर इस्तेमाल किया जाता है. |
DisposeOnLifecycleDestroyed |
Lifecycle के बंद होने पर, कंपोज़िशन बंद हो जाएगी.इंटरऑप का उदाहरण * ComposeView फ़्रैगमेंट के व्यू में. |
DisposeOnViewTreeLifecycleDestroyed |
जब View जिस अगली विंडो से अटैच है उसके ViewTreeLifecycleOwner.get से मिले LifecycleOwner का मालिकाना हक रखने वाले Lifecycle को डिस्ट्रॉय किया जाता है, तब कंपोज़िशन को डिस्पोज़ कर दिया जाता है.इंटरऑप का उदाहरण: * फ़्रैगमेंट के व्यू में ComposeView .* किसी ऐसे व्यू में ComposeView जिसका लाइफ़साइकल अभी तक पता नहीं चला है. |
ComposeView
फ़्रैगमेंट में
अगर आपको किसी फ़्रैगमेंट या मौजूदा व्यू लेआउट में Compose UI कॉन्टेंट शामिल करना है, तो 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
के लिए कंपोज़िशन की ऐसी रणनीति सेट करें जो सबसे सही हो. इसके बाद, कंपोज़ का इस्तेमाल करने के लिए 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 } }
पहली इमेज. इसमें, View यूज़र इंटरफ़ेस (यूआई) के क्रम में Compose एलिमेंट जोड़ने वाले कोड का आउटपुट दिखाया गया है. "Hello Android!" टेक्स्ट को TextView
विजेट की मदद से दिखाया गया है. "Hello Compose!" टेक्स्ट, 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
होना चाहिए. ऐसा करने से, आपको यह पता चलता है कि व्यू और कंपोज़ लेआउट के मिक्स में आपके कंपोज़ेबल कैसे दिखते हैं.
मान लें कि आपको लेआउट एडिटर में इस कंपोज़ेबल को दिखाना है. ध्यान दें कि @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>
अगले चरण
अब आपको Views में Compose का इस्तेमाल करने के लिए, इंटरऑपरेबिलिटी एपीआई के बारे में पता चल गया है. इसलिए, Compose में Views का इस्तेमाल करने का तरीका जानें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- अन्य बातें
- माइग्रेशन की रणनीति {:#migration-strategy}
- ईमेल लिखने और देखने की परफ़ॉर्मेंस की तुलना करना