Compose में धुंधला करने की सुविधा

ब्लर इफ़ेक्ट से विज़ुअल की बारीकियां कम हो जाती हैं, फ़ोटोग्राफ़िक डेप्थ ऑफ़ फ़ील्ड बनती है, और फ़ोरग्राउंड यूज़र इंटरफ़ेस (यूआई) एलिमेंट पर फ़ोकस किया जाता है. Jetpack Compose में, कंपोज़ेबल के अंदर मौजूद कॉन्टेंट को धुंधला करने के लिए, Modifier.blur का इस्तेमाल करें. इसमें इमेज, शेप, टेक्स्ट, और लेआउट कंटेनर शामिल हैं. Modifier.blur लागू करने से, कंपोज़ेबल को एक अलग ग्राफ़िक्स लेयर में रेंडर किया जाता है.

बाईं ओर: ओरिजनल इमेज. बीच में: इमेज की पूरी सतह पर एक जैसा ब्लर लागू किया गया है. दाईं ओर: प्रोग्रेसिव ब्लर वाली इमेज, जो सबसे ऊपर साफ़ दिख रही है और नीचे की ओर धुंधली होती जा रही है.
पहली इमेज. बाईं ओर: ओरिजनल इमेज. बीच में: इस इमेज में, पूरी सतह पर एक जैसा ब्लर लागू किया गया है. दाईं ओर: प्रोग्रेसिव ब्लर वाली इमेज, जो ऊपर की ओर साफ़ है और नीचे की ओर धुंधली होती जा रही है.

अपने डिज़ाइन के लक्ष्यों के आधार पर, ब्लर को दो तरीकों से बदला जा सकता है:

  • एक जैसा ब्लर: यह पूरे कंपोज़ेबल पर एक जैसा ब्लर रेडियस लागू करता है. यह दोनों ऐक्सिस पर बराबर या अलग-अलग हॉरिज़ॉन्टल और वर्टिकल रेडियस (radiusX, radiusY) पर लागू होता है.
  • प्रोग्रेसिव ब्लर: यह कंपोज़ेबल में, ब्लर के दायरे को अलग-अलग जगहों पर अलग-अलग तरीके से बदलता है. इसके लिए, BlurRadiusSpec ग्रेडिएंट या कस्टम Shader का इस्तेमाल किया जाता है.

एक जैसा ब्लर लागू करना

किसी कंपोज़ेबल पर एक जैसा ब्लर इफ़ेक्ट लागू करने के लिए, Modifier.blur में Dp रेडियस पास करें. कॉन्टेंट को हॉरिज़ॉन्टल (X) और वर्टिकल (Y) ऐक्सिस पर बराबर धुंधला करने के लिए, radius की एक वैल्यू पास करें:

@Composable
fun UniformBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                radius = 8.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

एक कुत्ते की इमेज, जो हॉरिज़ॉन्टल और वर्टिकल, दोनों ऐक्सिस पर एक जैसी धुंधली है.
दूसरी इमेज. एक कुत्ते की इमेज, जिसे हॉरिज़ॉन्टल और वर्टिकल, दोनों ऐक्सिस पर एक जैसा धुंधला किया गया है.

डायरेक्शनल मोशन-ब्लर इफ़ेक्ट बनाने के लिए, Modifier.blur में radiusX और radiusY की अलग-अलग वैल्यू पास करें. धुंधला करने का इफ़ेक्ट लागू करने के लिए, radiusX और radiusY, दोनों की वैल्यू 0.dp से ज़्यादा होनी चाहिए. इसे यहां दिए गए उदाहरण में दिखाया गया है:

@Composable
fun DirectionalBlurExample() {
    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 = 2.dp,
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

एक कुत्ते की इमेज, जिसमें हॉरिज़ॉन्टल मोशन ब्लर इफ़ेक्ट का इस्तेमाल किया गया है.
तीसरी इमेज. एक कुत्ते की स्क्वेयर इमेज, जिसमें हॉरिज़ॉन्टल मोशन ब्लर इफ़ेक्ट का इस्तेमाल किया गया है.

प्रोग्रेसिव ब्लर इफ़ेक्ट लागू करना

प्रोग्रेसिव ब्लर, कंपोज़ेबल में ब्लर की रेडियस को अलग-अलग करता है. इससे शार्प और ब्लर किए गए हिस्सों के बीच स्मूद ट्रांज़िशन बनता है.

Modifier.blur को BlurRadiusSpec पास करें. उदाहरण के लिए, इमेज के ऊपरी हिस्से को शार्प रखते हुए, निचले हिस्से को धीरे-धीरे धुंधला करने के लिए, BlurRadiusSpec.verticalGradient के साथ startRadius = 0.dp और endRadius = 6.dp का इस्तेमाल करें. जैसा कि इस उदाहरण में दिखाया गया है:

@Composable
fun ProgressiveBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Sharp at the top (0.dp), progressively blurred toward the bottom (6.dp)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    startRadius = 0.dp,
                    endRadius = 6.dp,
                ),
                edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp)),
            ),
    )
}

