[Android] App layout - Custom layouts

#1 개요

맞춤 레이아웃  |  Jetpack Compose  |  Android Developers

위 공식 문서를 나만의 언어로 정리했다.
 

#2 정확히 '무엇'을 커스텀하는가?

게시글 [Android] App layout - 기초에 있는 도식도다. 이 도식도는 Layout 내부적 동작 기제를 표현하고 있다. Layout을 커스텀한다는 건 위 도식도에서 주황색 네모 및 파란색 네모 안의 내용을 오버라이드하는 것이다.
 

#3 Modifier.layout()

#3-1 간단한 UI

코드

Scaffold(
    modifier = Modifier.fillMaxSize()
) { innerPadding ->
    // 첫번째 Box()
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
            .background(Color.LightGray),
        contentAlignment = Alignment.Center
    ) {
        // 두번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color.Gray), // 불투명 회색
            contentAlignment = Alignment.Center
        ) {
            Text("12345")
        }

        // 세번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color(0x8000FF00)), // 반투명 초록색
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

첫번째 Box()는 두번째 Box() 및 세번째 Box()의 부모다.
 
스크린샷

스크린샷은 위와 같다.
 

#3-2 placeable의 의미

코드

Scaffold(
    ...
) { ...
    // 첫번째 Box()
    Box(
        ...
    ) {
        // 두번째 Box()
        ...

        // 세번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color(0x8000FF00)) // 반투명 초록색
                .customLayoutModifier(),
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)

    layout(placeable.width, placeable.height) {
        placeable.place(
            x = 0,
            y = 0
        )
    }
}

Modifier.layout()은 커스텀 레이아웃을 만드는 함수다. 이 함수를 세번째 Box()에 적용했다. 하지만, 그 구현 내용은 별 게 없다. 여전히 #3-1과 같은 화면이 나오게끔 만들었다. layout()는 하나의 람다 함수를 매개변수로 보유한다. 그리고 그 람다 함수는 2개의 매개변수를 가진다. 바로 measurable과 constraints다.
 
measurable은 content 프로퍼티의 영역을 의미한다 (많은 컴포저블 함수는 content라는 이름의 프로퍼티를 가진다). 본 코드에서는 Box()의 content 프로퍼티가 되겠다.
 
constraints는 layout()이 붙은 컴포저블의 부모 컴포저블 즉, 첫번째 Box()의 제약조건을 의미한다.
 
measurable.measure(constraints)의 의미가 뭘까? 바로 #2 도식도에 있는 주황색 네모다. 그렇다면 위 코드 속 measurable.measure(constraints)는 '세번째 Box()에 대한 측정 요청'이라는 의미가 된다. 도식도에서도 알 수 있듯이, 측정 요청을 받은 노드에 자식 노드가 존재하면 재귀적으로 자식 노드들의 주황색 네모(측정 요청) 및 파란색 네모(크기와 위치 결정)이 Trigger된다. 따라서 최종적으로 placeable에 담기는 것은 '크기와 위치가 결정된 모든 자손들의 모임'이다.
 
나는 위 코드를 layout()이 붙지 않은 #3-1의 코드와 같은 결과를 내도록 만들었다고 했다. 즉, 위 코드는 커스텀이 가미되지 않은, Compose의 기본 동작이라는 말이다. 여기에서 내가 measure()의 인수에 첫번째 Box()의 제약조건을 넣은 이유를 알 수 있다. 바로 '(#2의 도식도에서 알 수 있는) 컴포저블의 계층 관계'에서 자식에 대한 측정 요청은 부모에 의해 Trigger된다는 이유에서다. 세번째 Box()의 배치는 첫번째 Box()에 의해 수행된다. 그렇기에 (커스텀 없이 순정으로 프로그래밍하려면) 세번째 Box()는 첫번째 Box의 제약 조건을 지켜야만 하는 것이다.
 
스크린샷

#3-1과 똑같은 화면.
 

#3-3 MeasureScope.layout()

코드 1

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    
    layout(placeable.width, placeable.height) {
        placeable.place(
            x = 0,
            y = 0
        )
    }
}

이제 measurable.measure(constraints) 아래에 있는 MeasureScope.layout()에 대해 설명한다. Modifier.layout()과 이름은 같지만 다른 함수다.
 
measurable.measure(constraints)가 #2 도식도의 주황색 네모에 해당한다면, MeasureScope.layout()는 파란색 네모에 해당한다. 자기 자신의 크기와 위치를 결정하고, 자식들을 배치한다. #3-2에서 placeable에 담기는 것은 '크기와 위치가 결정된 모든 자손들의 모임'이라고 했다. 이제 '남은 단계(파란색 네모)'는 세번째 Box()의 크기 및 위치 결정과 모임의 실제 배치다.
 
