Jetpack Compose Glimmer में आइकॉन

इन XR डिवाइस के लिए

इस गाइड की मदद से, इन XR डिवाइस के लिए अनुभव बनाए जा सकते हैं.

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

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

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

आकार

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

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

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

रंग और रंगत

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

उदाहरण: सामान्य आइकॉन

यहां दिया गया कोड, एक सामान्य आइकॉन बनाता है:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

उदाहरण: रंग वाले आइकॉन

यहां दिया गया कोड, थीम के प्राइमरी कलर का इस्तेमाल करके, रंग वाला आइकॉन बनाता है:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

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

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

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

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

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