एक कुत्ते की फ़ोटो, जिसमें ऊपर का हिस्सा साफ़ दिख रहा है और नीचे का हिस्सा धीरे-धीरे धुंधला हो रहा है.
चौथी इमेज. एक कुत्ते की इमेज, जो ऊपर से साफ़ दिख रही है और नीचे की ओर धीरे-धीरे धुंधली होती जा रही है.

BlurRadiusSpec की मदद से, ब्लर ग्रेडिएंट तय करना

BlurRadiusSpec में, मेज़रमेंट Dp में सेट किए जाते हैं. साथ ही, ड्रॉ किए जाने पर लेयर के साइज़ और डिसप्ले डेंसिटी के हिसाब से अपने-आप अडजस्ट हो जाते हैं. स्पेशली वैरिंग ब्लर को कन्वर्ट करने के बाद, उसकी कैपिंग 150 पिक्सल पर सेट हो जाती है. हालांकि, BlurRadiusSpec.uniform की कोई कैपिंग नहीं होती.

यहां दी गई टेबल में, BlurRadiusSpec पर उपलब्ध फ़ैक्ट्री फ़ंक्शन की सूची दी गई है:

BlurRadiusSpec फ़ैक्ट्री ब्यौरा
BlurRadiusSpec.verticalGradient यह लेयर में, ब्लर रेडियस को ऊपर (0f) से नीचे (1f) की ओर वर्टिकल तौर पर आसानी से बदलता है.
BlurRadiusSpec.horizontalGradient यह बाईं ओर के किनारे (0f) से दाईं ओर के किनारे (1f) तक, हॉरिज़ॉन्टल तौर पर ब्लर रेडियस को आसानी से बदलता है.
BlurRadiusSpec.linearGradient यह DpOffset के खास निर्देशांकों को जोड़ने वाली सीधी लाइन के साथ, डायरेक्शनल ब्लर ट्रांज़िशन लागू करता है.
BlurRadiusSpec.radialGradient यह फ़ोकल पॉइंट से बाहर की ओर, fallOffRadius बाउंड्री तक धुंधलापन फैलाता है.
BlurRadiusSpec.uniform यह पूरी लेयर पर एक जैसा ब्लर रेडियस लागू करता है.
BlurRadiusSpec.shader यह हर पिक्सल पर maxRadius को कंट्रोल और स्केल करने के लिए, कस्टम Shader के ऐल्फ़ा चैनल का इस्तेमाल करता है.

BlurStop की मदद से, ब्लर को पसंद के मुताबिक डिस्ट्रिब्यूट करना

स्टैंडर्ड ग्रेडिएंट ब्लर, 0f और 1f के बीच लीनियर तरीके से इंटरपोलेट होते हैं. किसी सतह पर ब्लर को पसंद के मुताबिक बनाने के लिए, जैसे कि कई किनारों को ब्लर करना या बीच के सेक्शन को पूरी तरह से शार्प रखना, verticalGradient, horizontalGradient, linearGradient या radialGradient में 2 से 16 BlurStop एंट्री वाला List<BlurStop> पास करें. हर BlurStop एंट्री के लिए, ये चीज़ें तय करें:

  • fraction: ग्रेडिएंट के साथ 0.0f से 1.0f तक की रिलेटिव पोज़िशन. स्टॉप, फ़्रैक्शन के हिसाब से अपने-आप क्रम में लग जाते हैं.
  • radius: Dp में धुंधलेपन का रेडियस, जो उस फ़्रैक्शन पोज़िशन पर लागू होता है.

उदाहरण के लिए, चार स्टॉप किसी इमेज के ऊपरी और निचले किनारों को धुंधला कर देते हैं, जबकि बीच के हिस्से को पूरी तरह से शार्प रखते हैं. जैसा कि इस उदाहरण में दिखाया गया है:

@Composable
fun MultiStopBlurExample() {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = stringResource(id = R.string.dog_content_description),
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .size(150.dp)
            .blur(
                // Blurred at the top and bottom edges, sharp in the middle (0.3f..0.7f)
                blurRadiusSpec = BlurRadiusSpec.verticalGradient(
                    stops = listOf(
                        BlurStop(fraction = 0.0f, radius = 20.dp),
                        BlurStop(fraction = 0.3f, radius = 0.dp),
                        BlurStop(fraction = 0.7f, radius = 0.dp),
                        BlurStop(fraction = 1.0f, radius = 20.dp),
                    ),
                ),
                edgeTreatment = BlurredEdgeTreatment.Unbounded,
            ),
    )
}

एक कुत्ते की फ़ोटो, जिसके ऊपर और नीचे के किनारे धुंधले हैं. हालांकि, बीच की हॉरिज़ॉन्टल स्ट्रिप साफ़ तौर पर फ़ोकस में है.
पांचवीं इमेज. एक कुत्ते की इमेज, जिसके ऊपर और नीचे के किनारे धुंधले हैं. हालांकि, बीच की हॉरिज़ॉन्टल स्ट्रिप पर शार्प फ़ोकस है.

BlurScope की मदद से लेयर की प्रॉपर्टी कॉन्फ़िगर करना

