【Android Jetpack Compose】垂直Sliderの作成

はじめに

Android Jetpack Composeで、垂直Sliderを作成する方法について解説。

方法

graphicsLayerとlayoutを下記のように変更することにより実装できる。

@Composable
fun MainView(modifier: Modifier = Modifier) {
    var value by remember { mutableFloatStateOf(0f) }
    Slider(
        modifier = modifier
            .graphicsLayer {
                rotationZ = 90f
                transformOrigin = TransformOrigin(0f, 0f)
            }
            .layout { measurable, constraints ->
                val placeable = measurable.measure(
                    Constraints(
                        minWidth = constraints.minHeight,
                        maxWidth = constraints.maxHeight,
                        minHeight = constraints.minWidth,
                        maxHeight = constraints.maxHeight,
                    )
                )
                layout(placeable.height, placeable.width) {
                    placeable.place(0, -placeable.height)
                }
            },
        value = value,
        onValueChange = { value = it }
    )
}