Style API, Jetpack Compose में एलिमेंट और कॉम्पोनेंट को पसंद के मुताबिक बनाने या "स्टाइल" करने का एक नया तरीका है. पहले, यह काम मॉडिफ़ायर की मदद से किया जाता था. इसे इस तरह डिज़ाइन किया गया है कि इसमें ज़्यादा बेहतर और आसान तरीके से कस्टमाइज़ेशन किया जा सके.
Styles API, अलग-अलग डिवाइसों के हिसाब से बेहतर परफ़ॉर्मेंस देता है. साथ ही, कस्टम डिज़ाइन सिस्टम को आसानी से बनाने की सुविधा देता है. अगर आपको कस्टम कॉम्पोनेंट की ज़रूरत नहीं है, तो भी Styles API आपके डिज़ाइन सिस्टम के लिए काफ़ी फ़ायदेमंद है.
एक अहम अंतर यह है कि स्टाइल, मॉडिफ़ायर की जगह नहीं लेते. हालांकि, वे स्टाइलिंग पैरामीटर की जगह ले लेते हैं, जैसे कि पैडिंग और रंग. हमारा सुझाव है कि ज़्यादा फ़्लेक्सिबिलिटी और बेहतर परफ़ॉर्मेंस के लिए, पैरामीटर के बजाय स्टाइल का इस्तेमाल करें.
Android स्किल
GitHub पर देखेंस्टाइल
android skills add stylesस्टाइल के फ़ायदे
- स्टेट के हिसाब से स्टाइलिंग को आसान बनाता है: एपीआई, अलग-अलग स्टेट (जैसे, कर्सर घुमाना, फ़ोकस करना, दबाना) के आधार पर बदलने वाली स्टाइल को तय करने का ज़्यादा सटीक और डिक्लेरेटिव तरीका उपलब्ध कराता है. इससे मॉडिफ़ायर सिस्टम की तुलना में, छोटे-मोटे बदलाव वाले कोड काफ़ी कम हो जाते हैं.
- ऐनिमेट किए गए स्टेट ट्रांज़िशन को बेहतर बनाता है: स्टाइल एपीआई, अलग-अलग स्टेट के बीच स्टाइल प्रॉपर्टी के लिए पहले से मौजूद ऐनिमेशन की सुविधा देता है. इससे परफ़ॉर्मेंस बेहतर होती है और मौजूदा
animateColorAsStateतरीके से होने वाले रीकंपोज़िशन से बचा जा सकता है. - कॉम्पोनेंट एपीआई को आसान बनाता है: पसंद के मुताबिक बनाने के लिए, एक स्टाइल पैरामीटर को शामिल करके, कॉम्पोनेंट एपीआई को काफ़ी आसान बनाया गया है. साथ ही, इससे ज़्यादा सुविधाएं मिलती हैं.
- मॉडिफ़ायर के मुकाबले बेहतर परफ़ॉर्मेंस के लिए, कम बार रीकंपोज़िशन करना: स्टाइल, Compose के ड्रॉ और लेआउट फ़ेज़ में चलते हैं. ये कंपोज़िशन फ़ेज़ को स्किप कर देते हैं.
- एपीआई का ज़्यादा स्टैंडर्ड सेट: स्टाइल से जुड़ी प्रॉपर्टी के स्टैंडर्ड सेट की मदद से, किसी भी कॉम्पोनेंट को स्टाइल किया जा सकता है.
सबसे ज़रूरी सिद्धांत
| कॉन्सेप्ट | ब्यौरा |
|---|---|
Style |
यह एक ऐसा इंटरफ़ेस है जो यूज़र इंटरफ़ेस (यूआई) एलिमेंट के दिखने का तरीका तय करता है. इसमें स्टाइल की जा सकने वाली प्रॉपर्टी का एक स्टैंडर्ड सेट होता है. यह सीएसएस स्टाइल की तरह है. इसे स्थानीय तौर पर या किसी थीम की मदद से पसंद के मुताबिक बनाया जा सकता है. स्टाइल एक-दूसरे को ओवरराइट करती हैं. किसी प्रॉपर्टी को दो बार सेट करने पर (जैसे, background()), एक ही फ़ाइनल वैल्यू मिलती है. |
StyleScope |
Style में applyStyle() फ़ंक्शन के लिए रिसीवर स्कोप. यह विज़ुअल प्रॉपर्टी (पैडिंग, बैकग्राउंड, बॉर्डर वगैरह) तय करने और मौजूदा StyleState को ऐक्सेस करने के लिए फ़ंक्शन उपलब्ध कराता है. |
StyleState |
यह स्टेट (जैसे, isEnabled, isPressed, isChecked, कस्टम स्टेट) उपलब्ध कराता है. इसका इस्तेमाल, स्टाइल में कंडिशनल स्टाइलिंग तय करने के लिए किया जा सकता है. |
शुरू करना: डिपेंडेंसी जोड़ना
अपने प्रोजेक्ट में एपीआई इस्तेमाल करने के लिए, पक्का करें कि Jetpack Compose Foundation के सबसे नए ऐल्फ़ा वर्शन का इस्तेमाल किया जा रहा हो. अपनी settings.gradle.kts फ़ाइल में, इस्तेमाल की जाने वाली रिपॉज़िटरी की सूची में स्नैपशॉट Maven रिपॉज़िटरी जोड़ें.
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" }