ऐसे मौजूदा ऐप्लिकेशन में कंपोज़ की सुविधा वाला यूज़र इंटरफ़ेस (यूआई) जोड़ा जा सकता है जिसमें व्यू-आधारित डिज़ाइन का इस्तेमाल किया जाता हो.
पूरी तरह से लिखने पर आधारित नई स्क्रीन बनाने के लिए, अपने
activity, 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!") }
यह कोड ठीक वैसा ही दिखता है जैसा आपको सिर्फ़ कंपोज़ की सुविधा वाले किसी ऐप्लिकेशन में मिलेगा.
ComposeView
के लिए ViewCompositionStrategy
ViewCompositionStrategy
तय करता है कि कंपोज़िशन को कब नष्ट किया जाना चाहिए. डिफ़ॉल्ट,
ViewCompositionStrategy.Default
कंपोज़िशन को तब नष्ट करता है, जब
ComposeView
यह विंडो से अलग हो सकती है, बशर्ते वह किसी पूलिंग कंटेनर का हिस्सा न हो, जैसे कि
RecyclerView
. किसी एकल-गतिविधि लेखन ऐप में, यह डिफ़ॉल्ट व्यवहार यह है
आपको क्या चाहिए, अगर इसकी सेटिंग में समय-समय पर
कोड बेस में, इस व्यवहार से कुछ मामलों में स्थिति खो सकती है.
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
अगर आपको किसी फ़्रैगमेंट या किसी मौजूदा व्यू में, 'यूज़र इंटरफ़ेस (यूआई) कॉन्टेंट लिखें' सुविधा को शामिल करना है
लेआउट, 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 } }
पहला डायग्राम. यह उस कोड का आउटपुट दिखाता है, जो किसी वीडियो में Compose एलिमेंट जोड़ता है
यूज़र इंटरफ़ेस (यूआई) की हैरारकी देखें. "नमस्ते Android!" टेक्स्ट के ज़रिए दिखाया जाता है
TextView
विजेट. "नमस्ते लिखें!" टेक्स्ट के ज़रिए दिखाया जाता है
टेक्स्ट एलिमेंट लिखें.
अगर फ़ुल स्क्रीन मोड चालू है, तो सीधे फ़्रैगमेंट में ComposeView
को भी शामिल किया जा सकता है
को Compose की मदद से बनाया गया है. इससे एक्सएमएल लेआउट फ़ाइल का इस्तेमाल करने से बचा जा सकता है.
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>
अगले चरण
अब आपको व्यू में कंपोज़ की सुविधा इस्तेमाल करने के लिए इंटरऑपरेबिलिटी एपीआई के बारे में पता है, इसलिए जानें Compose में व्यू इस्तेमाल करने का तरीका.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ध्यान देने वाली अन्य बातें
- माइग्रेशन की रणनीति {:#migration-strategy}
- लिखें और देखें की परफ़ॉर्मेंस की तुलना करना