Compose में शेप

Compose की सुविधा की मदद से, पॉलीगॉन से बनाए गए आकार बनाए जा सकते हैं. उदाहरण के लिए, आप नीचे दी गई आकृतियां बना सकते हैं:

Compose में, गोल आकार वाला अपनी पसंद के मुताबिक पॉलीगॉन बनाने के लिए, graphics-shapes आपकी इस बात पर निर्भर है app/build.gradle:

implementation "androidx.graphics:graphics-shapes:1.0.0-rc01"

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

पॉलीगॉन बनाएं

नीचे दिया गया स्निपेट एक सामान्य पॉलीगॉन आकार बनाता है, जिसके बीच में 6 पॉइंट होते हैं का साइज़:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 6,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Blue)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

इस उदाहरण में, लाइब्रेरी एक RoundedPolygon बनाती है, जिसमें ज्यामिति है अनुरोध किए गए आकार को दिखाता है. उस आकार को Compose ऐप्लिकेशन में बनाने के लिए, आपको इससे एक Path ऑब्जेक्ट लेना होगा, ताकि Compose का फ़ॉर्मैट बनाया जा सके ड्रॉ करना आता है.

बहुभुज के कोनों को गोल घुमाना

किसी पॉलीगॉन के कोनों को गोल करने के लिए, CornerRounding पैरामीटर का इस्तेमाल करें. यह दो पैरामीटर लेता है, radius और smoothing. गोल किया गया हर कोना बना होता है एक से तीन क्यूबिक कर्व के बीच में, जिसके बीच में एक गोलाकार चाप का आकार है, जबकि दो साइड ("फ़्लैंकिंग") कर्व, शेप के किनारे से सेंटर कर्व तक ट्रांज़िशन करता है.

दायरा

radius, वृत्त की त्रिज्या होती है, जिसका इस्तेमाल किसी शीर्ष को गोलने के लिए किया जाता है.

उदाहरण के लिए, नीचे दिए गए गोल आकार वाले त्रिभुज को इस तरह बनाया गया है:

कोमल करना

स्मूदिंग एक ऐसा फ़ैक्टर है जो तय करता है कि कोने का गोल आकार वाला हिस्सा, जिससे किनारे तक. 0 का स्मूदिंग फ़ैक्टर (बेहतर नहीं बनाया गया, CornerRounding की डिफ़ॉल्ट वैल्यू) पूरी तरह से सर्कुलर फ़ॉर्मैट में नतीजे देता है पूर्णांक बनाना. नॉन-ज़ीरो स्मूदिंग फ़ैक्टर (ज़्यादा से ज़्यादा 1.0) से नतीजे मिलते हैं जिसके कोने को तीन अलग-अलग कर्व से गोल किया गया है.

उदाहरण के लिए, नीचे दिया गया स्निपेट सेटिंग और 0 बनाम 1 में सुधार करना:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Black)
            }
        }
        .size(100.dp)
)
ShapesSnippets.kt

साइज़ और पोज़िशन

डिफ़ॉल्ट रूप से, एक आकार बनाया जाता है. इसमें केंद्र का दायरा 1 होता है (0, 0). यह रेडियस, सेंटर और बाहरी वर्टेक्स के बीच की दूरी दिखाता है पॉलीगॉन का वह हिस्सा जिस पर आकार आधारित है. ध्यान दें कि कोनों को पूरा करना नतीजे का आकार छोटा हो जाएगा, क्योंकि गोल किए हुए कोने गोल किए जाने वाले शीर्षों के बीच में. पॉलीगॉन को आकार देने के लिए, radius को एडजस्ट करें वैल्यू. पोज़िशन बदलने के लिए, पॉलीगॉन के centerX या centerY को बदलें. इसके अलावा, ऑब्जेक्ट का साइज़, पोज़िशन, और रोटेशन बदलने के लिए उसे पूरी तरह बदलें स्टैंडर्ड DrawScope ट्रांसफ़ॉर्मेशन फ़ंक्शन का इस्तेमाल करके, जैसे कि DrawScope#translate().

