Bentuk di Compose

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

Heksagon biru di tengah area gambar
Gambar 1. Contoh berbagai bentuk yang dapat Anda buat dengan library bentuk grafik

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

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

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. Hal 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 mempermudahnya dengan mengubah bentuk antara 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()
)
ShapesSnippets.kt

Heksagon biru di tengah area gambar
Gambar 2. Heksagon biru di bagian 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 bentuk 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 membulat terdiri dari 1-3 kurva kubik, yang bagian tengahnya memiliki bentuk busur lingkaran, sedangkan dua kurva samping ("menyamping") bertransisi dari tepi bentuk ke kurva tengah.

Radius

radius adalah radius lingkaran yang digunakan untuk membulatkan vertex.

Misalnya, segitiga sudut membulat berikut dibuat sebagai berikut:

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

Kehalusan

Penghalusan adalah faktor yang menentukan waktu yang diperlukan untuk berpindah 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 non-nol (hingga maksimum 1,0) akan menyebabkan sudut 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 pada contoh sebelumnya.
Faktor penghalusan non-nol menghasilkan tiga kurva kubik untuk membulatkan vertikal: kurva melingkar bagian dalam (seperti sebelumnya) ditambah dua kurva samping yang bertransisi antara kurva bagian dalam dan tepi poligon.
Gambar 6. Faktor penghalusan non-nol menghasilkan tiga kurva kubik untuk membulatkan vertikal: kurva lingkaran bagian dalam (seperti sebelumnya) ditambah dua kurva samping yang bertransisi antara kurva bagian dalam dan tepi poligon.

Misalnya, cuplikan di bawah ini mengilustrasikan perbedaan kecil dalam menetapkan 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)
)

ShapesSnippets.kt

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 vertex luar poligon tempat bentuk didasarkan. Perhatikan bahwa membulatkan sudut akan menghasilkan bentuk yang lebih kecil karena sudut yang dibulatkan akan lebih dekat ke tengah daripada vertex yang dibulatkan. Untuk menentukan ukuran poligon, sesuaikan nilai radius. Untuk menyesuaikan posisi, ubah centerX atau centerY poligon. Atau, transformasikan objek untuk mengubah ukuran, posisi, dan rotasinya menggunakan fungsi transformasi DrawScope standar seperti DrawScope#translate().

Bentuk morph

Objek Morph adalah bentuk baru yang mewakili animasi antara dua bentuk poligonal. Untuk mengubah bentuk antara dua bentuk, buat dua objek RoundedPolygons dan Morph yang menggunakan dua 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()
)
ShapesSnippets.kt

Dalam contoh di atas, progresnya tepat di tengah antara dua bentuk (segitiga membulat dan persegi), yang menghasilkan hasil berikut:

50% dari antara segitiga membulat dan persegi
Gambar 8. 50% dari segitiga membulat dan persegi.

Dalam sebagian besar skenario, morphing dilakukan sebagai bagian dari animasi, dan bukan hanya rendering statis. Untuk menganimasikan antara keduanya, Anda dapat menggunakan Animation API standar di Compose untuk mengubah nilai progres dari waktu ke waktu. Misalnya, Anda dapat menganimasikan morph antara dua 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()
)
ShapesSnippets.kt

Berubah secara tak terbatas antara persegi dan segitiga membulat
Gambar 9. Berubah secara tak terbatas antara persegi dan segitiga membulat.

Menggunakan poligon sebagai klip

Umumnya, pengubah clip digunakan di Compose untuk mengubah cara rendering composable, dan untuk memanfaatkan bayangan yang menggambar 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)
    }
}
ShapesSnippets.kt

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)
    )
}
ShapesSnippets.kt

Hal ini menghasilkan hal berikut:

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

Tampilan ini mungkin tidak terlihat berbeda dengan yang dirender sebelumnya, tetapi memungkinkan pengoptimalan fitur lain di Compose. Misalnya, teknik ini dapat digunakan untuk memangkas gambar dan menerapkan bayangan di sekitar area yang dipangkas:

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

Anjing dalam bentuk segi enam dengan bayangan yang diterapkan di sekitar tepi
Gambar 11. Bentuk kustom diterapkan sebagai klip.

Tombol morph saat diklik

Anda dapat menggunakan library graphics-shape untuk membuat tombol yang berubah antara dua bentuk saat ditekan. Pertama, buat MorphPolygonShape yang memperluas Shape, 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)
    }
}

ShapesSnippets.kt

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))
}
ShapesSnippets.kt

Tindakan ini akan menghasilkan animasi berikut saat kotak diketuk:

Morph diterapkan sebagai klik di antara dua bentuk
Gambar 12. Morph 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 mengubah bentuk (dan memutar) tanpa batas dari waktu ke waktu. Pendekatan ini menggunakan penyesuaian kecil 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)
        )
    }
}
ShapesSnippets.kt

Kode ini memberikan hasil yang menyenangkan berikut:

Tangan membentuk hati
Gambar 13. Foto profil yang dipangkas 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 vertex. Misalnya, Anda mungkin ingin membuat bentuk hati seperti ini:

Tangan membentuk hati
Gambar 14. Bentuk hati.

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

Untuk menguraikan poligon hati, perhatikan bahwa sistem koordinat kutub untuk menentukan titik mempermudah hal ini daripada menggunakan sistem koordinat cartesian (x,y), dengan 0° dimulai di sisi kanan, dan dilanjutkan searah jarum jam, dengan 270° di posisi jam 12:

Tangan membentuk hati
Gambar 15. Bentuk hati dengan koordinat.

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

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

Sekarang, vertex 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,
    )
}
ShapesSnippets.kt

Vertix 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))
ShapesSnippets.kt

Kode sebelumnya memberi Anda vertex mentah untuk 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 mendapatkan 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)
)
ShapesSnippets.kt

Tindakan ini akan menghasilkan hati berwarna merah muda:

Tangan membentuk hati
Gambar 17. Hasil bentuk 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 transformasi di antaranya.

Referensi lainnya

Untuk informasi dan contoh selengkapnya, lihat referensi berikut: