Image
कंपोज़ेबल (contentScale
, colorFilter
) पर मौजूद प्रॉपर्टी का इस्तेमाल करके, इमेज को पसंद के मुताबिक बनाया जा सकता है. Image
पर अलग-अलग इफ़ेक्ट लागू करने के लिए, मौजूदा Modifiers
का भी इस्तेमाल किया जा सकता है. सिर्फ़ Image
कॉम्पोनेंट के साथ ही नहीं, किसी भी कॉम्पोनेंट के साथ मॉडिफ़ायर का इस्तेमाल किया जा सकता है. वहीं, contentScale
और colorFilter
, Image
कॉम्पोनेंट के लिए साफ़ तौर पर तय किए गए पैरामीटर हैं.
कॉन्टेंट का स्केल
किसी इमेज को उसकी बाउंड्री के अंदर काटने या स्केल करने के तरीके को बदलने के लिए, contentScale
विकल्प तय करें. अगर आपने contentScale
विकल्प नहीं चुना है, तो डिफ़ॉल्ट रूप से ContentScale.Fit
का इस्तेमाल किया जाएगा.
नीचे दिए गए उदाहरण में, इमेज कॉम्पोज़ेबल का साइज़ 150dp और बॉर्डर के साथ सीमित है. साथ ही, नीचे दी गई टेबल में अलग-अलग ContentScale
विकल्प दिखाने के लिए, Image
कॉम्पोज़ेबल का बैकग्राउंड पीले रंग पर सेट किया गया है.
val imageModifier = Modifier .size(150.dp) .border(BorderStroke(1.dp, Color.Black)) .background(Color.Yellow) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Fit, modifier = imageModifier )
ContentScale
के अलग-अलग विकल्प सेट करने पर, अलग-अलग आउटपुट मिलेंगे. यहां एक टेबल दी गई है. इससे आपको अपनी ज़रूरत के हिसाब से सही ContentScale
मोड चुनने में मदद मिल सकती है:
सोर्स इमेज | ||
ContentScale |
नतीजा - पोर्ट्रेट इमेज: | नतीजा - लैंडस्केप इमेज: |
ContentScale.Fit : आसपेक्ट रेशियो (डिफ़ॉल्ट) को बनाए रखते हुए, इमेज को एक जैसा स्केल करें. अगर कॉन्टेंट का साइज़ साइज़ से छोटा है, तो इमेज को सीमाओं में फ़िट करने के लिए स्केल किया जाता है. |
||
ContentScale.Crop : इमेज को उपलब्ध जगह पर बीच में काटें. |
||
ContentScale.FillHeight : आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की ऊंचाई से मेल खा सकें. |
||
ContentScale.FillWidth : आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की चौड़ाई से मेल खा सकें. |
||
ContentScale.FillBounds : डेस्टिनेशन के बॉर्डर को भरने के लिए, कॉन्टेंट को वर्टिकल और हॉरिज़ॉन्टल तौर पर अलग-अलग स्केल करें. (ध्यान दें: अगर इमेज को ऐसे कंटेनर में डाला जाता है जो इमेज के आसपेक्ट रेशियो से मेल नहीं खाते, तो इमेज खराब हो जाएंगी) |
||
ContentScale.Inside : डेस्टिनेशन के बाउंड में आसपेक्ट रेशियो बनाए रखने के लिए, सोर्स को स्केल करें. अगर सोर्स, दोनों डाइमेंशन में डेस्टिनेशन से छोटा या उसके बराबर है, तो यह `कोई नहीं` की तरह काम करता है. कॉन्टेंट हमेशा इन सीमाओं के अंदर रहेगा. अगर सामग्री सीमा से छोटी है, तो कोई स्केलिंग लागू नहीं होगी. |
सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है: | सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है: |
ContentScale.None : सोर्स पर कोई स्केलिंग लागू न करें. अगर कॉन्टेंट, डेस्टिनेशन के बाउंड से छोटा है, तो उसे क्षेत्र में फ़िट करने के लिए स्केल नहीं किया जाएगा. |
सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है: | सोर्स इमेज, बॉर्डर से बड़ी है: सोर्स इमेज, बॉर्डर से छोटी है: |
किसी आकार में Image
कॉम्पोज़ेबल को क्लिप करना
किसी इमेज को किसी आकार में फ़िट करने के लिए, डिवाइस में पहले से मौजूद clip
मॉडिफ़ायर का इस्तेमाल करें.
किसी इमेज को सर्कल के आकार में काटने के लिए, Modifier.clip(CircleShape)
का इस्तेमाल करें:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(CircleShape) )
किनारों के गोल आकार - Modifier.clip(RoundedCornerShape(16.dp)
का इस्तेमाल करें) और उन किनारों का साइज़ डालें जिनके किनारों को गोल करना है:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(RoundedCornerShape(16.dp)) )
Shape
को बड़ा करके, अपनी पसंद का क्लिपिंग आकार भी बनाया जा सकता है. साथ ही, क्लिप करने के लिए आकार के तौर पर Path
भी दिया जा सकता है:
class SquashedOval : Shape { override fun createOutline( size: Size, layoutDirection: LayoutDirection, density: Density ): Outline { val path = Path().apply { // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container. addOval( Rect( left = size.width / 4f, top = 0f, right = size.width * 3 / 4f, bottom = size.height ) ) } return Outline.Generic(path = path) } } Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(200.dp) .clip(SquashedOval()) )
Image
कॉम्पोज़ेबल में बॉर्डर जोड़ना
इमेज के चारों ओर बॉर्डर बनाने के लिए, Modifier.border()
को Modifier.clip()
के साथ जोड़ना एक आम तरीका है:
val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, Color.Yellow), CircleShape ) .padding(borderWidth) .clip(CircleShape) )
अगर आपको ग्रेडिएंट बॉर्डर बनाना है, तो इमेज के चारों ओर रेनबो ग्रेडिएंट बॉर्डर बनाने के लिए, Brush
एपीआई का इस्तेमाल किया जा सकता है:
val rainbowColorsBrush = remember { Brush.sweepGradient( listOf( Color(0xFF9575CD), Color(0xFFBA68C8), Color(0xFFE57373), Color(0xFFFFB74D), Color(0xFFFFF176), Color(0xFFAED581), Color(0xFF4DD0E1), Color(0xFF9575CD) ) ) } val borderWidth = 4.dp Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .border( BorderStroke(borderWidth, rainbowColorsBrush), CircleShape ) .padding(borderWidth) .clip(CircleShape) )
पसंद के मुताबिक आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) सेट करना
किसी इमेज को कस्टम आसपेक्ट रेशियो में बदलने के लिए, Modifier.aspectRatio(16f/9f)
का इस्तेमाल करें. इससे, किसी इमेज (या उससे मिलती-जुलती किसी भी चीज़) के लिए कस्टम रेशियो दिया जा सकता है.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )
रंग फ़िल्टर - चित्र के पिक्सेल रंगों को रूपांतरित करें
इमेज कॉम्पोज़ेबल में colorFilter
पैरामीटर होता है. इससे आपकी इमेज के अलग-अलग पिक्सल का आउटपुट बदला जा सकता है.
इमेज को टिन्ट करना
ColorFilter.tint(color, blendMode)
का इस्तेमाल करने पर, आपके Image
कॉम्पोज़ेबल पर दिए गए रंग के साथ ब्लेंड मोड लागू हो जाएगा. ColorFilter.tint(color, blendMode)
, कॉन्टेंट को रंगीन बनाने के लिए BlendMode.SrcIn
का इस्तेमाल करता है. इसका मतलब है कि स्क्रीन पर इमेज जहां दिखेगी वहां दिया गया रंग दिखेगा. यह उन आइकॉन और वैक्टर के लिए फ़ायदेमंद है जिन्हें अलग-अलग थीम में दिखाना है.
Image( painter = painterResource(id = R.drawable.baseline_directions_bus_24), contentDescription = stringResource(id = R.string.bus_content_description), colorFilter = ColorFilter.tint(Color.Yellow) )
अन्य BlendMode
पर, अलग-अलग तरह का असर देखने को मिलता है. उदाहरण के लिए, किसी इमेज पर Color.Green
के साथ BlendMode.Darken
सेट करने पर, यह नतीजा मिलता है:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken) )
उपलब्ध अलग-अलग ब्लेंड मोड के बारे में ज़्यादा जानकारी के लिए, BlendMode का रेफ़रंस दस्तावेज़ देखें.
कलर मैट्रिक्स के साथ Image
फ़िल्टर लागू करना
कलर मैट्रिक्स ColorFilter
विकल्प का इस्तेमाल करके, अपनी इमेज को पूरी तरह बदलें. उदाहरण के लिए, अपनी इमेज पर ब्लैक ऐंड व्हाइट फ़िल्टर लागू करने के लिए, ColorMatrix
का इस्तेमाल करें और संतृप्ति को 0f
पर सेट करें.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) )
Image
कंपोज़ेबल के कंट्रास्ट या चमक को घटाएं या बढ़ाएं
किसी इमेज का कंट्रास्ट और उसकी चमक बदलने के लिए, वैल्यू बदलने के लिए ColorMatrix
का इस्तेमाल किया जा सकता है:
val contrast = 2f // 0f..10f (1 should be default) val brightness = -180f // -255f..255f (0 should be default) val colorMatrix = floatArrayOf( contrast, 0f, 0f, 0f, brightness, 0f, contrast, 0f, 0f, brightness, 0f, 0f, contrast, 0f, brightness, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )
Image
कॉम्पोज़ेबल के रंग उलटना
किसी इमेज के रंगों को उलटने के लिए, रंगों को उलटने के लिए ColorMatrix
को सेट करें:
val colorMatrix = floatArrayOf( -1f, 0f, 0f, 0f, 255f, 0f, -1f, 0f, 0f, 255f, 0f, 0f, -1f, 0f, 255f, 0f, 0f, 0f, 1f, 0f ) Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)) )
Image
कॉम्पोज़ेबल को धुंधला करना
किसी इमेज को धुंधला करने के लिए, Modifier.blur()
का इस्तेमाल करें. इसमें radiusX
और radiusY
की जानकारी दें. इससे हॉरिज़ॉन्टल और वर्टिकल दिशा में ब्लर रेडियस की जानकारी मिलती है.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)) ) )
Images
को धुंधला करने पर, BlurredEdgeTreatment.Unbounded
के बजाय BlurredEdgeTreatment(Shape)
का इस्तेमाल करने का सुझाव दिया जाता है. ऐसा इसलिए, क्योंकि बाद वाले कोड का इस्तेमाल आर्बिट्रेरी रेंडरिंग को धुंधला करने के लिए किया जाता है, जो ओरिजनल कॉन्टेंट की सीमाओं से बाहर रेंडर हो सकती है. ऐसा हो सकता है कि इमेज, कॉन्टेंट के दायरे से बाहर न दिखें. हालांकि, राउंड किए गए रेक्टैंगल को धुंधला करने के लिए, इस तरह के अंतर की ज़रूरत पड़ सकती है.
उदाहरण के लिए, अगर ऊपर दी गई इमेज पर BlurredEdgeTreatment
को अनबाउंडेड पर सेट किया जाता है, तो इमेज के किनारे शार्प के बजाय धुंधले दिखते हैं:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier .size(150.dp) .blur( radiusX = 10.dp, radiusY = 10.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded ) .clip(RoundedCornerShape(8.dp)) )
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- ग्राफ़िक्स में बदलाव करने वाले टूल
- इमेज लोड हो रही हैं {:#loading-images}
- मटीरियल आइकॉन {:#material-icons}