मॉर्फ़ शेप

Morph ऑब्जेक्ट नया आकार है, जो दो पॉलीगॉन के बीच के ऐनिमेशन को दिखाता है आकार. दो आकारों के बीच मॉर्फ़ करने के लिए, दो RoundedPolygons और एक Morph बनाएं एक ऑब्जेक्ट है जो इन दोनों आकारों को अपना लेता है. प्रारंभ और बीच के बीच की आकृति की गणना करने के लिए अंत के आकार, इसकी वैल्यू तय करने के लिए शून्य और एक के बीच का progress मान दें ये शुरुआती (0) और आखिरी (1) आकार के बीच होते हैं:

Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = 0.5f).asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

ऊपर दिए गए उदाहरण में, प्रोग्रेस दो शेप के बीच की आधी दूरी पर है (गोलाकार त्रिभुज और एक वर्ग), जिससे ऐसा नतीजा मिलता है:

ज़्यादातर मामलों में, मॉर्फ़िंग का काम ऐनिमेशन के हिस्से के तौर पर किया जाता है. स्टैटिक रेंडरिंग. इन दोनों के बीच ऐनिमेट करने के लिए, स्टैंडर्ड मोड का इस्तेमाल करें बदलने के लिए Compose में Annimation API समय के साथ प्रोग्रेस की वैल्यू. उदाहरण के लिए, आप मॉर्फ़ को असीमित तौर पर ऐनिमेट कर सकते हैं इन दो आकृतियों के बीच निम्न दिखाई गई है:

val infiniteAnimation = rememberInfiniteTransition(label = "infinite animation")
val morphProgress = infiniteAnimation.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        tween(500),
        repeatMode = RepeatMode.Reverse
    ),
    label = "morph"
)
Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = morphProgress.value)
                .asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

पॉलीगॉन का इस्तेमाल क्लिप के तौर पर करें

आम तौर पर, clip कंपोज़ेबल को रेंडर करने का तरीका बदलने और उसे क्लिपिंग क्षेत्र के चारों ओर शैडो का लाभ उठाना:

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

इसके बाद, पॉलीगॉन का इस्तेमाल क्लिप के तौर पर करें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:

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

इसका नतीजा ये होता है:

ऐसा हो सकता है कि यह पहले से रेंडर किए गए तरीके से अलग न दिखे. हालांकि, इस तरीके से आपको अपने Compose में अन्य सुविधाओं का इस्तेमाल करने के लिए. उदाहरण के लिए, यह तकनीक इसका इस्तेमाल इमेज को क्लिप करने और क्लिप किए गए हिस्से के आस-पास शैडो लगाने के लिए किया जाता है:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = "Dog",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .graphicsLayer {
                this.shadowElevation = 6.dp.toPx()
                this.shape = clip
                this.clip = true
                this.ambientShadowColor = Color.Black
                this.spotShadowColor = Color.Black
            }
            .size(200.dp)

    )
}
ShapesSnippets.kt

क्लिक करने पर मॉर्फ़ बटन

graphics-shape लाइब्रेरी का इस्तेमाल करके ऐसा बटन बनाया जा सकता है जो मॉर्फ़ हो जाए दो आकृतियों को दबाया जा सकता है. सबसे पहले, एक ऐसा MorphPolygonShape बनाएं जो Shape तक बड़ा हो. बड़े पैमाने पर बदलाव करके, कॉन्टेंट को सही तरह से फ़िट करने के लिए उसका अनुवाद किया जा सकता है. किसी ताकि आकार को ऐनिमेट किया जा सके:

