Jetpack Compose Glimmer में आइकॉन

इन XR डिवाइस पर काम करने वाले ऐप्लिकेशन बनाए जा सकते हैं

इस गाइड की मदद से, इन XR डिवाइस के लिए ऐप्लिकेशन बनाए जा सकते हैं.

XR डिवाइस के टाइप के बारे में जानें →

XR डिवाइस के टाइप के बारे में जानें →

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

आकार

आइकॉन डिफ़ॉल्ट रूप से, LocalIconSize से तय किए गए साइज़ में दिखते हैं. हालांकि, खास साइज़ सेट करने के लिए, आइकॉन के तीन साइज़ का इस्तेमाल भी किया जा सकता है. इन साइज़ का इस्तेमाल, डिफ़ॉल्ट रूप से इन कॉन्टेक्स्ट के लिए भी किया जाता है:

आइकॉन के सोर्स

आइकॉन के सोर्स के तौर पर, ImageVector, ImageBitmap या Painter का इस्तेमाल किया जा सकता है. अपने आइकॉन तय करते समय, जहां तक हो सके ImageVector का इस्तेमाल करें, ताकि डिसप्ले ग्लास पर किसी भी स्केल में आइकॉन साफ़ दिखें.

रंग और टिंटिंग

• अपने-आप टिंट होना: आइकॉन का रंग, पैरंट सर्फ़ेस से मिले LocalContentColor के आधार पर तय होता है. जैसे, surface या Button.LocalContentColor
• मैन्युअल टिंटिंग: कोई खास रंग लागू करने के लिए, tint पैरामीटर का इस्तेमाल करें.
• एक से ज़्यादा रंगों वाली एसेट: ऐसे आइकॉन के लिए जिन्हें टिंट नहीं किया जाना चाहिए (जैसे, एक से ज़्यादा रंगों वाले ब्रैंड लोगो), tint = Color.Unspecified सेट करें.
• जेनरिक इमेज: फ़ोटोग्राफ़ या जेनरिक इमेज के लिए, आइकॉन के साइज़ और टिंटिंग के नियमों का पालन न करने पर, इसके बजाय स्टैंडर्ड androidx.compose.foundation.Image का इस्तेमाल करें.

उदाहरण: सर्फ़ेस में मौजूद बुनियादी आइकॉन

यहां दिए गए कोड से, एक गोलाकार सर्फ़ेस के अंदर मौजूद आइकॉन बनता है. इसमें थीम के प्राइमरी रंग का इस्तेमाल किया जाता है:

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

उदाहरण: अलग-अलग साइज़ के आइकॉन

यहां दिए गए कोड में, आइकॉन के अलग-अलग साइज़ दिखाए गए हैं:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

कोड के बारे में अहम बातें

• हर आइकॉन का साइज़, GlimmerTheme.iconSizes का इस्तेमाल करके, मॉडिफ़ायर के साथ, पसंद के मुताबिक बनाया जाता है. आइकॉन के लिए, डिफ़ॉल्ट वैल्यू GlimmerTheme.iconSizes.medium होती है. अपने यूज़र इंटरफ़ेस (यूआई) में एक जैसा अनुभव देने के लिए, हार्ड-कोडिंग वाली वैल्यू के बजाय इन साइज़ का इस्तेमाल करें.
• हर आइकॉन के लिए, स्थानीय भाषा में contentDescription उपलब्ध कराता है. ये ब्यौरे हमेशा दें, जब तक कि आइकॉन सिर्फ़ सजावट के लिए न हो.