Jetpack Compose Glimmer में क्या-क्या शामिल है

XR डिवाइसों के लिए, Jetpack Compose Glimmer का इस्तेमाल करना
इस गाइड की मदद से, इन XR डिवाइसों के लिए अनुभव तैयार किए जा सकते हैं.
डिसप्ले वाले स्मार्ट ग्लास

Jetpack Compose Glimmer, Jetpack Compose पर बना है. इसमें कंपोज़ेबल, कॉम्पोनेंट, बिहेवियर, और एक थीम शामिल है. इन्हें डिसप्ले वाले स्मार्ट ग्लास के लिए डिज़ाइन किया गया है. Glimmer की मदद से, Compose का इस्तेमाल करके, डिसप्ले वाले स्मार्ट ग्लास के लिए नेटिव यूज़र इंटरफ़ेस (यूआई) बनाया जा सकता है. इससे कम कोड, पावरफ़ुल टूल, और आसान Kotlin एपीआई की मदद से, आपके ऐप्लिकेशन के अनुभव को बेहतर बनाया जा सकता है.

Jetpack Compose Glimmer के कंपोज़ेबल

Jetpack Compose Glimmer, @Composable फ़ंक्शन उपलब्ध कराता है. इन्हें AI डिसप्ले वाले स्मार्ट ग्लास के लिए डिज़ाइन किया गया है. जैसे, 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's थीम के हिसाब से पसंद के मुताबिक बनाया जा सकता है. साथ ही, ये कॉम्पोनेंट, Compose की लोअर-लेवल की सुविधाओं पर बने होते हैं. इसलिए, ये डिफ़ॉल्ट रूप से टैप और स्वाइप जैसे उपयोगकर्ता के इनपुट के तरीकों के साथ काम करते हैं.

तीसरी इमेज. Jetpack Compose Glimmer में कई कॉम्पोनेंट शामिल हैं. इनकी मदद से, डिसप्ले वाले स्मार्ट ग्लास के लिए ऑप्टिमाइज़ किए गए ऐप्लिकेशन के अनुभव तैयार किए जा सकते हैं.

किसी कॉम्पोनेंट का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, यहां दी गई गाइड देखें:

अगर इनमें से कोई हाई-लेवल कॉम्पोनेंट, आपके इस्तेमाल के उदाहरण के लिए काम नहीं करता है, तो कस्टम कॉम्पोनेंट बनाने के लिए, surface का इस्तेमाल किया जा सकता है. सरफ़ेस, Jetpack Compose Glimmer में सबसे बुनियादी बिल्डिंग ब्लॉक होते हैं. ये एक खाली कैनवस की तरह होते हैं. इनका इस्तेमाल, किसी खास, कस्टम डिज़ाइन या इंटरैक्शन के लिए किया जा सकता है.

Jetpack Compose Glimmer के मॉडिफ़ायर

Jetpack Compose Glimmer में मॉडिफ़ायर, Compose मॉडिफ़ायर की तरह काम करते हैं. इनकी मदद से, कंपोज़ेबल के लेआउट, दिखने के तरीके, और बिहेवियर को पसंद के मुताबिक बनाकर, उन्हें बेहतर बनाया जा सकता है. Jetpack Compose Glimmer में, स्मार्ट ग्लास के लिए खास विज़ुअल फ़ीडबैक और परफ़ॉर्मेंस के लिए मॉडिफ़ायर और यूनीक डिफ़ॉल्ट शामिल हैं.

Jetpack Compose Glimmer की थीम

Jetpack Compose Glimmer में, डिसप्ले वाले स्मार्ट ग्लास के लिए एक खास थीमिंग सिस्टम होता है. Jetpack Compose Glimmer की थीम में, रंगों, टाइपोग्राफ़ी, और आकार का आसान और ऑप्टिमाइज़ किया गया पैलेट शामिल होता है. इससे डिसप्ले वाले स्मार्ट ग्लास के लिए, ज़्यादा से ज़्यादा विज़िबिलिटी और संक्षिप्तता मिलती है. Jetpack Compose Glimmer के सभी कॉम्पोनेंट, स्मार्ट ग्लास के लिए खास इनपुट के तरीकों के साथ ऑटोमैटिक इंटिग्रेशन के लिए डिज़ाइन किए गए हैं. Jetpack Compose Glimmer's थीम, GlimmerTheme क्लास का इस्तेमाल करके दिखाई जाती है.

Jetpack Compose में अन्य थीम की तरह, GlimmerTheme में कई सबसिस्टम शामिल हैं. इनके बारे में, यहां दिए गए सेक्शन में, पसंद के मुताबिक बनाए जा सकने वाले एट्रिब्यूट के साथ जानकारी दी गई है:

  • रंग
  • टाइपोग्राफ़ी
  • कॉम्पोनेंट के बीच स्पेस की वैल्यू
  • आकार
  • डेप्थ इफ़ेक्ट के लेवल
  • आइकॉन के साइज़

रंग

