@ExperimentalStyle API, Jetpack Compose में एलिमेंट और कॉम्पोनेंट को पसंद के मुताबिक बनाने या "स्टाइल करने" का नया तरीका है. पहले यह काम, मॉडिफ़ायर की मदद से किया जाता था. इसे ज़्यादा बेहतर और आसान तरीके से पसंद के मुताबिक बनाने के लिए डिज़ाइन किया गया है.
Styles API, अलग-अलग फ़ॉर्म फ़ैक्टर के लिए ज़्यादा सुविधाएं देता है. साथ ही, बेहतर परफ़ॉर्मेंस देता है और कस्टम डिज़ाइन सिस्टम को आसानी से बनाने की सुविधा देता है. अगर आपको कस्टम कॉम्पोनेंट की ज़रूरत नहीं है, तब भी Styles API आपके डिज़ाइन सिस्टम के लिए कई फ़ायदे देता है.
स्टाइल और मॉडिफ़ायर में यह अंतर है कि स्टाइल, मॉडिफ़ायर की जगह इस्तेमाल नहीं किए जा सकते. हालांकि, स्टाइलिंग पैरामीटर की जगह इनका इस्तेमाल किया जा सकता है. जैसे, पैडिंग और रंग. हमारा सुझाव है कि बेहतर परफ़ॉर्मेंस और ज़्यादा सुविधा के लिए, पैरामीटर की जगह स्टाइल का इस्तेमाल करें.
स्टाइल के फ़ायदे
- स्टेट के आधार पर स्टाइल तय करना आसान हो जाता है: एपीआई, स्टाइल तय करने का ज़्यादा सटीक और आसान तरीका उपलब्ध कराता है.ये स्टाइल, अलग-अलग स्टेट (जैसे, होवर किया गया, फ़ोकस किया गया, दबाया गया) के आधार पर बदलती हैं. इससे, मॉडिफ़ायर सिस्टम की तुलना में बॉयलरप्लेट कोड काफ़ी कम हो जाता है.
- ऐनिमेटेड स्टेट ट्रांज़िशन को बेहतर बनाता है: Style API, स्टाइल प्रॉपर्टी के लिए बिल्ट-इन ऐनिमेशन की सुविधा देता है. इससे अलग-अलग स्थितियों के बीच बेहतर परफ़ॉर्मेंस मिलती है. साथ ही,
animateColorAsStateके मौजूदा तरीके से होने वाले रीकंपोज़िशन से बचा जा सकता है. - कॉम्पोनेंट एपीआई को बेहतर बनाता है: पसंद के मुताबिक बनाने के लिए, एक ही स्टाइल पैरामीटर उपलब्ध कराया गया है. इससे कॉम्पोनेंट एपीआई को इस्तेमाल करना बहुत आसान हो जाता है. साथ ही, इसमें ज़्यादा विकल्प मिलते हैं.
- मॉडिफ़ायर की तुलना में, स्टाइल को कम बार फिर से कंपोज़ किया जाता है, जिससे बेहतर परफ़ॉर्मेंस मिलती है: स्टाइल, कंपोज़ के ड्रॉ और लेआउट फ़ेज़ में चलती हैं. ये कंपोज़िशन फ़ेज़ को छोड़ देती हैं.
- एपीआई का ज़्यादा स्टैंडर्ड सेट: स्टाइल से जुड़ी प्रॉपर्टी का स्टैंडर्ड सेट, किसी भी कॉम्पोनेंट को स्टाइल करने की सुविधा देता है.
सबसे ज़रूरी सिद्धांत
| कॉन्सेप्ट | ब्यौरा |
|---|---|
Style |
यह एक ऐसा इंटरफ़ेस है जो यूज़र इंटरफ़ेस (यूआई) एलिमेंट के दिखने के तरीके को तय करता है. इसमें स्टाइल की जा सकने वाली प्रॉपर्टी का स्टैंडर्ड सेट होता है. यह सीएसएस स्टाइल की तरह होता है और इसे स्थानीय तौर पर या थीम के ज़रिए पसंद के मुताबिक बनाया जा सकता है. स्टाइल एक-दूसरे को बदल देती हैं. किसी प्रॉपर्टी को दो बार सेट करने पर (जैसे, background()) एक फ़ाइनल वैल्यू मिलती है. |
StyleScope |
स्टाइल में मौजूद applyStyle() फ़ंक्शन के लिए रिसीवर स्कोप. यह विज़ुअल प्रॉपर्टी (पैडिंग, बैकग्राउंड, बॉर्डर वगैरह) को तय करने और मौजूदा StyleState को ऐक्सेस करने के लिए फ़ंक्शन उपलब्ध कराता है. |
StyleState |
यह स्टाइल में इस्तेमाल की जा सकने वाली स्थिति (जैसे, isEnabled, isPressed, isChecked, कस्टम स्थितियां) के बारे में जानकारी देता है. इससे शर्तों के हिसाब से स्टाइल तय की जा सकती है. |
शुरू करें: डिपेंडेंसी जोड़ना
अपने प्रोजेक्ट में एपीआई का इस्तेमाल करने के लिए, पक्का करें कि Jetpack Compose foundation का सबसे नया ऐल्फ़ा वर्शन इस्तेमाल किया जा रहा हो. इस्तेमाल की जाने वाली रिपॉज़िटरी की सूची में, अपनी settings.gradle.kts फ़ाइल में स्नैपशॉट मेवन रिपॉज़िटरी जोड़ें.
अपने libs.versions.toml या सीधे अपनी app/build.gradle.kts फ़ाइल में, Compose के वर्शन को 1.12.0-alpha03 पर सेट करें:
compose = "1.12.0-alpha03"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }