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

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 portrait 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: डेस्टिनेशन के बाउंड में आसपेक्ट रेशियो बनाए रखने के लिए, सोर्स को स्केल करें. अगर सोर्स, दोनों डाइमेंशन में डेस्टिनेशन से छोटा या उसके बराबर है, तो यह `None` की तरह ही काम करता है. कॉन्टेंट हमेशा सीमाओं के अंदर ही रहेगा. अगर कॉन्टेंट, बॉउंड से छोटा है, तो स्केलिंग लागू नहीं होगी. सोर्स इमेज, बॉउंड से बड़ी है: 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.Inside landscape, source image smaller than bounds
ContentScale.None: सोर्स पर कोई स्केलिंग लागू न करें. अगर कॉन्टेंट, डेस्टिनेशन के बाउंड से छोटा है, तो उसे क्षेत्र में फ़िट करने के लिए स्केल नहीं किया जाएगा. सोर्स इमेज, बॉउंड से बड़ी है: ContentScale.None पोर्ट्रेट, सोर्स इमेज बॉउंड से बड़ी है सोर्स इमेज, बॉउंड से छोटी है: ContentScale.None पोर्ट्रेट, सोर्स इमेज बॉउंड से छोटी है सोर्स इमेज, बॉउंड से बड़ी है: ContentScale.None लैंडस्केप, सोर्स इमेज बॉउंड से बड़ी है सोर्स इमेज, बॉउंड से छोटी है: 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)
)

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 का इस्तेमाल करके इमेज को क्लिप करना
दूसरी इमेज: 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 tint
आठवीं इमेज: 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 है (ब्लैक ऐंड व्हाइट इमेज)
नौवीं इमेज: संतृप्ति 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
इमेज पर लागू किया गया BlurEffect

Images को धुंधला करते समय, हमारा सुझाव है कि आप BlurredEdgeTreatment.Unbounded के बजाय BlurredEdgeTreatment(Shape) का इस्तेमाल करें. ऐसा इसलिए, क्योंकि BlurredEdgeTreatment.Unbounded का इस्तेमाल, ऐसे रेंडरिंग को धुंधला करने के लिए किया जाता है जो मूल कॉन्टेंट की सीमाओं के बाहर रेंडर हो सकते हैं. इमेज के लिए, हो सकता है कि वे कॉन्टेंट के दायरे से बाहर न दिखें. वहीं, राउंड किए गए रेक्टैंगल को धुंधला करने के लिए, इस तरह के अंतर की ज़रूरत पड़ सकती है.

उदाहरण के लिए, अगर ऊपर दी गई इमेज पर 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