Jetpack Compose Glimmer का कलर सिस्टम, ऐडिटिव डिसप्ले और असली एनवायरमेंट के लिए डिज़ाइन किया गया है. स्टैंडर्ड Android थीम के उलट, GlimmerTheme Colors में, सेमी-ट्रांसपेरेंसी और वाइब्रेंट एक्सेंट वाले डार्क बैकग्राउंड को प्राथमिकता दी जाती है. इससे यह पक्का किया जाता है कि असली दुनिया की अनिश्चित लाइटिंग में भी कॉन्टेंट आसानी से पढ़ा जा सके.

इस सिस्टम में, प्राइमरी, सेकंडरी, और न्यूट्रल रंगों वाला तीन हिस्सों का पैलेट इस्तेमाल किया जाता है. स्पेशल यूज़र इंटरफ़ेस (यूआई) की फ़िज़िकल सरफ़ेस के तौर पर, अक्सर न्यूट्रल रंगों का इस्तेमाल किया जाता है. वहीं, प्राइमरी और सेकंडरी रंगों से, इंटरैक्शन और ब्रैंडिंग के लिए साफ़ विज़ुअल क्लू मिलते हैं.

चौथी इमेज. GlimmerTheme में मौजूद रंगों की खास जानकारी.

टाइपोग्राफ़ी

Jetpack Compose Glimmer के टाइपोग्राफ़ी सिस्टम में, डिसप्ले वाले स्मार्ट ग्लास पर टेक्स्ट को आसानी से पढ़ने और संक्षिप्त बनाने के लिए, अलग-अलग टाइपोग्राफ़ी स्टाइल शामिल हैं. इन स्टाइल को, कंट्रास्ट को ज़्यादा से ज़्यादा बढ़ाने और टेक्स्ट को आसानी से पढ़ने के लिए डिज़ाइन किया गया है. इसके लिए, बोल्डर वेट, ज़्यादा लेटर स्पेसिंग, और सही लाइन हाइट का इस्तेमाल किया जाता है. ये स्टाइल, GlimmerTheme.typographyके ज़रिए दिखाई जाती हैं.

पांचवी इमेज. Jetpack Compose Glimmer की छह टाइपोग्राफ़ी स्टाइल का उदाहरण.

कॉम्पोनेंट के बीच स्पेस की वैल्यू

इन वैल्यू का इस्तेमाल, Jetpack Compose Glimmer के कॉम्पोनेंट के बीच एक जैसा स्पेस पक्का करने के लिए किया जाता है. इसमें कॉम्पोनेंट के पैडिंग, कॉम्पोनेंट के बीच स्पेस, और स्पेस वाले अन्य एलिमेंट शामिल हैं. ध्यान दें कि इन वैल्यू में बदलाव करने से, ज़्यादातर कॉम्पोनेंट के डिफ़ॉल्ट साइज़ पर असर पड़ता है.

आकार

Jetpack Compose Glimmer का आकार सिस्टम, कॉम्पोनेंट के लिए कॉर्नर ट्रीटमेंट और ज्यामितीय फ़ॉर्म के सेट को तय करता है. इसे डिसप्ले वाले स्मार्ट ग्लास के यूज़र इंटरफ़ेस (यूआई) पर, एक जैसा और कम से कम विज़ुअल लैंग्वेज बनाने के लिए डिज़ाइन किया गया है. सभी आकार, GlimmerTheme.shapes के ज़रिए दिखाए जाते हैं.

छठी इमेज. Jetpack Compose Glimmer में, बड़े, मीडियम, और छोटे आकार का उदाहरण.

डेप्थ इफ़ेक्ट के लेवल

Jetpack Compose Glimmer के कॉम्पोनेंट, क्रम दिखाने के लिए डेप्थ का इस्तेमाल करते हैं. इससे उन एलिमेंट को विज़ुअली अलग करने में मदद मिलती है जो अन्य कार्ड के ऊपर (सबसे ऊपर) दिखते हैं. डिसप्ले वाले स्मार्ट ग्लास पर डेप्थ, z-स्पेस में प्लेसमेंट और शैडो का कॉम्बिनेशन होती है. ज़्यादातर हाई-लेवल कॉम्पोनेंट के लिए, जैसे कि सूची में दिए गए आइटम, फ़ोकस की स्थिति के हिसाब से डेप्थ अपने-आप लागू हो जाती है. जब किसी कॉम्पोनेंट पर फ़ोकस किया जाता है, तो उसकी डेप्थ बढ़ जाती है. जब फ़ोकस हट जाता है, तो वह अपनी सामान्य स्थिति में वापस आ जाता है. हालांकि, कस्टम कॉम्पोनेंट के साथ काम करने के लिए, depthEffect पैरामीटर का इस्तेमाल Modifier.surface या depthEffect पर किया जा सकता है.

आइकॉन के साइज़

Jetpack Compose Glimmer का आइकॉन सिस्टम, डिसप्ले वाले स्मार्ट ग्लास के यूज़र इंटरफ़ेस (यूआई) की आसान विज़ुअल लैंग्वेज के साथ इंटिग्रेट करने के लिए डिज़ाइन किया गया है. अक्सर, ऑप्टिमाइज़ की गई रीडेबिलिटी के लिए, Material Symbols Rounded जैसे राउंड फ़ॉर्म का इस्तेमाल किया जाता है.