blurRadiusSpec को सीधे पास करने के बजाय, Modifier.blur { ... } को कॉन्फ़िगरेशन ब्लॉक पास किया जा सकता है. यह ब्लॉक BlurScope के अंदर चलता है. इससे आपको लेआउट डेंसिटी और इन प्रॉपर्टी का सीधा ऐक्सेस मिलता है:

  • size: DpSize: Dp में धुंधली लेयर की चौड़ाई और ऊंचाई, जिससे ग्रेडिएंट ज्यामिति के लिए निर्देशांक स्पेस तय होता है.
  • blurRadiusSpec: BlurRadiusSpec: यह प्रॉपर्टी, पूरे एलिमेंट पर धुंधलेपन के रेडियस को कॉन्फ़िगर करती है. डिफ़ॉल्ट रूप से, यह BlurRadiusSpec.uniform(0.dp) (धुंधला नहीं) पर सेट होता है.
  • edgeTreatment: BlurredEdgeTreatment: कॉन्टेंट की सीमाओं से बाहर के पिक्सल को सैंपल और क्लिप करने के लिए इस्तेमाल की जाने वाली रणनीति. डिफ़ॉल्ट रूप से, यह BlurredEdgeTreatment.Rectangle पर सेट होता है.
  • alpha: Float: धुंधली लेयर की ओपैसिटी 0f..1f की रेंज में होनी चाहिए. डिफ़ॉल्ट रूप से, यह 1f पर सेट होता है.

BlurScope ब्लॉक, ग्राफ़िक लेयर फ़ेज़ के दौरान चलता है. यह मेज़रमेंट और लेआउट के बाद चलता है. इसलिए, रीकंपोज़िशन को ट्रिगर किए बिना, size से ग्रेडिएंट ज्यामिति को कंप्यूट किया जा सकता है.

BlurredEdgeTreatment की मदद से, एज क्लिपिंग को कंट्रोल करना

ब्लर करने की प्रोसेस में, ब्लर रेडियस के अंदर मौजूद आस-पास के पिक्सल को ब्लर किया जाता है. इसलिए, ब्लर किया गया आउटपुट, ब्लर रेडियस के हिसाब से ओरिजनल कॉन्टेंट की सीमाओं से बाहर तक फैल जाता है. BlurredEdgeTreatment से यह तय होता है कि ओरिजनल बाउंड के बाहर के पिक्सल का सैंपल कैसे लिया जाए और क्या नतीजे को किसी आकार में क्लिप किया जाए.

BlurredEdgeTreatment, यूनिफ़ॉर्म और प्रोग्रेसिव, दोनों तरह के ब्लर के साथ काम करता है:

BlurredEdgeTreatment व्यवहार आउटपुट
BlurredEdgeTreatment.Rectangle (डिफ़ॉल्ट) यह ब्लर किए गए नतीजे को ओरिजनल कॉन्टेंट के रेक्टैंगल बाउंड्री बॉक्स में क्लिप करता है और सबसे नज़दीकी एज पिक्सल (TileMode.Clamp) का सैंपल लेता है. एक कुत्ते की धुंधली इमेज, जिसे रेक्टैंगल के आकार वाली साफ़ बाउंड्री में क्लिप किया गया है.
BlurredEdgeTreatment(shape) यह ब्लर किए गए नतीजे को तय किए गए Shape (जैसे, RoundedCornerShape(8.dp)) पर क्लिप करता है और सबसे नज़दीकी एज पिक्सल (TileMode.Clamp) का सैंपल लेता है. यह ब्लर किए गए नतीजे को शेप की सीमा पर शार्प रखता है. साथ ही, ओरिजनल सीमाओं से बाहर नहीं जाने देता. धुंधली इमेज में एक कुत्ता दिख रहा है. इसे गोल कोने वाले आकार में क्लिप किया गया है. इसके किनारे शार्प हैं.
BlurredEdgeTreatment.Unbounded यह ब्लर किए गए हिस्से को क्लिप नहीं करता (TileMode.Decal). कॉन्टेंट की सीमाओं के बाहर के पिक्सल, पारदर्शी काले रंग के सैंपल होते हैं. इससे इमेज के बाहरी किनारे, ओरिजनल सीमाओं से बाहर धुंधले और ब्लर दिखते हैं. एक कुत्ते की धुंधली इमेज, जिसके किनारे ओरिजनल इमेज की सीमाओं से बाहर जाकर धीरे-धीरे धुंधले हो जाते हैं.

इन एपीआई को यूज़र इंटरफ़ेस (यूआई) के पैटर्न में एक साथ इस्तेमाल करने का तरीका जानने के लिए, ब्लर करने के सामान्य इस्तेमाल के उदाहरण देखें. जैसे, स्क्रोल किए जा रहे कॉन्टेंट के किनारों को फ़ेड करना, किसी फ़ोकल पॉइंट को हाइलाइट करना या कस्टम शेडर की मदद से ब्लर को मास्क करना.

आगे बढ़ें
इस्तेमाल के सामान्य उदाहरण