किसी आकार में काटी गई इमेज दिखाना

किसी इमेज को क्लिप किए गए आकार में फ़िट किया जा सकता है. साथ ही, तीन डाइमेंशन वाला इफ़ेक्ट देने के लिए, आकार के चारों ओर शैडो बनाई जा सकती हैं. इस तकनीक का इस्तेमाल, अवतार और प्रॉडक्ट के थंबनेल जैसे डिज़ाइन बनाने या अपनी पसंद के मुताबिक आकार वाले लोगो दिखाने के लिए किया जा सकता है.

किसी आकार में क्लिप की गई इमेज दिखाने के लिए, आपको यह काम करना होगा:

• आकार बनाएं.
• इमेज को आकार में क्लिप करें.

नतीजे

वर्शन के साथ काम करने की सुविधा

इस सुविधा का इस्तेमाल करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का 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)
    }
}
ShapesSnippets.kt

कोड के बारे में अहम बातें

• RoundedPolygon.getBounds() क्लास पर एक एक्सटेंशन फ़ंक्शन तय करता है, ताकि इसके बाउंड्री कैलकुलेट की जा सकें.RoundedPolygon
• The 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)
    )
}
ShapesSnippets.kt

कोड के बारे में अहम बातें

• RoundedPolygon और RoundedPolygonShape ऑब्जेक्ट का इस्तेमाल, इमेज के लिए हेक्सागोनल आकार तय करने और उसे लागू करने के लिए किया जाता है.
• कोड, इमेज में एलिवेशन के आधार पर शैडो जोड़ने के लिए, graphicsLayer का इस्तेमाल करता है. इससे, डेप्थ का इफ़ेक्ट मिलता है और बैकग्राउंड से विज़ुअल सेपरेशन मिलता है.
• remember ब्लॉक का इस्तेमाल करने से, परफ़ॉर्मेंस ऑप्टिमाइज़ होती है. ऐसा इसलिए, क्योंकि आकार और क्लिपिंग की परिभाषाएं सिर्फ़ एक बार कैलकुलेट की जाती हैं. साथ ही, यूज़र इंटरफ़ेस (यूआई) के बाद में होने वाले कंपोज़िशन के लिए, इन्हें सेव कर लिया जाता है.

वे कलेक्शन जिनमें यह गाइड शामिल है

यह गाइड, चुनी गई उन क्विक गाइड के कलेक्शन का हिस्सा है जिनमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

इमेज दिखाएं

अपने Android ऐप्लिकेशन को बेहतर लुक और फ़ील देने के लिए, ब्राइट और दिलचस्प विज़ुअल का इस्तेमाल करने के तरीके जानें.

क्विक गाइड का कलेक्शन

कोई सवाल पूछना है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवाल वाले पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करें और अपनी राय या सुझाव/शिकायत के बारे में बताएं.

अक्सर पूछे जाने वाले सवाल पर जाएं सुझाव/राय देना या शिकायत सबमिट करें