docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: android-compose-custom-layout
|
||||
title: Compose Custom Layout — Layout / SubcomposeLayout
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [android, compose, layout, vibe-coding]
|
||||
tech_stack: { language: "Kotlin / Compose", applicable_to: ["Android"] }
|
||||
applied_in: []
|
||||
aliases: [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 (단순)
|
||||
```kotlin
|
||||
@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
|
||||
```kotlin
|
||||
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 (자식 측정 후 다른 자식)
|
||||
```kotlin
|
||||
@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)
|
||||
```kotlin
|
||||
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
|
||||
```kotlin
|
||||
@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
|
||||
```kotlin
|
||||
@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]]
|
||||
Reference in New Issue
Block a user