안드로이드/개발관련(Kotlin)

눈금이 있는 Slide (Compose)

닉네임못짓는사람 2024. 7. 30. 20:54
반응형
@Composable
fun ScaleTrack(
    color: Color,
    width: Float = 1f,
    height: Dp = 1.dp,
    rangeSize: Int, // It's (maxValue - minValue) / steps
    modifier: Modifier = Modifier
) {
    Canvas(
        modifier = modifier
            .fillMaxSize()
    ) {
        val horizontalHeight = size.height / 2
        drawLine(
            color = color,
            start = Offset(0f, horizontalHeight),
            end = Offset(size.width, horizontalHeight),
            strokeWidth = width,
            StrokeCap.Butt
        )

        for (i in 0 .. rangeSize) {
            val xOffset: Float = if (i == 0) 0f else (i / rangeSize.toFloat()) * size.width
            val yOffset = (size.height - height.toPx()) / 2
            drawLine(
                color = color,
                start = Offset(xOffset, 0f + yOffset),
                end = Offset(xOffset, size.height - yOffset),
                strokeWidth = width,
                StrokeCap.Butt
            )
        }
    }
}

compose slide를 사용하여 0, 1, 2 같이 딱 떨어지는 수로 조정할 때 각 값마다 눈금을 추가

반응형