Files

T

Antigravity Agent 93ec7e9056 [G1-Sync] Manual knowledge update

2026-05-09 21:08:02 +09:00

5.8 KiB

Raw Blame History

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

title

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 은 정말 필요할 때만.

5.8 KiB Raw Blame History