Jetpack Compose आपके Android प्रोजेक्ट में बताए गए संसाधनों को ऐक्सेस कर सकता है. यह दस्तावेज़ ऐसा करने के लिए कुछ API 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) )
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) )
स्ट्रिंग के बहुवचन (एक्सपेरिमेंट के तौर पर उपलब्ध)
किसी तय संख्या वाले बहुवचन को लोड करने के लिए, 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 ) )
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) )
रंग
अगर आपके ऐप्लिकेशन में, लिखने की सुविधा का इस्तेमाल बढ़ाया जा रहा है, तो colorResource
का इस्तेमाल करें
किसी रिसॉर्स एक्सएमएल फ़ाइल से रंग पाने के लिए एपीआई.
// In the res/colors.xml file // <color name="purple_200">#FFBB86FC</color> // In your Compose code Divider(color = colorResource(R.color.purple_200))
colorResource
स्थिर रंगों के साथ उम्मीद के मुताबिक काम करता है, लेकिन यह रंग को फ़्लैट कर देता है
स्टेट लिस्ट रिसॉर्स.
वेक्टर ऐसेट और इमेज रिसॉर्स
वेक्टर ड्रॉएबल या रास्टराइज़ किए गए आइटम को लोड करने के लिए, painterResource
एपीआई का इस्तेमाल करें
PNG जैसे ऐसेट फ़ॉर्मैट. आपको यह जानने की ज़रूरत नहीं है कि ड्रॉ करने लायक किस तरह का है, बस
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 )
painterResource
मुख्य साइट पर संसाधन के कॉन्टेंट को डिकोड और पार्स करता है
थ्रेड.
एनिमेटेड वेक्टर ड्रॉबल
ऐनिमेशन वाले लोड करने के लिए, 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 )
आइकॉन
Jetpack Compose, Icons
ऑब्जेक्ट के साथ आता है. यह ऑब्जेक्ट को इस्तेमाल करने का एंट्री पॉइंट होता है
इसमें मटीरियल आइकॉन
लिखें. आइकॉन की थीम पांच अलग-अलग होती हैं:
भरा गया,
आउटलाइन किया गया,
गोल आकार में,
टूटोन, और
शार्प. हर
थीम में समान आइकॉन हैं, लेकिन उसकी विज़ुअल शैली अलग है. आपको ऐसा करना चाहिए
आम तौर पर एक थीम चुनी जाती है और एक जैसी रखने के लिए उसका इस्तेमाल आपके सभी ऐप्लिकेशन में किया जाता है.
आइकॉन बनाने के लिए,
Icon
कंपोज़ेबल जो टिंट पर लागू होता है और आइकन से मेल खाते लेआउट साइज़ उपलब्ध कराता है.
Icon(Icons.Rounded.Menu, contentDescription = "Localized description")
सबसे ज़्यादा इस्तेमाल होने वाले कुछ आइकॉन इसके भाग के रूप में उपलब्ध हैं
androidx.compose.material
डिपेंडेंसी. किसी दूसरे मटीरियल आइकॉन का इस्तेमाल करने के लिए,
build.gradle
फ़ाइल में material-icons-extended
डिपेंडेंसी जोड़ें.
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
implementation 'androidx.compose.material:material-icons-extended'
}
फ़ॉन्ट
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() } }
Compose में डाउनलोड किए जा सकने वाले फ़ॉन्ट का इस्तेमाल करने के लिए, डाउनलोड किए जा सकने वाले फ़ॉन्ट पेज पर जाएं.
Compose में थीम बनाने की सुविधा में जाकर, टाइपोग्राफ़ी के बारे में ज़्यादा जानें दस्तावेज़
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- इमेज लोड हो रही हैं {:#loading-images}
- Compose में मटीरियल डिज़ाइन 2
- Compose में कस्टम डिज़ाइन सिस्टम जोड़ना