Compose-এ ব্লার করা

ব্লার এফেক্ট ভিজ্যুয়াল ডিটেলকে আরও মসৃণ করে, ফটোগ্রাফিক ডেপথ অফ ফিল্ড তৈরি করে এবং ফোরগ্রাউন্ড UI এলিমেন্টে ফোকাস নিয়ে আসে। Jetpack Compose-এ, Modifier.blur ব্যবহার করে কম্পোজেবলের মধ্যে আঁকা কন্টেন্ট অস্পষ্ট করুন, যার মধ্যে ছবি, আকার, টেক্সট এবং লেআউট কন্টেনার অন্তর্ভুক্ত। Modifier.blur প্রয়োগ করলে কম্পোজেবল আলাদা গ্রাফিক্স লেয়ারে রেন্ডার হয়।

বাঁদিকে: আসল ছবি। মাঝখানে: পুরো সারফেস জুড়ে ইউনিফর্ম ব্লার প্রয়োগ করা ছবি। ডানদিকে: প্রোগ্রেসিভ ব্লার সহ ছবি যা উপরের দিকে শার্প এবং নিচের দিকে ব্লার বাড়তে থাকে।
ছবি ১. বাঁদিকে: আসল ছবি। মাঝখানে: পুরো সারফেস জুড়ে ইউনিফর্ম ব্লার প্রয়োগ করা ছবি। ডানদিকে: প্রোগ্রেসিভ ব্লার সহ ছবি যা উপরের দিকে শার্প এবং নিচের দিকে ব্লার বাড়তে থাকে।

আপনার ডিজাইনের লক্ষ্যের উপর নির্ভর করে, আপনি দুটি উপায়ে অস্পষ্টতা পরিবর্তন করতে পারেন:

  • ইউনিফর্ম ব্লার: পুরো কম্পোজেবল জুড়ে একটি কনস্ট্যান্ট ব্লার ব্যাসার্ধ প্রয়োগ করে, হয় উভয় অক্ষে সমানভাবে অথবা স্বাধীন অনুভূমিক এবং উল্লম্ব ব্যাসার্ধ সহ (radiusX, radiusY)।
  • প্রোগ্রেসিভ ব্লার: BlurRadiusSpec গ্রেডিয়েন্ট বা কাস্টম Shader ব্যবহার করে কম্পোজেবল জুড়ে ব্লার রেডিয়াস স্পেশিয়ালি পরিবর্তন করে।

ইউনিফর্ম ব্লার প্রয়োগ করুন

দেখুন।

পুরো কম্পোজেবল জুড়ে একটি কনস্ট্যান্ট ব্লার প্রয়োগ করতে, Dp ব্যাসার্ধ Modifier.blur-এ পাস করুন। হরাইজন্টাল (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 পাস করুন। যেমন, ছবির উপরের অংশ শার্প রেখে নিচের দিকে ক্রমশ ব্লার করতে startRadius = 0.dp ও endRadius = 6.dp-এর সাথে BlurRadiusSpec.verticalGradient ব্যবহার করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

@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-এ সেট করা হয় এবং আঁকার সময় লেয়ারের সাইজ এবং ডিসপ্লে ডেনসিটিতে অটোমেটিক অ্যাডজাস্ট হয়। কনভার্ট করার পরে স্পেশিয়ালি ভ্যারিং ব্লার ক্যাপের সাইজ ১৫০ পিক্সেল হয়, যেখানে 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-এ ২ থেকে ১৬টি 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) ক্লিপ করে না। কন্টেন্ট সীমার বাইরের পিক্সেল স্বচ্ছ কালো স্যাম্পেল করে, যার ফলে ছবির বাইরের প্রান্তগুলি অস্পষ্ট দেখায় এবং আসল সীমার বাইরে ব্লার হয়ে যায়। একটি অস্পষ্ট কুকুরের ছবি যার প্রান্তগুলি মূল সীমানার বাইরে ধীরে ধীরে মিলিয়ে যায়।

স্ক্রল করা কন্টেন্টের প্রান্ত ফেড করা, ফোকাল পয়েন্ট স্পটলাইট করা বা কাস্টম শেডার দিয়ে অস্পষ্টতা মাস্ক করার মতো সম্পূর্ণ UI প্যাটার্নে এই APIগুলি কীভাবে একত্রিত হয় তা দেখতে, অস্পষ্টতার সাধারণ ব্যবহার দেখুন।

পরবর্তী
সাধারণ ব্যবহারিক প্রয়োগ