MeasureScope.layout()의 인수 width 및 height에 어떤 값을 전달하느냐 따라 자기 자신의 크기가 결정된다. 위 코드에서는 placeable.width 및 placeable.height를 그대로 넣어주고 있다. 그렇다면, 해당 값들은 자식인 Text("321")의 너비 및 높이일까? 아니다. 세번째 Box()의 Modifier에 하드 코딩해두었던 너비(200.dp) 및 높이(200.dp) 값이다. 이 하드 코딩으로 인해 constraints의 제약 조건이 200.dp로 고정되기 때문이다. 이상하지 않은가? 나는 #3-2에서 분명히 constraints는 세번째 Box()가 아닌 첫번째 Box()의 제약 조건이라 설명했다. 너비(200.dp) 및 높이(200.dp) 값은 세번째 Box()의 값인데 이게 왜 constraints의 값을 수정해버리는가?
 
결론부터 말하면 Modifier.width()나 Modifier.height()와 같은 크기 관련 Modifier가 붙으면, Jetpack Compose 컴파일러가 부모의 constraints를 무시하고 새롭게 (Modifier.width()나 Modifier.height()에 의해) 수정된 constraints를 만들어 전달하기 때문이다. 아래 코드로 이 사실을 증명해보이겠다.
 
코드 2

Scaffold(
    ...
) { ...
    // 첫번째 Box()
    Box(
        ...
    ) {
        // 두번째 Box()
        ...

        // 세번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color(0x8000FF00)) // 반투명 초록색
                .customLayoutModifier(),
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)

    Log.d("interfacer_han", "constraints: $constraints")

    layout(placeable.width, placeable.height) {
        placeable.place(
            x = 0,
            y = 0
        )
    }
}

기존 코드에 Log.d( ... )를 추가했다. 로그 메시지로 "constraints: Constraints(minWidth = 600, maxWidth = 600, minHeight = 600, maxHeight = 600)"가 출력된다. 200이 아니라 600인 이유는 단위의 차이 때문이다. 본 프로젝트에서 200.dp는 600.px이다. 어쨌든, 저 constraints는 "그냥 무조건 600.px로 설정해!"라고 말하는 듯 하다. 그야말로 하드 코딩이다.
 
코드 3

Scaffold(
    ...
) { ...
    // 첫번째 Box()
    Box(
        ...
    ) {
        // 두번째 Box()
        ...

        // 세번째 Box()
        Box(
            modifier = Modifier
                .background(Color(0x8000FF00)) // 반투명 초록색
                .customLayoutModifier(),
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    
    Log.d("interfacer_han", "constraints: $constraints")

    layout(placeable.width, placeable.height) {
        placeable.place(
            x = 0,
            y = 0
        )
    }
}

방금 코드에서 세번째 Box()의 Modifier.width() 및 Modifier.height()를 제거했다. 로그 메시지로 "constraints: Constraints(minWidth = 0, maxWidth = 1344, minHeight = 0, maxHeight = 2769"가 출력된다. 이게 진짜, 가로채지지 않은 첫번째 Box()의 constraints다.
 

#3-4 커스텀 - 자식의 배치

코드 1

Scaffold(
    ...
) { ...
    // 첫번째 Box()
    Box(
        ...
    ) {
        // 두번째 Box()
        ...

        // 세번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color(0x8000FF00)) // 반투명 초록색
                .customLayoutModifier(),
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)

    layout(placeable.width, placeable.height) {
        placeable.place(
            x = 100,
            y = 100
        )
    }
}

x = 100, y = 100 부분을 제외하면 #3-2와 동일한 코드다. placeable.place()는 MeasureScope.layout()의 placementBlock 프로퍼티에 해당하는 부분으로, 형태는 Placeable.PlacementScope.() -> Unit 이다. 여기서는 #2 도식도의 파란색 네모의 내용 중, 자손들의 모임을 배치하는 부분에 해당한다. Jetpack Compose에서는 맨 ↖쪽 좌표가 (0, 0)이다. 따라서 (100, 100)은 ↓쪽으로 100픽셀, →쪽으로 100픽셀만큼 떨어져 배치하라는 말이 된다. 스크린샷을 확인해보자.
 
 
스크린샷 1

솔직히, 뭐가 어떻게 된건지 감이 안잡힌다. 그래서 코드를 약간 수정했다.
 
코드 2

Scaffold(
    ...
) { innerPadding ->
    // 첫번째 Box()
    Box(
       ...
    ) {
        // 두번째 Box()
       ...

        // 세번째 Box()
        Box(
            modifier = Modifier
                .width(200.dp)
                .height(200.dp)
                .background(Color(0x4000FF00)) // 반투명 초록색
                .customLayoutModifier()
                .background(Color(0x60FF00FF)), // 반투명 보라색
            contentAlignment = Alignment.Center
        ) {
            Text("321")
        }
    }
}

 customLayoutModifier() 뒤에 background(Color(0x60FF00FF))를 추가해봤다. 다시 스크린샷을 보자.
 
 
스크린샷 2

이제야 감이 좀 잡힌다. 초록색 네모는 3번째 Box()의 영역이다. 초록색 네모의 영역을 그대로 ↓쪽으로 100픽셀만큼 →쪽으로 100픽셀만큼 움직인게 바로, 3번째 Box()의 '자손들의 모임의 영역(보라색 네모)'이 된 것이다.
 
혹시 세번째 Box(), 즉 초록색 영역은 왜 안 움직이는 건지 궁금한 사람도 있겠다. 그런 사람들은 #2 도식도의 파란색 네모를 다시 보라. 자손들의 모임을 배치하는거지, 자기 자신을 배치하지는 않는다. 세번째 Box()의 영역 배치는, 첫번째 Box()가 수행한다. 그리고 첫번째 Box()에는 contentAlignment = Alignment.Center가 적용되어있다 (#3-1 참조). 따라서 첫번째 Box()의 정렬 규칙을 바꾸지 않는 한, 세번째 Box()는 무슨 짓을 해도 반드시 정중앙에 위치한다.
 

#3-5 커스텀 - 자신의 크기

코드

fun Modifier.customLayoutModifier() = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    
    layout(placeable.width + 300, placeable.height + 300) {
        placeable.place(
            x = 100,
            y = 100
        )
    }
}

#3-4의 코드 2와 비교해 placeable.width + 300, placeable.height + 300 부분을 제외하면 같은 코드다. 이러면 어떻게 될까?
 
스크린샷

스크린샷의 빨간색 점과 주황색 점은 내가 스크린샷을 그림판으로 열어서 따로 찍은 것이다. 세번째 Box()의 너비와 높이가 각각 300픽셀씩 커졌다. 그래서 세번째 Box()의 (0, 0) 기준점이 주황색 점에서 빨간색 점으로 이동했다. 보라색 영역은 여전히 (0, 0)로부터 ↓쪽으로 100픽셀만큼 →쪽으로 100픽셀만큼 움직인 곳에 위치한다.
 

#4 Layout()

#4-1 일괄적 커스텀

Layout()은 앞서 살펴본 Modifier.layout()의 동작을 일괄적으로 수행한다. 어떤 컴포저블이 여러 자식을 가지고 있는데, 그 자식들을 각각 따로 커스텀 해줄 때 Layout()을 사용한다.
 

#4-2 간단한 UI

코드

Scaffold(
    modifier = Modifier.fillMaxSize()
) { innerPadding ->
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding)
    ) {
        Text(text = "11111", fontSize = 32.sp)
        Text(text = "22222", fontSize = 32.sp)
        Text(text = "33333", fontSize = 32.sp)
        Text(text = "44444", fontSize = 32.sp)
        Text(text = "55555", fontSize = 32.sp)
    }
}

