Compose में संसाधन

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

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

स्ट्रिंग

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

// 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

रंग

अगर आपको अपने ऐप्लिकेशन में Compose का इस्तेमाल धीरे-धीरे करना है, तो 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 एपीआई का इस्तेमाल करें. आपको ड्रॉबल का टाइप जानने की ज़रूरत नहीं है. इसके लिए, 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 API का इस्तेमाल करें. यह तरीका, 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 ऑब्जेक्ट होता है. यह Compose में मटीरियल आइकॉन इस्तेमाल करने के लिए एंट्री पॉइंट होता है. आइकॉन की पांच अलग-अलग थीम होती हैं: भरी हुई, आउटलाइन वाली, राउंड आकार वाली, दो रंग वाली, और शार्प. हर थीम में एक जैसे आइकॉन होते हैं, लेकिन अलग-अलग विज़ुअल स्टाइल में. आम तौर पर, आपको एक थीम चुननी चाहिए और उसे अपने ऐप्लिकेशन में एक जैसा इस्तेमाल करना चाहिए.

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

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

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

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

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

ध्यान दें: आइकॉन के नाम वही रहते हैं जो Material ने तय किए हैं. हालांकि, उनके snake_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 किया जा सके. यहां दिया गया कोड, Crane के कंपोज़ सैंपल और उसकी 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 में थीम बनाने के दस्तावेज़ देखें