একটি আকারে ক্লিপ করা একটি চিত্র প্রদর্শন করুন

আপনি একটি ক্লিপ করা আকারের মধ্যে কোনো ছবি বসাতে পারেন এবং ত্রিমাত্রিক অনুভূতি দেওয়ার জন্য আকারটির পরিধি বরাবর ছায়া আঁকতে পারেন। এই কৌশলটি অ্যাভাটার ও পণ্যের থাম্বনেইলের মতো ডিজাইন তৈরি করতে, অথবা কাস্টম আকারের লোগো প্রদর্শন করতে উপযোগী।

কোনো শেপে ক্লিপ করা ছবি প্রদর্শন করতে হলে, আপনাকে নিম্নলিখিত কাজগুলো করতে হবে:

  • আকৃতিটি তৈরি করুন।
  • ছবিটিকে আকৃতিটির সাথে ক্লিপ করুন।

ফলাফল

ষড়ভুজের মধ্যে কুকুর, যার কিনারা বরাবর ছায়া প্রয়োগ করা হয়েছে।
চিত্র ১. ক্লিপ হিসাবে প্রয়োগ করা কাস্টম আকৃতি।

সংস্করণ সামঞ্জস্যতা

এই বাস্তবায়নের জন্য আপনার প্রোজেক্টের minSDK অবশ্যই API লেভেল ২১ বা তার বেশি হতে হবে।

নির্ভরশীলতা

একটি আকৃতি তৈরি করুন

নিম্নলিখিত কোডটি একটি কাস্টম শেপ তৈরি করে যা গতিশীলভাবে একটি গোলাকার বহুভুজ আঁকতে এবং রেন্ডার করতে পারে: 

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}

কোড সম্পর্কে মূল বিষয়গুলো

  • RoundedPolygon.getBounds() হলো RoundedPolygon ক্লাসের একটি এক্সটেনশন ফাংশন, যা এর সীমানা নির্ণয় করে।
  • RoundedPolygonShape ক্লাসটি Shape ইন্টারফেস ইমপ্লিমেন্ট করে, যার ফলে আপনি Jetpack Compose-এ একটি কাস্টম আকৃতি (একটি গোলাকার বহুভুজ) নির্ধারণ করতে পারেন।
  • নমনীয় রেন্ডারিংয়ের জন্য আকৃতিটি স্কেলিং ও ট্রান্সলেশন কার্যক্রম পরিচালনা করতে একটি Matrix ব্যবহার করে।
  • createOutline() ` ফাংশনটি একটি RoundedPolygon অবজেক্ট গ্রহণ করে, সেটিকে একটি নির্দিষ্ট আকারের মধ্যে ফিট করার জন্য স্কেল ও ট্রান্সলেট করে এবং একটি Outline অবজেক্ট রিটার্ন করে, যা অঙ্কিতব্য চূড়ান্ত আকৃতিটি বর্ণনা করে।

ছবিটিকে একটি আকৃতিতে ক্লিপ করুন।

নিম্নলিখিত কোডটি ছবিটিকে একটি ষড়ভুজ আকারে ক্রপ করে এবং গভীরতার অনুভূতি দেওয়ার জন্য একটি সূক্ষ্ম ড্রপ শ্যাডো যোগ করে: 

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}

কোড সম্পর্কে মূল বিষয়গুলো

  • ইমেজে একটি ষড়ভুজাকৃতি নির্ধারণ ও প্রয়োগ করার জন্য RoundedPolygon এবং RoundedPolygonShape অবজেক্টগুলো ব্যবহৃত হয়।
  • কোডটি ছবিতে উচ্চতা-ভিত্তিক ছায়া যোগ করতে graphicsLayer ব্যবহার করে। এটি গভীরতার অনুভূতি তৈরি করে এবং পটভূমি থেকে একটি চাক্ষুষ পৃথকীকরণ ঘটায়।
  • remember ব্লকের ব্যবহার পারফরম্যান্সকে অপ্টিমাইজ করে, কারণ এটি নিশ্চিত করে যে আকৃতি এবং ক্লিপিং সংজ্ঞাগুলো কেবল একবারই গণনা করা হয় এবং UI-এর পরবর্তী পুনর্গঠনের জন্য তা মনে রাখা হয়।

যে সংগ্রহগুলিতে এই নির্দেশিকাটি রয়েছে

এই নির্দেশিকাটি বিশেষভাবে নির্বাচিত কুইক গাইড সংকলনগুলোর একটি অংশ, যা অ্যান্ড্রয়েড ডেভেলপমেন্টের বৃহত্তর লক্ষ্যগুলো পূরণ করে:

আপনার অ্যান্ড্রয়েড অ্যাপকে একটি সুন্দর রূপ ও অনুভূতি দিতে উজ্জ্বল ও আকর্ষণীয় ভিজ্যুয়াল ব্যবহারের কৌশলগুলো জেনে নিন।
দ্রুত নির্দেশিকা সংগ্রহ

কোনো প্রশ্ন বা মতামত থাকলে

আমাদের প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী পেজে গিয়ে সংক্ষিপ্ত নির্দেশিকাগুলো সম্পর্কে জানুন অথবা আমাদের সাথে যোগাযোগ করে আপনার মতামত জানান।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলীতে যান মতামত দিন