Style API, Jetpack Compose में एलिमेंट और कॉम्पोनेंट को पसंद के मुताबिक बनाने या "स्टाइल करने" का एक नया तरीका है. पहले यह काम मॉडिफ़ायर की मदद से किया जाता था. इसे, पसंद के मुताबिक बनाने की बेहतर और आसान सुविधा देने के लिए डिज़ाइन किया गया है.
Styles API की मदद से, अलग-अलग फ़ॉर्म फ़ैक्टर के लिए ज़्यादा फ़्लेक्सिबिलिटी मिलती है. साथ ही, बेहतर परफ़ॉर्मेंस मिलती है. इसके अलावा, पसंद के मुताबिक डिज़ाइन सिस्टम बनाना आसान हो जाता है. अगर आपको पसंद के मुताबिक कॉम्पोनेंट की ज़रूरत नहीं है, तब भी Styles API आपके डिज़ाइन सिस्टम के लिए कई फ़ायदेमंद साबित हो सकता है.
यह ध्यान रखना ज़रूरी है कि स्टाइल, मॉडिफ़ायर की जगह नहीं लेते. हालांकि, ये स्टाइलिंग पैरामीटर की जगह ले सकते हैं. जैसे, पैडिंग और रंग. हमारा सुझाव है कि ज़्यादा फ़्लेक्सिबिलिटी और बेहतर परफ़ॉर्मेंस के लिए, पैरामीटर के बजाय स्टाइल का इस्तेमाल करें.
स्टाइल के फ़ायदे
- स्टेट के हिसाब से स्टाइल करना आसान: एपीआई, स्टाइल तय करने का ज़्यादा सटीक और डिक्लेरेटिव तरीका उपलब्ध कराता है.इससे अलग-अलग स्टेट (जैसे, होवर, फ़ोकस, प्रेस) के हिसाब से स्टाइल में बदलाव किया जा सकता है. मॉडिफ़ायर सिस्टम की तुलना में, इसमें बॉयलरप्लेट कोड का इस्तेमाल काफ़ी कम होता है.
- ऐनिमेटेड स्टेट ट्रांज़िशन बेहतर बनाना: Style API की मदद से, स्टेट के बीच स्टाइल प्रॉपर्टी का इन-बिल्ट ऐनिमेशन किया जा सकता है. इससे परफ़ॉर्मेंस बेहतर होती है. साथ ही,
animateColorAsStateके मौजूदा तरीके से होने वाले रीकंपोज़िशन से बचा जा सकता है. - कॉम्पोनेंट एपीआई को बेहतर बनाना: पसंद के मुताबिक बनाने के लिए, एक ही स्टाइल पैरामीटर उपलब्ध कराने से, कॉम्पोनेंट एपीआई का इस्तेमाल करना आसान हो जाता है. साथ ही, ज़्यादा फ़्लेक्सिबिलिटी मिलती है.
- मॉडिफ़ायर की तुलना में, कम रीकंपोज़िशन होने से बेहतर परफ़ॉर्मेंस मिलती है: स्टाइल, Compose के ड्रॉ और लेआउट फ़ेज़ में काम करते हैं. इसलिए, कंपोज़िशन फ़ेज़ में काम नहीं करते.
- एपीआई का ज़्यादा स्टैंडर्ड सेट: स्टाइल से जुड़ी प्रॉपर्टी के स्टैंडर्ड सेट की मदद से, किसी भी कॉम्पोनेंट को स्टाइल किया जा सकता है.
सबसे ज़रूरी सिद्धांत
| कॉन्सेप्ट | ब्यौरा |
|---|---|
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" }