Bentuk di Compose

Dengan Compose, Anda dapat membuat bentuk yang terbuat dari poligon. Misalnya, Anda dapat membuat jenis bentuk berikut:

Segi enam biru di tengah area gambar
Gambar 1. Contoh berbagai bentuk yang dapat Anda buat dengan library graphics-shapes

Untuk membuat poligon bulat kustom di Compose, tambahkan dependensi graphics-shapes ke app/build.gradle:

implementation "androidx.graphics:graphics-shapes:1.0.1"

Library ini memungkinkan Anda membuat bentuk yang terbuat dari poligon. Meskipun bentuk poligonal hanya memiliki tepi lurus dan sudut tajam, bentuk ini memungkinkan sudut membulat opsional. Alat ini memudahkan perubahan antara dua bentuk yang berbeda. Perubahan bentuk sulit dilakukan di antara bentuk arbitrer, dan cenderung menjadi masalah waktu desain. Namun, library ini menyederhanakannya dengan mengubah bentuk-bentuk ini dengan struktur poligonal yang serupa.

Membuat poligon

Cuplikan berikut membuat bentuk poligon dasar dengan 6 titik di tengah area gambar:

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()
)

Segi enam biru di tengah area gambar
Gambar 2. Segienam biru di tengah area gambar.

Dalam contoh ini, library membuat RoundedPolygon yang menyimpan geometri yang mewakili bentuk yang diminta. Untuk menggambar bentuk tersebut di aplikasi Compose, Anda harus mendapatkan objek Path darinya untuk mendapatkan bentuk ke dalam formulir yang diketahui Compose cara menggambarnya.

Membulatkan sudut poligon

Untuk membulatkan sudut poligon, gunakan parameter CornerRounding. Metode ini menggunakan dua parameter, radius dan smoothing. Setiap sudut lengkung terdiri dari 1-3 kurva kubik, yang bagian tengahnya memiliki bentuk busur lingkaran, sedangkan dua kurva samping ("mengapit") bertransisi dari tepi bentuk ke kurva tengah.

Radius

radius adalah radius lingkaran yang digunakan untuk membulatkan verteks.

Misalnya, segitiga bersudut bulat berikut dibuat sebagai berikut:

Segitiga dengan sudut membulat
Gambar 3. Segitiga dengan sudut membulat.
Radius pembulatan r menentukan ukuran pembulatan melingkar dari sudut membulat
Gambar 4. Radius pembulatan r menentukan ukuran pembulatan melingkar dari sudut membulat.

Penghalusan

Penghalusan adalah faktor yang menentukan berapa lama waktu yang diperlukan untuk beralih dari bagian pembulatan melingkar di sudut ke tepi. Faktor penghalusan 0 (tidak dihaluskan, nilai default untuk CornerRounding) menghasilkan pembulatan sudut yang sepenuhnya melingkar. Faktor penghalusan bukan nol (hingga maksimum 1,0) menghasilkan sudut yang dibulatkan oleh tiga kurva terpisah.

Faktor penghalusan 0 (tidak dihaluskan) menghasilkan satu kurva kubik yang mengikuti lingkaran di sekitar sudut dengan radius pembulatan yang ditentukan, seperti pada contoh sebelumnya
Gambar 5. Faktor penghalusan 0 (tidak dihaluskan) menghasilkan satu kurva kubik yang mengikuti lingkaran di sekitar sudut dengan radius pembulatan yang ditentukan, seperti dalam contoh sebelumnya.
Faktor penghalusan bukan nol menghasilkan tiga kurva kubik untuk membulatkan verteks: kurva melingkar dalam (seperti sebelumnya) ditambah dua kurva mengapit yang bertransisi antara kurva dalam dan tepi poligon.
Gambar 6. Faktor penghalusan bukan nol menghasilkan tiga kurva kubik untuk membulatkan verteks: kurva melingkar dalam (seperti sebelumnya) ditambah dua kurva yang mengapit yang bertransisi antara kurva dalam dan tepi poligon.

Misalnya, cuplikan di bawah mengilustrasikan perbedaan kecil dalam menyetel penghalusan ke 0 versus 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)
)

Dua segitiga hitam yang menunjukkan perbedaan parameter penghalusan.
Gambar 7. Dua segitiga hitam yang menunjukkan perbedaan parameter penghalusan.

Ukuran dan posisi

Secara default, bentuk dibuat dengan radius 1 di sekitar pusat (0, 0). Radius ini mewakili jarak antara pusat dan verteks eksterior poligon yang menjadi dasar bentuk. Perhatikan bahwa membulatkan sudut akan menghasilkan bentuk yang lebih kecil karena sudut yang dibulatkan akan lebih dekat ke pusat daripada verteks yang dibulatkan. Untuk menentukan ukuran poligon, sesuaikan nilai radius. Untuk menyesuaikan posisi, ubah centerX atau centerY poligon. Atau, ubah objek untuk mengubah ukuran, posisi, dan rotasinya menggunakan fungsi transformasi DrawScope standar seperti DrawScope#translate().

Bentuk morph

Objek Morph adalah bentuk baru yang merepresentasikan animasi antara dua bentuk poligon. Untuk melakukan morphing di antara dua bentuk, buat dua RoundedPolygons dan objek Morph yang menggunakan kedua bentuk ini. Untuk menghitung bentuk antara bentuk awal dan akhir, berikan nilai progress antara nol dan satu untuk menentukan bentuknya antara bentuk awal (0) dan akhir (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()
)

Pada contoh di atas, progresnya tepat berada di tengah-tengah antara kedua bentuk (segitiga bulat dan persegi), sehingga menghasilkan hasil berikut:

