Compose में संसाधन

Jetpack Compose, आपके Android प्रोजेक्ट में तय किए गए संसाधनों को ऐक्सेस कर सकता है. इस दस्तावेज़ में, Compose में उपलब्ध कुछ एपीआई के बारे में बताया गया है.

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

स्ट्रिंग

सबसे आम तौर पर इस्तेमाल होने वाले संसाधन, स्ट्रिंग होती हैं. stringResource एपीआई का इस्तेमाल करना का इस्तेमाल करें.

// In the res/values/strings.xml file
// <string name="compose">Jetpack Compose</string>

// In your Compose code
Text(
    text = stringResource(R.string.compose)
)
ResourcesSnippets.kt

stringResource, पोज़िशनल फ़ॉर्मैटिंग के साथ भी काम करता है.

// In the res/values/strings.xml file
// <string name="congratulate">Happy %1$s %2$d</string>

// In your Compose code
Text(
    text = stringResource(R.string.congratulate, "New Year", 2021)
)
ResourcesSnippets.kt

स्ट्रिंग के बहुवचन (एक्सपेरिमेंट के तौर पर उपलब्ध)

किसी तय संख्या वाले बहुवचन को लोड करने के लिए, pluralStringResource एपीआई का इस्तेमाल करें.

// In the res/strings.xml file
// <plurals name="runtime_format">
//    <item quantity="one">%1$d minute</item>
//    <item quantity="other">%1$d minutes</item>
// </plurals>

// In your Compose code
Text(
    text = pluralStringResource(
        R.plurals.runtime_format,
        quantity,
        quantity
    )
)
ResourcesSnippets.kt

pluralStringResource तरीके का इस्तेमाल करते समय, आपको काउंट को दो बार पास करना होगा अगर आपकी स्ट्रिंग में संख्या के साथ स्ट्रिंग फ़ॉर्मैटिंग शामिल है. उदाहरण के लिए, %1$d minutes स्ट्रिंग के लिए, पहला काउंट पैरामीटर, कई वस्तुओं के लिए सही स्ट्रिंग चुनता है और दूसरा काउंट पैरामीटर, %1$d प्लेसहोल्डर में डाला जाता है. अगर आपकी बहुवचन स्ट्रिंग में स्ट्रिंग फ़ॉर्मैटिंग शामिल नहीं है, तो आपको pluralStringResource के लिए तीसरा पैरामीटर.

बहुवचन के बारे में ज़्यादा जानकारी के लिए, quantity स्ट्रिंग दस्तावेज़.

डाइमेंशन

इसी तरह, किसी रिसॉर्स एक्सएमएल से डाइमेंशन पाने के लिए, dimensionResource एपीआई का इस्तेमाल करें फ़ाइल से लिए जाते हैं.

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>

// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)
ResourcesSnippets.kt

रंग

अगर आपके ऐप्लिकेशन में, लिखने की सुविधा का इस्तेमाल बढ़ाया जा रहा है, तो colorResource का इस्तेमाल करें किसी रिसॉर्स एक्सएमएल फ़ाइल से रंग पाने के लिए एपीआई.

// In the res/colors.xml file
// <color name="purple_200">#FFBB86FC</color>

// In your Compose code
Divider(color = colorResource(R.color.purple_200))
ResourcesSnippets.kt

colorResource, स्टैटिक कलर के साथ उम्मीद के मुताबिक काम करता है. हालांकि, यह कलर स्टेटस की सूची वाले रिसॉर्स को फ़्लैट कर देता है.

चेतावनी: हार्ड कोड किए गए रंगों के बजाय, थीम में मौजूद रंगों का इस्तेमाल करें. colorResource फ़ंक्शन का इस्तेमाल करके रंगों को ऐक्सेस किया जा सकता है. हालांकि, हमारा सुझाव है कि आप अपने ऐप्लिकेशन के रंगों को MaterialTheme में तय करें. MaterialTheme.colors.primary जैसे कॉम्पोज़ेबल से इन रंगों को ऐक्सेस किया जा सकता है. ज़्यादा जानें इसके बारे में ज़्यादा जानने के लिए, Compose के डिज़ाइन सिस्टम में जाएं दस्तावेज़.