class MorphPolygonShape(
    private val morph: Morph,
    private val percentage: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

इस मॉर्फ़ आकार का इस्तेमाल करने के लिए, दो पॉलीगॉन shapeA और shapeB बनाएं. कुछ नया बनाएं और Morph याद रखें. इसके बाद, बटन पर क्लिप की आउटलाइन के तौर पर मॉर्फ़ लगाएं. interactionSource को दबाने पर ऐनिमेशन:

val shapeA = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val shapeB = remember {
    RoundedPolygon.star(
        6,
        rounding = CornerRounding(0.1f)
    )
}
val morph = remember {
    Morph(shapeA, shapeB)
}
val interactionSource = remember {
    MutableInteractionSource()
}
val isPressed by interactionSource.collectIsPressedAsState()
val animatedProgress = animateFloatAsState(
    targetValue = if (isPressed) 1f else 0f,
    label = "progress",
    animationSpec = spring(dampingRatio = 0.4f, stiffness = Spring.StiffnessMedium)
)
Box(
    modifier = Modifier
        .size(200.dp)
        .padding(8.dp)
        .clip(MorphPolygonShape(morph, animatedProgress.value))
        .background(Color(0xFF80DEEA))
        .size(200.dp)
        .clickable(interactionSource = interactionSource, indication = null) {
        }
) {
    Text("Hello", modifier = Modifier.align(Alignment.Center))
}
ShapesSnippets.kt

बॉक्स पर टैप करने पर, यह ऐनिमेशन दिखेगा:

आकार को असीम रूप से मॉर्फ़ करने वाले ऐनिमेशन को ऐनिमेट करें

मॉर्फ़ आकार को लगातार ऐनिमेट करने के लिए, इसका इस्तेमाल करें rememberInfiniteTransition. नीचे एक प्रोफ़ाइल फ़ोटो का उदाहरण दिया गया है, जो आकार बदलता है (और घूमता है) समय के साथ अनिश्चित समय तक नहीं पहुँचेंगे. इस तरीके में, MorphPolygonShape ऊपर दिखाए गए हैं:

class CustomRotatingMorphShape(
    private val morph: Morph,
    private val percentage: Float,
    private val rotation: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)
        matrix.rotateZ(rotation)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)

        return Outline.Generic(path)
    }
}

