분할 화면 (Compose)

이전에 작성한 분할 화면의 Compose 코드

@Composable
fun SplitLayer(
    topLayer: @Composable (modifier: Modifier) -> Unit,
    bottomLayer: @Composable (modifier: Modifier) -> Unit,
    dragView: @Composable (modifier: Modifier) -> Unit,
    min: Float = 0.1f,
    max: Float = 0.95f,
    modifier: Modifier = Modifier
) {
    var height by remember { mutableStateOf(0) }
    var percent by remember { mutableFloatStateOf(0.5f) }

    Box(
        modifier = modifier
            .clipToBounds()
            .onGloballyPositioned {
                height = it.size.height
            }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
        ) {
            val topWeight = 0.5f - (0.5f - percent)
            val bottomWeight = 0.5f + (0.5f - percent)

            topLayer(
                Modifier
                    .fillMaxWidth()
                    .weight(topWeight)
            )

            bottomLayer(
                Modifier
                    .fillMaxWidth()
                    .weight(bottomWeight)
            )
        }

        var dragHeight by remember { mutableStateOf(0) }
        val y = (height * percent) - (dragHeight / 2)

        Surface(
            color = Color.Transparent,
            modifier = Modifier
                .fillMaxWidth()
                .offset { IntOffset(x = 0, y = y.roundToInt()) }
                .onGloballyPositioned { dragHeight = it.size.height }
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        percent = (percent + (dragAmount.y / height)).coerceIn(min, max)
                    }
                }
        ) {
            dragView(Modifier)
        }
    }
}