간단한 Column이다.
 
스크린샷

스크린샷은 위와 같다.
 

#4-3 커스텀

코드

Scaffold(
    modifier = Modifier.fillMaxSize()
) { innerPadding ->
    ReplicatedColumn(
        modifier = Modifier.padding(innerPadding)
    ) {
        Text(text = "11111", fontSize = 32.sp)
        Text(text = "22222", fontSize = 32.sp)
        Text(text = "33333", fontSize = 32.sp)
        Text(text = "44444", fontSize = 32.sp)
        Text(text = "55555", fontSize = 32.sp)
    }
}
                
@Composable
fun ReplicatedColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        /* ReplicatedColumn의 크기를 가능한 한 크게 (= 부모의 최대 너비 및 최대 높이를 지니도록) 설정
         * 본 코드에서는, ReplicatedColumn의 부모인 Scaffold가 가질 수 있는 최대 크기로 설정
         */
        layout(constraints.maxWidth, constraints.maxHeight) {
            var yPosition = 0

            placeables.forEach { placeable ->
                placeable.place(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

#4-2를 Column() 대신 Layout()을 이용해 구현해보았다. 자세한 설명은 #3에서 했으므로 생략한다. MeasureScope.layout()에서 ReplicatedColumn의 크기를 최대로 설정하기에, Column에 붙였던 fillMaxSize()는 제거했다. 제거하지 않더라도 결과는 어차피 같겠지만.
 
Layout()의 람다 함수는 Modifier.layout()의 람다 함수와는 달리, measurable 대신 measurable's'을 매개변수로 가진다. 일괄적으로 복수 개의 자식 컴포저블을 커스텀해야하니 그렇다. 그렇기에 placeable 대신 placeable's'을 쓰고, placeable.place()도 forEach문에 들어가 있는 모습을 확인할 수 있다.
 
스크린샷

#4-2의 스크린샷을 그대로 가져온 게 아닌가 싶겠지만, 아니다. 이걸로 Layout()에 대한 설명을 마친다.
 

#5 요약

커스텀 레이아웃은 Compose UI 기제 도식도 상의 각 단계를 오버라이드한다.