वेक्टर ऐसेट और इमेज रिसॉर्स

वेक्टर ड्रॉबल या PNG जैसे रेस्टर किए गए ऐसेट फ़ॉर्मैट में से किसी एक को लोड करने के लिए, painterResource API का इस्तेमाल करें. आपको यह जानने की ज़रूरत नहीं है कि ड्रॉ करने लायक किस तरह का है, बस Image कंपोज़ेबल या paint मॉडिफ़ायर में painterResource का इस्तेमाल करें.

// Files in res/drawable folders. For example:
// - res/drawable-nodpi/ic_logo.xml
// - res/drawable-xxhdpi/ic_logo.png

// In your Compose code
Icon(
    painter = painterResource(id = R.drawable.ic_logo),
    contentDescription = null // decorative element
)
ResourcesSnippets.kt

painterResource मुख्य साइट पर संसाधन के कॉन्टेंट को डिकोड और पार्स करता है थ्रेड.

ध्यान दें: Context.getDrawable के उलट, painterResource सिर्फ़ BitmapDrawable और VectorDrawable प्लैटफ़ॉर्म टाइप को लोड कर सकता है Drawable.

एनिमेटेड वेक्टर ड्रॉबल

ऐनिमेशन वाले लोड करने के लिए, AnimatedImageVector.animatedVectorResource एपीआई का इस्तेमाल करें ड्रॉ करने लायक वेक्टर एक्सएमएल. यह तरीका, AnimatedImageVector इंस्टेंस दिखाता है. ऐनिमेशन वाली इमेज दिखाने के लिए, rememberAnimatedVectorPainter के तरीके का इस्तेमाल करके Painter बनाएं. इसका इस्तेमाल Image और Icon कॉम्पोज़ेबल में किया जा सकता है. rememberAnimatedVectorPainter तरीके का बूलियन atEnd पैरामीटर यह बताता है कि इमेज को सभी ऐनिमेशन के आखिर में बनाया जाना चाहिए या नहीं. अगर इस एट्रिब्यूट का इस्तेमाल बदलाव किए जा सकने वाले स्टेटस के साथ किया जाता है, तो इस वैल्यू में होने वाले बदलाव से उससे जुड़ा ऐनिमेशन ट्रिगर होता है.

// Files in res/drawable folders. For example:
// - res/drawable/ic_hourglass_animated.xml

// In your Compose code
val image =
    AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
val atEnd by remember { mutableStateOf(false) }
Icon(
    painter = rememberAnimatedVectorPainter(image, atEnd),
    contentDescription = null // decorative element
)
ResourcesSnippets.kt

आइकॉन

Jetpack Compose, Icons ऑब्जेक्ट के साथ आता है. यह ऑब्जेक्ट को इस्तेमाल करने का एंट्री पॉइंट होता है इसमें मटीरियल आइकॉन लिखें. आइकॉन की थीम पांच अलग-अलग होती हैं: भरा गया, आउटलाइन किया गया, गोल आकार में, टूटोन, और शार्प. हर थीम में समान आइकॉन हैं, लेकिन उसकी विज़ुअल शैली अलग है. आपको ऐसा करना चाहिए आम तौर पर एक थीम चुनी जाती है और एक जैसी रखने के लिए उसका इस्तेमाल आपके सभी ऐप्लिकेशन में किया जाता है.

आइकॉन बनाने के लिए, Icon कमपोज़ेबल का इस्तेमाल किया जा सकता है. यह टिनट लागू करता है और आइकॉन से मैच करने वाला लेआउट साइज़ देता है.

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
ResourcesSnippets.kt