@Preview
@Composable
private fun RotatingScallopedProfilePic() {
    val shapeA = remember {
        RoundedPolygon(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val shapeB = remember {
        RoundedPolygon.star(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val morph = remember {
        Morph(shapeA, shapeB)
    }
    val infiniteTransition = rememberInfiniteTransition("infinite outline movement")
    val animatedProgress = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            tween(2000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    val animatedRotation = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            tween(6000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.dog),
            contentDescription = "Dog",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .clip(
                    CustomRotatingMorphShape(
                        morph,
                        animatedProgress.value,
                        animatedRotation.value
                    )
                )
                .size(200.dp)
        )
    }
}
ShapesSnippets.kt

इस कोड से यह मज़ेदार नतीजा मिलता है:

कस्टम पॉलीगॉन

अगर सामान्य पॉलीगॉन से बनाए गए आकार, आपके इस्तेमाल के उदाहरण को कवर नहीं करते हैं, तो शीर्षों की सूची के साथ एक अधिक कस्टम आकार बनाएं. उदाहरण के लिए, हो सकता है कि आप इस तरह से दिल का आकार बनाएं:

RoundedPolygon का इस्तेमाल करके, इस आकार के अलग-अलग कोने तय किए जा सकते हैं ऐसा ओवरलोड जो x, y काेऑर्डिनेट का फ़्लोट अरे लेता है.

हृदय पॉलीगॉन को विभाजित करने के लिए, ध्यान दें कि कार्टेशियन (x,y) निर्देशांक का इस्तेमाल करने की तुलना में, पॉइंट तय करना इसे आसान बनाता है सिस्टम, जहां 0° दाईं ओर से शुरू होता है और घड़ी की दिशा में आगे बढ़ता है 270°, 12 बजे की दिशा में है:

आकार को अब आसान तरीके से तय किया जा सकता है. इसके लिए, कोण (criteria) का कोण तय किया जाता है हर बिंदु पर केंद्र से त्रिज्या:

वर्टेक्स अब बनाए और RoundedPolygon फ़ंक्शन में पास किए जा सकते हैं:

val vertices = remember {
    val radius = 1f
    val radiusSides = 0.8f
    val innerRadius = .1f
    floatArrayOf(
        radialToCartesian(radiusSides, 0f.toRadians()).x,
        radialToCartesian(radiusSides, 0f.toRadians()).y,
        radialToCartesian(radius, 90f.toRadians()).x,
        radialToCartesian(radius, 90f.toRadians()).y,
        radialToCartesian(radiusSides, 180f.toRadians()).x,
        radialToCartesian(radiusSides, 180f.toRadians()).y,
        radialToCartesian(radius, 250f.toRadians()).x,
        radialToCartesian(radius, 250f.toRadians()).y,
        radialToCartesian(innerRadius, 270f.toRadians()).x,
        radialToCartesian(innerRadius, 270f.toRadians()).y,
        radialToCartesian(radius, 290f.toRadians()).x,
        radialToCartesian(radius, 290f.toRadians()).y,
    )
}
ShapesSnippets.kt

इसका इस्तेमाल करके शीर्षों को कार्टेशियन निर्देशांक में बदलना चाहिए radialToCartesian फ़ंक्शन:

internal fun Float.toRadians() = this * PI.toFloat() / 180f

internal val PointZero = PointF(0f, 0f)
internal fun radialToCartesian(
    radius: Float,
    angleRadians: Float,
    center: PointF = PointZero
) = directionVectorPointF(angleRadians) * radius + center

internal fun directionVectorPointF(angleRadians: Float) =
    PointF(cos(angleRadians), sin(angleRadians))
ShapesSnippets.kt

ऊपर दिया गया कोड आपको दिल के लिए रॉ वर्टेक्स देता है, लेकिन आपको चुने हुए दिल का आकार पाने के लिए, उसके खास कोनों को गोल रखें. 90° पर कोने और 270° के पूर्णांकन में कोई अंक नहीं है, लेकिन दूसरे कोनों में ऐसा है. पसंद के मुताबिक राउंडिंग पाने के लिए अलग-अलग कोनों के लिए, perVertexRounding पैरामीटर का इस्तेमाल करें:

val rounding = remember {
    val roundingNormal = 0.6f
    val roundingNone = 0f
    listOf(
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
    )
}

val polygon = remember(vertices, rounding) {
    RoundedPolygon(
        vertices = vertices,
        perVertexRounding = rounding
    )
}
Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygonPath = polygon.toPath().asComposePath()
            onDrawBehind {
                scale(size.width * 0.5f, size.width * 0.5f) {
                    translate(size.width * 0.5f, size.height * 0.5f) {
                        drawPath(roundedPolygonPath, color = Color(0xFFF15087))
                    }
                }
            }
        }
        .size(400.dp)
)
ShapesSnippets.kt

इससे दिल का रंग गुलाबी हो जाएगा:

अगर ऊपर दिए गए आकार आपके इस्तेमाल के उदाहरण को कवर नहीं करते हैं, तो Path का इस्तेमाल करें एक कस्टम ड्रॉर बनाने के लिए क्लास आकार या किसी फ़ाइल को लोड करके ImageVector की यहां से फ़ाइल डिस्क. graphics-shapes लाइब्रेरी का इस्तेमाल आर्बिट्रेरी कामों के लिए नहीं किया जाना चाहिए आकार, लेकिन खास तौर पर गोल बहुभुजों की रचना को सरल बनाने के लिए और उनके बीच मॉर्फ़ ऐनिमेशन का इस्तेमाल करें.

अन्य संसाधन

ज़्यादा जानकारी और उदाहरणों के लिए, यहां दिए गए संसाधन देखें:

• ब्लॉग: द शेप ऑफ़ थिंग्स टू कम - शेप्स
• ब्लॉग: Android में आकार को मॉर्फ़ करना
• आकार GitHub प्रदर्शन