আপনি একটি চিত্রকে একটি ক্লিপ করা আকারে ফিট করতে পারেন এবং একটি ত্রিমাত্রিক অনুভূতি প্রদানের জন্য আকৃতির ঘেরের চারপাশে ছায়া আঁকতে পারেন। এই কৌশলটি অবতার এবং পণ্যের থাম্বনেইলের মতো ডিজাইন তৈরি করতে বা কাস্টম আকারের সাথে লোগো প্রদর্শনের জন্য উপযোগী।
একটি আকারে ক্লিপ করা একটি চিত্র প্রদর্শন করতে, আপনাকে অবশ্যই নিম্নলিখিতগুলি করতে হবে:
- আকৃতি তৈরি করুন।
- চিত্রটিকে আকৃতিতে ক্লিপ করুন।
সংস্করণ সামঞ্জস্য
এই বাস্তবায়নের জন্য আপনার প্রজেক্ট minSDK এপিআই লেভেল 21 বা তার উপরে সেট করা প্রয়োজন।
নির্ভরতা
একটি আকৃতি তৈরি করুন
নিম্নলিখিত কোডটি একটি কাস্টম আকৃতি তৈরি করে যা গতিশীলভাবে একটি বৃত্তাকার বহুভুজ আঁকতে এবং রেন্ডার করতে পারে:
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
ইন্টারফেস প্রয়োগ করে, যা আপনাকে জেটপ্যাক কম্পোজে একটি কাস্টম আকৃতি (একটি গোলাকার বহুভুজ) সংজ্ঞায়িত করতে দেয়। - নমনীয় রেন্ডারিংয়ের জন্য স্কেলিং এবং অনুবাদ ক্রিয়াকলাপ পরিচালনা করতে আকৃতিটি একটি
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 এর পরবর্তী পুনর্গঠনের জন্য মনে রাখা হয়েছে তা নিশ্চিত করে কর্মক্ষমতাকে অপ্টিমাইজ করে।
ফলাফল
![প্রান্তের চারপাশে প্রয়োগ করা ছায়া সহ ষড়ভুজ কুকুর](https://developer.android.google.cn/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=bn)
এই নির্দেশিকা ধারণকারী সংগ্রহ
এই নির্দেশিকাটি এই কিউরেট করা কুইক গাইড সংগ্রহের অংশ যা বৃহত্তর অ্যান্ড্রয়েড উন্নয়ন লক্ষ্যগুলি কভার করে:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=bn)