지금까지 Row, Column, Box로 거의 모든 화면을 만들었다. 이게 안 되는 경우와, 폰이 아니라 태블릿에서 켰을 때를 다뤄보자.

Row, Column으로 안 되는 배치가 있다

예를 들어 "두 번째 아이템을 첫 번째 아이템 오른쪽 아래로 절반 겹치게" 같은 배치는 Row/Column/Box의 정해진 규칙(가로로, 세로로, 겹쳐서)으로는 표현이 안 된다. 이럴 때 Layout을 직접 쓴다.

@Composable
fun OverlapLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(modifier = modifier, content = content) { measurables, constraints ->
        val placeables = measurables.map { it.measure(constraints) }
        val width = placeables[0].width + placeables[1].width / 2
        val height = placeables[0].height + placeables[1].height / 2

        layout(width, height) {
            placeables[0].placeRelative(x = 0, y = 0)
            placeables[1].placeRelative(
                x = placeables[0].width / 2,
                y = placeables[0].height / 2
            )
        }
    }
}

measurables는 안에 든 자식들(여기서는 두 개)을 아직 크기가 정해지지 않은 상태로 받은 것이다. measure(constraints)를 호출해야 실제 크기가 있는 Placeable이 된다. layout(width, height) { } 블록 안에서 각 자식을 placeRelative(x, y)로 원하는 위치에 놓는다. Row/Column은 결국 이 Layout을 내부적으로 쓰면서 "가로로 나열한다", "세로로 나열한다"는 배치 규칙만 미리 정해둔 것이다. 직접 Layout을 쓰면 그 규칙 자체를 내가 정할 수 있다.

이런 저수준 API는 거의 안 쓴다. 대부분은 Row, Column, Box, 그리고 이들을 조합한 커스텀 컴포저블로 충분하고, Layout은 정말 특수한 배치가 필요할 때만 꺼낸다.

이제 폰이 아니라 태블릿에서 열어보면

지금 todo_project는 폰 화면만 생각하고 만들었다. 목록 화면에서 항목을 누르면 상세 화면으로 전체 화면 전환이 일어나는데, 태블릿 같은 큰 화면에서는 이게 공간 낭비다. 목록과 상세를 나란히 보여줄 수 있는데 굳이 화면을 다 바꿔 끼우는 거다.

화면이 얼마나 넓은지부터 알아야 한다

// build.gradle.kts
dependencies {
    implementation("androidx.window:window:1.5.0")
}

import androidx.window.layout.WindowMetricsCalculator
import androidx.window.core.layout.WindowSizeClass

@Composable
fun TodoApp() {
    val context = LocalContext.current
    val windowMetrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(context)
    val sizeClass = WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass(windowMetrics)

    val isWideScreen = sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)

    if (isWideScreen) {
        TabletLayout()
    } else {
        PhoneLayout()
    }
}

WindowSizeClass는 화면을 정확한 dp 수치 대신 "폭이 대략 이 정도 구간이다"로 뭉뚱그려서 알려준다. isWidthAtLeastBreakpoint(...)로 "적어도 이 너비는 되는가"를 물어보는 식으로 쓴다. 구체적인 dp 값으로 if문을 수십 개 쓰는 대신, "좁다/중간/넓다" 몇 단계로만 나눠서 판단하는 게 핵심이다.

좁은 화면과 넓은 화면, 레이아웃을 다르게

@Composable
fun PhoneLayout() {
    // 지금까지 만든 NavHost 방식: 목록 화면 ↔ 상세 화면
    val navController = rememberNavController()
    NavHost(navController, startDestination = "list") {
        composable("list") { TodoListScreen(/* ... */) }
        composable("detail/{todoId}") { /* ... */ }
    }
}

@Composable
fun TabletLayout() {
    var selectedTodoId by remember { mutableStateOf<Int?>(null) }

    Row(modifier = Modifier.fillMaxSize()) {
        Box(modifier = Modifier.weight(1f)) {
            TodoListScreen(
                /* ... */
                onTodoClick = { todo -> selectedTodoId = todo.id }
            )
        }
        Box(modifier = Modifier.weight(1f)) {
            TodoDetailScreen(
                todo = /* selectedTodoId로 찾은 Todo */,
                /* ... */
            )
        }
    }
}

[이미지: 태블릿 너비에서 목록과 상세가 좌우로 나란히 떠 있는 화면]

폰에서는 지금까지 쓰던 네비게이션 방식 그대로 쓰고, 태블릿에서는 화면 전환 없이 Row로 목록과 상세를 나란히 띄운다. TodoListScreen, TodoDetailScreen 자체는 그대로 재사용한다. 상태 호이스팅을 해둔 덕분에, 이 둘을 어떤 레이아웃에 어떻게 배치할지는 바깥(PhoneLayout/TabletLayout)에서 결정할 수 있다.

정리

• Row/Column/Box로 표현 안 되는 배치가 필요할 때만 Layout을 직접 쓴다. 대부분은 필요 없다
• WindowSizeClass로 화면 폭을 "좁다/넓다" 몇 단계로 구분해서, 그에 맞는 레이아웃을 고른다
• 화면을 그리는 컴포저블(TodoListScreen, TodoDetailScreen)을 처음부터 "값 + 콜백만 받는" 구조로 만들어둔 덕분에, 폰용/태블릿용 레이아웃을 갈아끼우기가 쉬웠다

다음 글에서는 지금까지 만든 ViewModel과 화면들을 테스트하는 법을 보겠다.