सबसे ज़्यादा इस्तेमाल होने वाले कुछ आइकॉन इसके भाग के रूप में उपलब्ध हैं androidx.compose.material डिपेंडेंसी. किसी दूसरे मटीरियल आइकॉन का इस्तेमाल करने के लिए, build.gradle फ़ाइल में material-icons-extended डिपेंडेंसी जोड़ें.

dependencies {
  def composeBom = platform('androidx.compose:compose-bom:2025.02.00')
  implementation composeBom

  implementation 'androidx.compose.material:material-icons-extended'
}

ध्यान दें: आइकॉन में वही नाम होते हैं जो मटीरियल ने तय किए हैं. हालांकि, आइकॉन में उनके नाम ONE_case नाम को PascalCase में बदला गया. उदाहरण के लिए, add_alarm, AddAlarm हो जाता है. किसी संख्या से शुरू होने वाले आइकॉन, जैसे कि 360 के प्रीफ़िक्स _ होते हैं. _360 बनना.

चेतावनी: material-icons-extended एक बड़ी लाइब्रेरी है और यह आपके APK को प्रभावित कर सकती है साइज़. इस वजह से, प्रोडक्शन बिल्ड में R8/ProGuard का इस्तेमाल करके, इस्तेमाल नहीं किए गए संसाधन. इसके अलावा, बड़े साइज़ की वजह से, डेवलपमेंट के दौरान आपके प्रोजेक्ट को बनाने में लगने वाला समय और Android Studio में झलक लोड होने में लगने वाला समय बढ़ सकता है. वहीं दूसरी ओर, material-icons-extended आपको यह सुविधा सभी आइकॉन के नए वर्शन को तुरंत ऐक्सेस करके, तेज़ी से काम करती है. आप इस लाइब्रेरी का उपयोग करके आइकन के सोर्स कोड को कॉपी करके को ठीक करने के लिए है, या वैकल्पिक रूप से, Android Studio की इंपोर्ट वेक्टर ऐसेट सुविधा.

फ़ॉन्ट

Compose में फ़ॉन्ट इस्तेमाल करने के लिए, फ़ॉन्ट फ़ाइलों को सीधे अपने APK को res/font फ़ोल्डर में रखकर उनका इस्तेमाल करना.

हर फ़ॉन्ट को लोड करने के लिए Font एपीआई बनाएं और FontFamily के साथ इस्तेमाल किए जा सकते हैं. TextStyle इंस्टेंस अपना खुद का बनाएं Typography. कॉन्टेंट बनाने यह कोड यहां से लिया गया है: क्रेन सैंपल तैयार करें और उसका Typography.kt फ़ाइल से लिए जाते हैं.

// Define and load the fonts of the app
private val light = Font(R.font.raleway_light, FontWeight.W300)
private val regular = Font(R.font.raleway_regular, FontWeight.W400)
private val medium = Font(R.font.raleway_medium, FontWeight.W500)
private val semibold = Font(R.font.raleway_semibold, FontWeight.W600)

// Create a font family to use in TextStyles
private val craneFontFamily = FontFamily(light, regular, medium, semibold)

// Use the font family to define a custom typography
val craneTypography = Typography(
    titleLarge = TextStyle(
        fontFamily = craneFontFamily
    ) /* ... */
)

// Pass the typography to a MaterialTheme that will create a theme using
// that typography in the part of the UI hierarchy where this theme is used
@Composable
fun CraneTheme(content: @Composable () -> Unit) {
    MaterialTheme(typography = craneTypography) {
        content()
    }
}
ResourcesSnippets.kt

Compose में डाउनलोड किए जा सकने वाले फ़ॉन्ट इस्तेमाल करने के लिए, डाउनलोड किए जा सकने वाले फ़ॉन्ट पेज पर जाएं.

Compose में थीम बनाने की सुविधा में जाकर, टाइपोग्राफ़ी के बारे में ज़्यादा जानें दस्तावेज़