50% di antara segitiga bulat dan persegi
Gambar 8. 50% dari bentuk antara segitiga bulat dan persegi.

Dalam sebagian besar skenario, morphing dilakukan sebagai bagian dari animasi, dan bukan hanya rendering statis. Untuk menganimasikan di antara keduanya, Anda dapat menggunakan Animation API standar di Compose untuk mengubah nilai progres dari waktu ke waktu. Misalnya, Anda dapat menganimasikan perubahan bentuk antara kedua bentuk ini tanpa batas sebagai berikut:

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()
)

Berubah bentuk tanpa batas antara persegi dan segitiga bulat
Gambar 9. Berubah tanpa batas antara persegi dan segitiga bulat.

Gunakan poligon sebagai klip

Pengubah clip biasa digunakan di Compose untuk mengubah cara composable dirender, dan untuk memanfaatkan bayangan yang digambar di sekitar area pemangkasan:

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)
    }
}

Kemudian, Anda dapat menggunakan poligon sebagai klip, seperti yang ditunjukkan dalam cuplikan berikut:

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)
    )
}

Hal ini menghasilkan hal berikut:

Hexagon dengan teks `hello compose` di tengah.
Gambar 10. Hexagon dengan teks "Hello Compose" di tengah.

Tampilan ini mungkin tidak terlihat berbeda dari yang dirender sebelumnya, tetapi memungkinkan penggunaan fitur lain di Compose. Misalnya, teknik ini dapat digunakan untuk memotong gambar dan menerapkan bayangan di sekitar area yang dipotong:

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)

    )
}

Anjing dalam heksagon dengan bayangan yang diterapkan di sekitar tepinya
Gambar 11. Bentuk kustom diterapkan sebagai klip.

Tombol morph saat diklik

Anda dapat menggunakan library graphics-shape untuk membuat tombol yang berubah bentuk di antara dua bentuk saat ditekan. Pertama, buat MorphPolygonShape yang memperluas Shape, dengan menskalakan dan menerjemahkannya agar sesuai. Perhatikan penerusan progres sehingga bentuk dapat dianimasikan:

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)
    }
}

Untuk menggunakan bentuk morph ini, buat dua poligon, shapeA dan shapeB. Buat dan ingat Morph. Kemudian, terapkan morph ke tombol sebagai garis batas klip, menggunakan interactionSource saat ditekan sebagai pendorong di balik animasi:

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))
}

Tindakan ini akan menghasilkan animasi berikut saat kotak diketuk:

Morph diterapkan sebagai klik di antara dua bentuk
Gambar 12. Perubahan bentuk diterapkan sebagai klik di antara dua bentuk.

Menganimasikan perubahan bentuk tanpa batas

Untuk menganimasikan bentuk morph tanpa henti, gunakan rememberInfiniteTransition. Berikut adalah contoh foto profil yang berubah bentuk (dan berputar) tanpa batas seiring waktu. Pendekatan ini menggunakan sedikit penyesuaian pada MorphPolygonShape yang ditampilkan di atas:

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)
        )
    }
}

Kode ini memberikan hasil yang menarik berikut:

Bentuk hati
Gambar 13. Foto profil yang dipotong oleh bentuk bergerigi yang berputar.

Poligon kustom

Jika bentuk yang dibuat dari poligon reguler tidak mencakup kasus penggunaan Anda, Anda dapat membuat bentuk yang lebih kustom dengan daftar verteks. Misalnya, Anda mungkin ingin membuat bentuk hati seperti ini:

Bentuk hati
Gambar 14. Bentuk hati.

Anda dapat menentukan setiap verteks bentuk ini menggunakan overload RoundedPolygon yang menggunakan array float koordinat x, y.

Untuk menguraikan poligon jantung, perhatikan bahwa sistem koordinat polar untuk menentukan titik membuat hal ini lebih mudah daripada menggunakan sistem koordinat kartesius (x,y), dengan 0° dimulai di sisi kanan, dan berlanjut searah jarum jam, dengan 270° pada posisi jam 12:

Bentuk hati
Gambar 15. Bentuk hati dengan koordinat.

Bentuknya kini dapat ditentukan dengan cara yang lebih mudah dengan menentukan sudut (𝜭) dan radius dari pusat di setiap titik:

Bentuk hati
Gambar 16. Bentuk hati dengan koordinat, tanpa pembulatan.

Vertex kini dapat dibuat dan diteruskan ke fungsi 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,
    )
}

Verteks harus diterjemahkan ke dalam koordinat Kartesius menggunakan fungsi radialToCartesian ini:

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))

Kode sebelumnya memberi Anda verteks mentah untuk bentuk hati, tetapi Anda perlu membulatkan sudut tertentu untuk mendapatkan bentuk hati yang dipilih. Sudut di 90° dan 270° tidak memiliki pembulatan, tetapi sudut lainnya memiliki pembulatan. Untuk mencapai pembulatan kustom untuk setiap sudut, gunakan parameter 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)
)

Tindakan ini akan menghasilkan hati merah muda:

Bentuk hati
Gambar 17. Hasil berbentuk hati.

Jika bentuk sebelumnya tidak mencakup kasus penggunaan Anda, pertimbangkan untuk menggunakan class Path untuk menggambar bentuk kustom, atau memuat file ImageVector dari disk. Library graphics-shapes tidak dimaksudkan untuk digunakan untuk bentuk arbitrer, tetapi secara khusus dimaksudkan untuk menyederhanakan pembuatan poligon membulat dan animasi perubahan bentuk di antaranya.

Referensi lainnya

Untuk mengetahui informasi dan contoh selengkapnya, lihat referensi berikut: