2nd/10_Wiki/Topic_Programming/Coding/Android_Compose_Custom_Layout.md

id, title, category, status, source_trust_level, verification_status, created_at, updated_at, tags, tech_stack, applied_in, aliases

id	title	category	status	source_trust_level	verification_status	created_at	updated_at	tags	tech_stack	applied_in	aliases
android-compose-custom-layout	Compose Custom Layout — Layout / SubcomposeLayout	Coding	draft	B	conceptual	2026-05-09	2026-05-09	android compose layout vibe-coding	language applicable_to Kotlin / Compose Android		Layout composable measure place SubcomposeLayout intrinsic modifier

Compose Custom Layout

Row / Column 으로 부족할 때. Layout composable 직접 작성 = 측정 + 배치 제어. SubcomposeLayout 으로 child 측정 결과 기반 동적 layout. Modifier.layout 도 가능.

📖 핵심 개념

• Single-pass measurement: 측정 한 번 → 배치 한 번.
• Constraints: min/max width/height.
• Placeable: measure 의 결과.
• SubcomposeLayout: 자식의 measure 결과로 다른 자식 만들기.

💻 코드 패턴

Layout (단순)

@Composable
fun StaggeredGrid(
    columns: Int,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    Layout(content = content, modifier = modifier) { measurables, constraints ->
        val cellWidth = constraints.maxWidth / columns
        val cellConstraints = constraints.copy(minWidth = 0, maxWidth = cellWidth)

        val placeables = measurables.map { it.measure(cellConstraints) }

        // 컬럼별 height tracking
        val colHeights = IntArray(columns) { 0 }
        val positions = placeables.map { p ->
            val col = colHeights.indexOf(colHeights.min()!!)
            val x = col * cellWidth
            val y = colHeights[col]
            colHeights[col] += p.height
            x to y
        }

        val totalHeight = colHeights.max() ?: 0

        layout(constraints.maxWidth, totalHeight) {
            placeables.forEachIndexed { i, p ->
                val (x, y) = positions[i]
                p.placeRelative(x, y)
            }
        }
    }
}

Modifier.layout

fun Modifier.firstBaselineToTop(top: Dp) = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    val baseline = placeable[FirstBaseline]
    val placeY = top.roundToPx() - baseline
    layout(placeable.width, placeable.height + placeY) {
        placeable.placeRelative(0, placeY)
    }
}

SubcomposeLayout (자식 측정 후 다른 자식)

@Composable
fun TwoColumnsWithMatchedHeight(
    left: @Composable () -> Unit,
    right: @Composable () -> Unit,
) {
    SubcomposeLayout { constraints ->
        // 1. 먼저 left 측정
        val leftPlaceables = subcompose("left", left).map { it.measure(constraints) }
        val leftHeight = leftPlaceables.maxOf { it.height }

        // 2. right 를 leftHeight 로 강제
        val rightPlaceables = subcompose("right", right)
            .map { it.measure(constraints.copy(minHeight = leftHeight, maxHeight = leftHeight)) }

        val width = leftPlaceables.maxOf { it.width } + rightPlaceables.maxOf { it.width }

        layout(width, leftHeight) {
            var x = 0
            leftPlaceables.forEach { it.place(x, 0); x += it.width }
            rightPlaceables.forEach { it.place(x, 0); x += it.width }
        }
    }
}

ParentDataModifier (자식이 부모에 hint)

class WeightModifier(val weight: Float) : ParentDataModifier {
    override fun Density.modifyParentData(parentData: Any?): Any = this@WeightModifier
}

fun Modifier.weight(weight: Float) = then(WeightModifier(weight))

@Composable
fun WeightedRow(content: @Composable () -> Unit) {
    Layout(content) { measurables, constraints ->
        val totalWeight = measurables.sumOf { (it.parentData as? WeightModifier)?.weight?.toDouble() ?: 0.0 }
        // ... distribute width by weight
    }
}

Intrinsic measurement

@Composable
fun MyBox(content: @Composable () -> Unit) {
    Layout(content) { measurables, constraints ->
        // Intrinsic: 자식의 minHeight 알고 싶음 (실제 측정 전)
        val maxIntrinsicHeight = measurables.maxOf { it.maxIntrinsicHeight(constraints.maxWidth) }
        // ...
    }
}

부모가 Modifier.height(IntrinsicSize.Min) 사용 시 invoked.

Animation 친화 — looping content

@Composable
fun MarqueeText(text: String, modifier: Modifier = Modifier) {
    val measurer = rememberTextMeasurer()
    val textLayout = measurer.measure(text, TextStyle.Default)
    val width = textLayout.size.width

    val offset = remember { Animatable(0f) }
    LaunchedEffect(Unit) {
        offset.animateTo(-width.toFloat(), animationSpec = tween(5000, easing = LinearEasing))
    }

    Canvas(modifier) {
        drawText(textLayout, topLeft = Offset(offset.value, 0f))
        drawText(textLayout, topLeft = Offset(offset.value + width, 0f))
    }
}

🤔 의사결정 기준

상황	도구
단순 grid / row / column	Row, Column, Grid
Staggered / flow	LazyVerticalStaggeredGrid / FlowRow
부모가 자식 크기에 따라 다르게	SubcomposeLayout
자식이 부모에 weight	ParentDataModifier
측정 변형 만	Modifier.layout
Canvas / 그림	Canvas + drawIntoCanvas

❌ 안티패턴

• Layout 안에서 Composable 다중 측정: 한 번만 measure.
• placeable.place + RTL 무시: placeRelative 가 자동.
• Intrinsic 함수 매번 무거움: cache or 단순화.
• SubcomposeLayout 남발: 측정 N 번 = 느림. 정말 필요할 때만.
• Modifier 대신 Composable 만들기 — 유연성 잃음: Modifier 가 유연.
• constraints 무시 + 자기 마음대로: parent / child 가정 충돌.

🤖 LLM 활용 힌트

• 90% = Row / Column / FlowRow / LazyGrid 로 충분.
• 10% = Layout 직접 (staggered).
• SubcomposeLayout 은 정말 필요할 때만.

🔗 관련 문서

• Android_Compose_State_Hoisting
• Android_Compose_Recomposition_Pitfalls
• React_Component_Composition