使用 Jetpack Compose Android 自定義形狀

Question

我正在嘗試使用 Jetpack Compose 為 Android 視圖創建自定義形狀，這是示例：

我不知道如何為這個形狀創建小波浪（頂部/底部）。 我需要有一個盒子和一個自定義形狀嗎？ 因為我需要在這個形狀內添加一些文本。

如何使用 Jetpack Compose 創建此元素？

Answer 1

您將需要一個自定義形狀：

class CustomShape(private val waveCount: Int = 20): Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            path = drawCustomPath(size, waveCount)
        )
    }
}

大綱的路徑：

fun drawCustomPath(size: Size, waveCount: Int): Path {
    val waveLength = size.width / (waveCount + 1)
    val waveHeight = waveLength / 5
    val gap = 3*waveLength/4
    return Path().apply {
        reset()
        moveTo(0f, 0f)
        arcTo(
            rect = Rect(topLeft = Offset(-waveLength/4, 0f),
                bottomRight = Offset(waveLength / 4, waveHeight)),
            startAngleDegrees = 270f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        arcTo(
            rect = Rect(topLeft = Offset(waveLength / 4, 0f),
                bottomRight = Offset(gap, waveHeight)),
            startAngleDegrees = 180f,
            sweepAngleDegrees = -180f,
            forceMoveTo = false
        )
        for (i in 1..waveCount) {
            arcTo(
                rect = Rect(topLeft = Offset(gap + waveLength * (i-1), 0f),
                    bottomRight = Offset(gap + waveLength * (i-1) + waveLength/2, waveHeight)),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            arcTo(
                rect = Rect(topLeft = Offset(gap + waveLength * (i-1) + waveLength/2, 0f),
                    bottomRight = Offset(gap + waveLength * i, waveHeight)),
                startAngleDegrees = 180f,
                sweepAngleDegrees = -180f,
                forceMoveTo = false
            )
        }
        arcTo(
            rect = Rect(topLeft = Offset(size.width - waveLength/4, 0f),
                bottomRight = Offset(size.width + waveLength/4, waveHeight)),
            startAngleDegrees = 180f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(size.width, size.height)
        arcTo(
            rect = Rect(
                topLeft = Offset(size.width - waveLength/4, size.height - waveHeight),
                bottomRight = Offset(size.width + waveLength/4, size.height)),
            startAngleDegrees = 90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        arcTo(
            rect = Rect(
                topLeft = Offset(size.width - gap,
                    size.height - waveHeight),
                bottomRight = Offset(size.width - waveLength/4, size.height)),
            startAngleDegrees = 0f,
            sweepAngleDegrees = -180f,
            forceMoveTo = false
        )
        for (i in 1..waveCount) {
            arcTo(rect = Rect(
                topLeft = Offset(size.width - gap - waveLength*(i-1) - waveLength/2,
                    size.height - waveHeight),
                bottomRight = Offset(size.width - gap - waveLength*(i-1),
                    size.height)),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            arcTo(
                rect = Rect(
                    topLeft = Offset(size.width - gap - waveLength * i,
                        size.height - waveHeight),
                    bottomRight = Offset(size.width - gap - waveLength*(i-1) - waveLength/2,
                        size.height)),
                startAngleDegrees = 0f,
                sweepAngleDegrees = -180f,
                forceMoveTo = false
            )
        }
        arcTo(
            rect = Rect(topLeft = Offset(-waveLength/4, size.height - waveHeight),
                bottomRight = Offset(waveLength/4, size.height)),
            startAngleDegrees = 0f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        close()
    }
}

你會得到這樣的東西：