Style 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.11.0-alpha06 पर सेट करें:
compose = "1.11.0-alpha06"
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" }