Jetpack Compose Glimmer को Jetpack Compose पर बनाया गया है. इसमें कंपोज़ेबल, कॉम्पोनेंट, व्यवहार, और एक थीम शामिल है. इन्हें डिसप्ले वाले एआई चश्मे के लिए डिज़ाइन किया गया है. Glimmer की मदद से, डिसप्ले वाले स्मार्ट ग्लास के लिए नेटिव यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है. इसके लिए, Compose का इस्तेमाल किया जाता है. इससे कम कोड, पावरफ़ुल टूल, और आसान Kotlin एपीआई की मदद से, ऐप्लिकेशन के अनुभव को बेहतर बनाया जा सकता है.
Jetpack Compose के Glimmer कंपोज़ेबल
Jetpack Compose Glimmer, एआई चश्मे के डिसप्ले के लिए बनाए गए @Composable फ़ंक्शन उपलब्ध कराता है. जैसे, Text, Button, और ListItem. यहां Jetpack Compose Glimmer कंपोज़ेबल की कुछ खास विशेषताएं दी गई हैं:
- स्टाइलिंग को आसान बनाया गया है:
Surfaceकॉम्पोनेंट, ऑप्टिकल डिसप्ले ऑप्टिमाइज़ेशन के लिए डिफ़ॉल्ट रूप से काले या पारदर्शी बैकग्राउंड पर सेट होते हैं. - बेहतर बनाए गए डिफ़ॉल्ट रंग: Jetpack Compose Glimmer, डिफ़ॉल्ट रूप से बैकग्राउंड के रंग के आधार पर कॉन्टेंट के रंग का हिसाब लगाता है. इसलिए, डेवलपर को टेक्स्ट के रंग मैन्युअल तरीके से सेट करने की ज़रूरत नहीं पड़ती. इससे बिना किसी अतिरिक्त काम के, टेक्स्ट को आसानी से पढ़ा जा सकता है.
अलग-अलग फ़ोकस: फ़ोकस को रिपल इफ़ेक्ट के बजाय, आउटलाइन पर आधारित विज़ुअल फ़ीडबैक का इस्तेमाल करके दिखाया जाता है. इससे साफ़ तौर पर दिखने में मदद मिलती है.
पहली इमेज. Jetpack Compose Glimmer में फ़ोकस की तीन स्थितियां. इनमें अंतर करने के लिए, आउटलाइन पर आधारित विज़ुअल फ़ीडबैक का इस्तेमाल किया जाता है. ऑप्टिमाइज़ किया गया एलिवेशन: Jetpack Compose Glimmer, विज़ुअल सेपरेशन के लिए सीमित बॉक्स-शैडो का इस्तेमाल करता है
दूसरी इमेज. Jetpack Compose Glimmer में एलिवेशन के पाँच लेवल दिए गए हैं. इनमें अंतर करने के लिए, बॉक्स-शैडो का इस्तेमाल किया गया है.
Jetpack Compose के Glimmer कॉम्पोनेंट
Jetpack Compose Glimmer में, कस्टम डिज़ाइन किए गए कॉम्पोनेंट का अपना सेट होता है. ये Jetpack Compose में मौजूद कॉम्पोनेंट की तरह ही होते हैं. हालांकि, इन्हें खास तौर पर डिसप्ले ग्लास की यूनीक विज़ुअल और इंटरैक्टिव ज़रूरतों के लिए ऑप्टिमाइज़ किया जाता है. Jetpack Compose Glimmer कॉम्पोनेंट को Jetpack Compose Glimmer के थीम के हिसाब से पसंद के मुताबिक बनाया जा सकता है. साथ ही, ये कॉम्पोनेंट Compose की लोअर-लेवल की सुविधाओं पर आधारित होते हैं. इसलिए, ये डिफ़ॉल्ट रूप से टैप और स्वाइप जैसे उपयोगकर्ता के इनपुट के तरीकों के साथ काम करते हैं.
किसी कॉम्पोनेंट को इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, यहां दी गई गाइड देखें:
- बटन
- कार्ड
- आइकॉन
- आइकॉन बटन
- सूचियां
- सूची में दिए गए आइटम
- सरफ़ेस
- टेक्स्ट
- टॉगल बटन
- टाइटल चिप
- वर्टिकल स्टैक
अगर इनमें से कोई कॉम्पोनेंट आपके इस्तेमाल के हिसाब से काम नहीं करता है, तो कस्टम कॉम्पोनेंट बनाने के लिए surface का इस्तेमाल किया जा सकता है. सरफ़ेस, Jetpack Compose Glimmer का सबसे बुनियादी बिल्डिंग ब्लॉक है. यह किसी खास, कस्टम डिज़ाइन या इंटरैक्शन के लिए एक खाली कैनवस होता है.
Jetpack Compose के ग्लिमर मॉडिफ़़ायर
Jetpack Compose Glimmer में मॉडिफ़ायर, Compose मॉडिफ़ायर की तरह ही काम करते हैं. इनकी मदद से, कंपोज़ेबल को बेहतर बनाया जा सकता है. इसके लिए, उनके लेआउट, लुक, और व्यवहार को पसंद के मुताबिक बनाया जा सकता है. Jetpack Compose Glimmer में, चश्मे के हिसाब से विज़ुअल फ़ीडबैक और परफ़ॉर्मेंस के लिए मॉडिफ़ायर और यूनीक डिफ़ॉल्ट शामिल हैं.
Jetpack Compose Glimmer की थीम
Jetpack Compose Glimmer में, डिसप्ले ग्लास के लिए खास थीमिंग सिस्टम होता है.
Jetpack Compose Glimmer की थीम में, रंगों, टाइपोग्राफ़ी, और शेप का आसान और ऑप्टिमाइज़ किया गया पैलेट लागू किया जाता है. इससे चश्मे को ज़्यादा से ज़्यादा लोगों तक पहुंचाने और उसे कम शब्दों में बताने में मदद मिलती है. Jetpack Compose Glimmer के सभी कॉम्पोनेंट को, चश्मे के लिए खास तौर पर बनाए गए इनपुट मेथड के साथ अपने-आप इंटिग्रेट होने के लिए डिज़ाइन किया गया है. Jetpack Compose
Glimmer की थीम को GlimmerTheme क्लास का इस्तेमाल करके दिखाया जाता है.
Jetpack Compose में मौजूद अन्य थीम की तरह ही, GlimmerTheme में कई सबसिस्टम शामिल हैं. इनके बारे में यहां दिया गया है. साथ ही, इनके कस्टम किए जा सकने वाले एट्रिब्यूट के बारे में भी बताया गया है:
- रंग
- टाइपोग्राफ़ी
- कॉम्पोनेंट के बीच की दूरी की वैल्यू
- आकार
- डेप्थ इफ़ेक्ट के लेवल
- आइकॉन के साइज़
रंग
Jetpack Compose Glimmer का कलर सिस्टम, ऐडिटिव डिसप्ले और असल माहौल के लिए डिज़ाइन किया गया है. स्टैंडर्ड Android थीम के उलट, GlimmerTheme
Colors में गहरे रंग के बैकग्राउंड को प्राथमिकता दी जाती है. साथ ही, इसमें कुछ हद तक पारदर्शिता और चटख रंग का इस्तेमाल किया जाता है, ताकि कॉन्टेंट को ऐसी रोशनी में भी आसानी से पढ़ा जा सके जो कभी कम तो कभी ज़्यादा होती है.
सिस्टम, तीन हिस्सों वाले पैलेट का इस्तेमाल करता है. इसमें प्राइमरी, सेकंडरी, और न्यूट्रल कलर होते हैं. न्यूट्रल रंगों का इस्तेमाल अक्सर, स्पैटियल यूज़र इंटरफ़ेस (यूआई) की फ़िज़िकल सतहों के तौर पर किया जाता है. वहीं, प्राइमरी और सेकंडरी कलर से इंटरैक्शन और ब्रैंडिंग के लिए, साफ़ तौर पर विज़ुअल क्यू मिलते हैं.
GlimmerTheme में मौजूद रंगों की खास जानकारी.टाइपोग्राफ़ी
Jetpack Compose Glimmer के टाइपोग्राफ़ी सिस्टम में, डिसप्ले ग्लास पर पढ़ने में आसानी और कम शब्दों में जानकारी देने के लिए, टाइपोग्राफ़ी की अलग-अलग स्टाइल शामिल हैं. इन स्टाइल को इस तरह से डिज़ाइन किया गया है कि टेक्स्ट का कंट्रास्ट ज़्यादा से ज़्यादा हो और टेक्स्ट को बोल्ड करके, अक्षरों के बीच ज़्यादा स्पेस देकर, और लाइन की ऊंचाई को सही करके, टेक्स्ट को ज़्यादा आसानी से पढ़ा जा सके. इन स्टाइल को GlimmerTheme.typography के ज़रिए दिखाया जाता है.
कॉम्पोनेंट के बीच की दूरी की वैल्यू
इन वैल्यू का इस्तेमाल, Jetpack Compose Glimmer कॉम्पोनेंट में एक जैसा स्पेस बनाए रखने के लिए किया जाता है. इसमें कॉम्पोनेंट की पैडिंग, कॉम्पोनेंट के बीच का स्पेस, और स्पेसिंग के अन्य एलिमेंट शामिल हैं. ध्यान दें कि इन वैल्यू को बदलने से, ज़्यादातर कॉम्पोनेंट के डिफ़ॉल्ट साइज़ पर असर पड़ता है.
आकार
Jetpack Compose Glimmer का शेप सिस्टम, कॉम्पोनेंट के लिए स्टैंडर्ड कॉर्नर ट्रीटमेंट और ज्यामितीय फ़ॉर्म का एक सेट तय करता है. इसे डिसप्ले ग्लास के यूज़र इंटरफ़ेस (यूआई) पर एक जैसी और कम से कम विज़ुअल लैंग्वेज बनाने के लिए डिज़ाइन किया गया है. सभी शेप, GlimmerTheme.shapes के ज़रिए दिखाए जाते हैं.
डेप्थ इफ़ेक्ट के लेवल
Jetpack Compose Glimmer कॉम्पोनेंट, हैरारकी दिखाने के लिए डेप्थ का इस्तेमाल करते हैं. इससे उन एलिमेंट को विज़ुअली अलग करने में मदद मिलती है जो दूसरे कार्ड के ऊपर दिखते हैं. डिसप्ले ग्लास में डेप्थ, z-स्पेस में प्लेसमेंट और शैडो का कॉम्बिनेशन होती है. सूची के आइटम जैसे ज़्यादातर हाई-लेवल कॉम्पोनेंट के लिए, फ़ोकस की स्थिति के आधार पर डेप्थ अपने-आप लागू हो जाती है. किसी कॉम्पोनेंट पर फ़ोकस करने पर, वह ज़्यादा गहरा हो जाता है. फ़ोकस हटने पर, वह अपनी सामान्य स्थिति में वापस आ जाता है. हालांकि, कस्टम कॉम्पोनेंट के साथ काम करने के लिए, Modifier.surface या depthEffect पर depthEffect पैरामीटर का इस्तेमाल किया जा सकता है.
आइकॉन के साइज़
Jetpack Compose Glimmer का आइकॉन सिस्टम, डिसप्ले ग्लास के यूज़र इंटरफ़ेस (यूआई) की आसान विज़ुअल लैंग्वेज के साथ इंटिग्रेट करने के लिए डिज़ाइन किया गया है. इसमें अक्सर, Material Symbols Rounded जैसे राउंड फ़ॉर्म का इस्तेमाल किया जाता है, ताकि टेक्स्ट को आसानी से पढ़ा जा सके.