Jetpack Compose, Views के साथ इंटरऑपरेबिलिटी की सुविधा देता है. इसका मतलब है कि Views में Compose का इस्तेमाल किया जा सकता है और Compose में Views का इस्तेमाल किया जा सकता है. इससे, व्यू पर आधारित मौजूदा ऐप्लिकेशन में Compose को अपनाया जा सकता है. इसके लिए, सभी व्यू को तुरंत माइग्रेट करने की ज़रूरत नहीं होती.
माइग्रेशन के चरण
- प्लान बनाएं: माइग्रेशन करने के लिए, एक मज़बूत और चरण-दर-चरण प्लान बनाएं. हमारा सुझाव है कि माइग्रेशन के टास्क को प्राथमिकता के हिसाब से बैकलॉग में रखा जाए.
- माइग्रेशन के लिए, एक्सएमएल कैंडिडेट की पहचान करें : सबसे छोटे कॉम्पोनेंट की पहचान करें और उनसे शुरुआत करें. ये कॉम्पोनेंट, क्रम में लीफ़ नोड होते हैं. इसके बाद, माइग्रेशन प्लान को नीचे से ऊपर की ओर ले जाकर, क्रम में मौजूद कॉम्पोनेंट को धीरे-धीरे बढ़ाएं. शुरुआती माइग्रेशन के लिए, छोटे, स्टेटलेस, और कम डिपेंडेंसी वाले ऐप्लिकेशन सबसे सही होते हैं.
- हैरारकी का विश्लेषण करें: माइग्रेट करने के लिए एक्सएमएल व्यू की पहचान करने के बाद, उसके एक्सएमएल लेआउट स्ट्रक्चर और उसे लागू करने के तरीके का विश्लेषण करें.
- शुरुआती स्थिति कैप्चर करें: चुने गए एक्सएमएल व्यू की शुरुआती स्थिति कैप्चर करने के लिए, स्क्रीनशॉट टेस्ट चलाएं.
- ज़रूरी शर्तें: Compose की डिपेंडेंसी सेट अप करना यह पता लगाएं कि प्रोजेक्ट में Compose की डिपेंडेंसी और कंपाइलर सेट अप है या नहीं. अगर ऐसा नहीं होता है, तो Compose की डिपेंडेंसी और कंपाइलर सेट अप करें.
- ज़रूरी शर्त: Compose theming सेट अप करें पता लगाएं कि प्रोजेक्ट में Compose theming पहले से सेट अप है या नहीं. अगर ऐसा नहीं होता है, तो Compose में थीम बनाने का तरीका अपनाएं. ऐप्लिकेशन के इंटरऑप के दौरान, ओरिजनल एक्सएमएल थीमिंग को बनाए रखें. साथ ही, एक्सएमएल थीम को Compose पर माइग्रेट करें, ताकि यह समझा जा सके कि प्रोजेक्ट को पूरी तरह से Compose पर माइग्रेट करने तक, किस तरह के पैटर्न का इस्तेमाल करना है.
- एक्सएमएल व्यू को Compose में माइग्रेट करें: एक्सएमएल कोड को Compose में बदलना शुरू करें. इसके लिए, सही थीम लागू करें. साथ ही, माइग्रेट किए गए कंपोज़ेबल के लिए Compose की झलकियां जोड़ें. माइग्रेशन के सामान्य उदाहरणों के लिए, अन्य संसाधन देखें. उदाहरण के लिए, Compose में Lazy API पर माइग्रेट करने के लिए, RecyclerView को Compose पर माइग्रेट करना में दिया गया तरीका अपनाएं.
- इस्तेमाल की गई जगहों पर बदलाव करना: नए Compose कॉम्पोनेंट का इस्तेमाल करने के लिए, XML व्यू का इस्तेमाल की गई जगहों पर बदलाव करें. व्यू में कंपोज़ जोड़ने के लिए, व्यू में कंपोज़ करें में दिया गया तरीका अपनाएं. Compose में व्यू जोड़ने के लिए, Compose में व्यू में दिया गया तरीका अपनाएं.
- माइग्रेशन की पुष्टि करें: पुष्टि करें कि स्क्रीनशॉट टेस्ट में कैप्चर की गई शुरुआती स्थिति, माइग्रेट किए गए कंपोज़ेबल की कंपोज़ प्रीव्यू के जैसी ही है. अगर ये दोनों मेल नहीं खाते हैं, तो कंपोज़ किए जा सकने वाले नए यूज़र इंटरफ़ेस (यूआई) को दोहराएं और उसे बेहतर बनाएं, ताकि वह शुरुआती स्थिति के साथ अलाइन हो सके. नए कंपोज़ेबल के लिए, नए कंपोज़ यूज़र इंटरफ़ेस (यूआई) टेस्ट बनाएं.
- एक्सएमएल हटाना: जब नया माइग्रेट किया गया कंपोज़ेबल, शुरुआती एक्सएमएल यूज़र इंटरफ़ेस (यूआई) से मेल खाने लगे, तब पुराने एक्सएमएल व्यू कोड और उसके टेस्ट को हटा दें.
माइग्रेशन से जुड़े सामान्य उदाहरण
पुष्टि करें कि कंपोज़ेबल में dp और sp एक्सटेंशन (16.dp, 20.sp) का इस्तेमाल किया गया हो.
अगर एक्सएमएल व्यू में tools:text मौजूद है, तो इसे अलग @Preview
कंपोज़ेबल में इस्तेमाल करें.
एट्रिब्यूट से मॉडिफ़ायर में कन्वर्ज़न
ज़्यादातर एक्सएमएल एट्रिब्यूट, कंपोज़ेबल फ़ंक्शन की modifier चेन या पैरामीटर का हिस्सा बन जाते हैं.
| एक्सएमएल एट्रिब्यूट | लिखने की सुविधा के बराबर |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(डिफ़ॉल्ट सेटिंग, आम तौर पर मॉडिफ़ायर की ज़रूरत नहीं होती) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (आउटर पैडिंग) |
android:gravity="center" |
contentAlignment = Alignment.Center (बॉक्स) या horizontalAlignment / verticalArrangement (कॉलम/लाइन) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
if (visible) { ... } ब्लॉक में रैप करें |
स्टाइल माइग्रेट करना (styles.xml)
एक्सएमएल स्टाइल में, स्टाइल बनाने के लिए अक्सर कई एट्रिब्यूट को एक साथ जोड़ा जाता है. Compose में, ऐसा किसी खास स्टाइल वाले कंपोज़ेबल वैरिएशन को बनाकर किया जाता है.
स्टाइल और बेस कॉम्पोनेंट के हिसाब से नाम वाले अलग-अलग @Composable फ़ंक्शन उपलब्ध कराएं, ताकि उन कॉम्पोनेंट की स्टाइल और इस्तेमाल के उदाहरणों में अंतर दिखाया जा सके.
- पैटर्न: अगर कोई एक्सएमएल एलिमेंट कस्टम स्टाइल का इस्तेमाल करता है
(जैसे,
style="@style/MyPrimaryButton"), तो स्टाइल को इनलाइन तरीके से दोहराने की कोशिश न करें. इसके बजाय, किसी खास कंपोज़ेबल को बनाने का सुझाव दें. - उदाहरण:
- एक्सएमएल:
<Button style="@style/MyPrimaryButton" ... /> - लिखें:
MyPrimaryButton(onClick = { ... })
- एक्सएमएल:
- सामान्य एट्रिब्यूट ग्रुप: अगर कोई स्टाइल सामान्य मॉडिफ़ायर (जैसे कि पैडिंग + ऊंचाई) सेट करती है, तो उन्हें पढ़ने में आसान एक्सटेंशन प्रॉपर्टी या शेयर किए गए मॉडिफ़ायर वैरिएबल में एक्सट्रैक्ट करें.