इमेज को पसंद के मुताबिक बनाना

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.Fit पोर्ट्रेट ContentScale.Fit लैंडस्केप
ContentScale.Crop: इमेज को उपलब्ध जगह पर बीच में काटें. ContentScale.Crop portrait ContentScale.Crop landscape
ContentScale.FillHeight: आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की ऊंचाई से मेल खा सकें. ContentScale.FillHeight पोर्ट्रेट ContentScale.FillHeight लैंडस्केप
ContentScale.FillWidth: आसपेक्ट रेशियो को बनाए रखते हुए सोर्स को स्केल करें, ताकि बॉउंड, डेस्टिनेशन की चौड़ाई से मेल खा सकें. ContentScale.Fillwidth पोर्ट्रेट ContentScale.FillWidth लैंडस्केप
ContentScale.FillBounds: डेस्टिनेशन के बॉर्डर को भरने के लिए, कॉन्टेंट को वर्टिकल और हॉरिज़ॉन्टल तौर पर अलग-अलग स्केल करें. (ध्यान दें: अगर इमेज को ऐसे कंटेनर में डाला जाता है जो इमेज के आसपेक्ट रेशियो से मेल नहीं खाते, तो इमेज खराब हो जाएंगी) ContentScale.FillBounds पोर्ट्रेट ContentScale.FillBounds लैंडस्केप
ContentScale.Inside: डेस्टिनेशन के बाउंड में आसपेक्ट रेशियो बनाए रखने के लिए, सोर्स को स्केल करें. अगर सोर्स, दोनों डाइमेंशन में डेस्टिनेशन से छोटा या उसके बराबर है, तो यह `कोई नहीं` की तरह काम करता है. कॉन्टेंट हमेशा इन सीमाओं के अंदर रहेगा. अगर सामग्री सीमा से छोटी है, तो कोई स्केलिंग लागू नहीं होगी. सोर्स इमेज, बॉर्डर से बड़ी है: ContentScale.Inside portrait, source image larger than bounds सोर्स इमेज, बॉर्डर से छोटी है: ContentScale.Inside portrait, source image smaller than bounds सोर्स इमेज, बॉर्डर से बड़ी है: ContentScale.Inside landscape, source image larger than bounds सोर्स इमेज, बॉर्डर से छोटी है: ContentScale.लैंडस्केप मोड में, सोर्स इमेज बॉर्डर से छोटी है
ContentScale.None: सोर्स पर कोई स्केलिंग लागू न करें. अगर कॉन्टेंट, डेस्टिनेशन के बाउंड से छोटा है, तो उसे क्षेत्र में फ़िट करने के लिए स्केल नहीं किया जाएगा. सोर्स इमेज, बॉर्डर से बड़ी है: ContentScale.None पोर्ट्रेट, सोर्स इमेज बॉउंड से बड़ी है सोर्स इमेज, बॉर्डर से छोटी है: ContentScale.None पोर्ट्रेट, सोर्स इमेज बॉउंड से छोटी है सोर्स इमेज, बॉर्डर से बड़ी है: ContentScale.None लैंडस्केप, सोर्स इमेज बॉउंड से बड़ी है सोर्स इमेज, बॉर्डर से छोटी है: ContentScale.कोई लैंडस्केप नहीं, सोर्स इमेज, तय सीमाओं से छोटी है

किसी आकार में 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)
)

सर्कल के आकार वाली इमेज से क्लिप बनाना
पहली इमेज: 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))
)

RoundedCornerShape का इस्तेमाल करके इमेज को क्लिप करना
दूसरी इमेज: गोल आकार वाली इमेज से क्लिप बनाना

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

इमेज पर Modifier.aspectRatio(16f/9f) का इस्तेमाल करना
छठी इमेज: इमेज पर 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.SrcIn के साथ लागू किया गया ColorFilter.tint
सातवां इलस्ट्रेशन: BlendMode.SrcIn के साथ लागू किया गया ColorFilter.tint

अन्य 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.Darken के साथ Color.Green टिन्ट
आठवीं इमेज: Color.Green tint with 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) })
)

कलर मैट्रिक्स, जिसमें संतृप्ति 0 है (ब्लैक ऐंड व्हाइट इमेज)
इमेज 9: कलर मैट्रिक्स, जिसमें सैचुरेशन 0 हो (ब्लैक और व्हाइट इमेज)

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

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

इमेज के रंग उलटने की सुविधा
इमेज 11: इमेज के रंग उलट दिए गए हैं

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

इमेज पर धुंधला करने वाला इफ़ेक्ट लागू किया गया
इमेज पर लागू किया गया BlurEffect

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

BlurEdgeTreatment.Unbounded
इमेज 13: BlurEdgeTreatment.Unbounded