Jetpack Compose에서 Custom Layout 구현해보기

안녕하세요! Mash-Up 15기 Android팀 멤버 백다연입니다.
최근 기본 컴포즈 라이브러리에서 제공하는 컴포넌트만으로는 구현의 한계가 있는 UI를 개발하게 되었고 어떻게 개발하면 좋을지 고민하다가 Custom Layout을 만들게 되었습니다.

이 글에서는 Jetpack Compose에서 Custom Layout을 만들기 위해 어떤 걸 사용하고 만들어야 할지 알아보고자 합니다.

 

---

 

기본 레이아웃 컴포저블로 많이 사용하는 Row와 Column 내부를 살펴보면,

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}


@Composable
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
) {
    val measurePolicy = rowMeasurePolicy(horizontalArrangement, verticalAlignment)
    Layout(
        content = { RowScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}

공통적으로 Layout Composable을 사용하여 구현되어 있는 것을 확인할 수 있으며, Column과 Row 모두 각각의 MeasurePolicy를 만들어서 제공하는 방식으로 구현이 되어있습니다.

기본적으로 많이 사용하는 컴포저블이 모두 Layout으로 구현이 되어 있는 것을 확인했으니… 우리가 만들고자 하는 모든 화면들을 이 Layout Composable을 활용하여 구현할 수 있다는 것을 알 수 있습니다!

그렇다면 Layout Composable을 어떻게 사용하는지 자세히 알아보도록 하겠습니다.

Composable 함수는 Composer를 통해 Composition 과정을 거칩니다. 이 과정에서 UI 트리가 만들어지고, 이후 Layout과 Drawing 단계를 거쳐 실제 화면에 UI가 렌더링됩니다.

이 중 Layout 단계는 다음을 담당합니다:

• UI 트리를 탐색하며 각 컴포넌트를 측정(Measure) 하고
• 컴포넌트의 크기(Width, Height)를 결정하고
• x, y 좌표를 계산하여 화면에 배치(Layout) 합니다.

 

좀 더 자세히 살펴보면, Layout 단계는 측정과 배치로 나뉩니다. 이는 기존 XML 기반 Android에서 View의 onMeasure와 onLayout 메서드가 각각 담당했던 역할과 유사하며, Jetpack Compose에서는 이 두 과정을 하나의 measure 블록 안에서 자연스럽게 이어서 처리합니다.

즉 Compose의 Layout는 세부적으로 3단계를 가지게 됩니다.

• 각 노드는 각 하위 요소를 측정하고
• 자신의 크기를 결정한 뒤
• 하위요소를 적절한 위치에 배치해야 합니다.

 

Layout composable

fun Layout(
    content: @Composable @UiComposable () -> Unit,
    modifier: Modifier = Modifier,
    measurePolicy: MeasurePolicy
) {}

• content : 모든 하위 Composable에 대한 슬롯이며 레이아웃을 위해 content에는 자식 Layout이 포함됩니다.
• Modifier : 레이아웃에 Modifier를 적용하기 위한 파라미터를 받습니다.
• measurePolicy : 레이아웃이 Node를 측정하고 배치하는 방법인 측정 정책입니다.

MeasurePolicy를 이용해 항목을 측정하고 배치하기 때문에 가장 핵심 개념이며 더 자세히 알아보도록 합시다.

 

MeasurePolicy

 fun MeasureScope.measure(
        measurables: List<Measurable>,
        constraints: Constraints
    ): MeasureResult

MeasurePolicy 인터페이스는 measure 메서드를 구현하도록 만들어졌으며 위와 같은 형태를 가지고 있습니다.

measurable과 constraints를 가지고 있는 것을 확인할 수 있고

• constraints: 레이아웃의 크기를 알려주며 레이아웃의 높이와 너비의 최댓값과 최솟값을 모델링합니다.
• measurable: 측정 가능한 레이아웃의 자식 컴포넌트 목록을 나타냅니다.

앞에서 각 노드는 각 하위 요소를 측정하고 자신의 크기를 결정하여 하위 요소를 배치해야 한다고 하였는데요,

간단히 하위 요소를 측정하는 코드부터 살펴보도로 하겠습니다.

 

1. 하위 요소 측정

val placeables = measurables.map { measurable -> 
	measurable.measure(constraints)

• measurable 유형은 이를 실행할 measure 메서드를 표시하고 크기 제약을 받습니다. 해당 메서드를 호출하면 Placeable 객체가 반환됩니다.
• placeable은 측정된 하위 요소이고 크기가 결정되어 측정이 완료됩니다.

여기서 주의할 점은 항목을 두 번 측정하면 Compose에서 예외를 발생시키다는 점입니다.

 

2. 크기 결정 및 하위 요소 배치

val width = // caculate from placeables

layout(widht, height) {
	placeables.forEach { placeable -> 
		placeable.place(
			x = ...
			y = ...
		)
	}
}

• placeable을 사용하여 레이아웃 크기를 계산한 다음 레이아웃의 크기가 얼마인지 layout 메서드를 호출하여 값을 보고합니다.
• layout 메서드는 placement Block이 필요한데 일반적으로 후행람다로 구현해서 각 항목을 원하는 곳에 배치하게 됩니다.

 

사용해 보기

핀터레스트 뷰처럼 높이가 불규칙한 카드들이 배치되어 있는 그리드 레이아웃을 만들어보도록 하겠습니다.

 

1. 우선 레이아웃 content인 Box를 만들어주도록 하겠습니다.

  Box(modifier 
  	= Modifier.padding(4.dp)
              .size(width = 160.dp, height = Random.nextInt(100, 250).dp)
               .background(
                 color = Color(
                    red = Random.nextInt(100, 255),
                    green = Random.nextInt(100, 255),
                    blue = Random.nextInt(100, 255)
           )
  	 )
)

 

색상과 높이는 랜덤으로 지정하여 각 카드별로 다른 높이를 가질 수 있도록 구성하였습니다. 이제 만들어준 카드들을 각 카드들 높이의 맞추어 배치하는 작업이 필요합니다.

 

2. Layout 사용하기

아래와 같이 코드를 작성하면 우리가 원하는 그리드 형태를 만들 수 있고 이제 코드 하나씩 다시 살펴보도록 하겠습니다.

@Composable
fun MasonryLayout(
    modifier: Modifier = Modifier,
    columns: Int = 2,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // 각 컬럼의 너비
        val columnWidth = constraints.maxWidth / columns

        // 각 컬럼별 현재 쌓인 높이
        val columnHeights = IntArray(columns) { 0 }

        // placeables 저장
        val placeablesWithPositions = measurables.map { measurable ->
            val placeable = measurable.measure(
                constraints.copy(
                    minWidth = columnWidth,
                    maxWidth = columnWidth
                )
            )

            // 가장 높이가 낮은 컬럼을 찾기
            val shortestColumn = columnHeights.withIndex().minByOrNull { it.value }!!.index

            val positionX = shortestColumn * columnWidth
            val positionY = columnHeights[shortestColumn]

            columnHeights[shortestColumn] += placeable.height

            Triple(placeable, positionX, positionY)
        }

        val height = columnHeights.maxOrNull()?.coerceAtLeast(constraints.minHeight) ?: constraints.minHeight

        layout(constraints.maxWidth, height) {
            placeablesWithPositions.forEach { (placeable, x, y) ->
                placeable.placeRelative(x = x, y = y)
            }
        }
    }
}

 

먼저, 하위요소를 측정하고 각 크기를 결저하는 과정이 필요하기 때문에 해당 부분 먼저 코드를 작성해 보도록 하겠습니다.

val columnWidth = constraints.maxWidth / columns
val columnHeights = IntArray(columns) { 0 }

constraints은 부모 레이아웃이 자식에게 부여하는 최소, 최대 크기 제약 조건으로 이 값을 통해 자식 요소들의 크기를 결정할 수 있습니다. 

• columnWidth: 열의 너비를 계산합니다. 부모 레이아웃의 최대 너비를 열의 개수로 나누어서 각 카드의 너비를 계산합니다.
• columnHeights: 각 열에 배치된 아이템들의 누적 높이를 저장하는 배열을 만들어주고 처음에는 0으로 초기화합니다.

 

그다음은 아이템을 측정하여 크기를 결정하도록 하겠습니다.

 // placeables 저장
        val placeablesWithPositions = measurables.map { measurable ->
            val placeable = measurable.measure(
                constraints.copy(
                    minWidth = columnWidth,
                    maxWidth = columnWidth
                )
            )

            // 가장 높이가 낮은 컬럼을 찾기
            val shortestColumn = columnHeights.withIndex().minByOrNull { it.value }?.index ?: 0

            val positionX = shortestColumn * columnWidth
            val positionY = columnHeights[shortestColumn]

            columnHeights[shortestColumn] += placeable.height

            Triple(placeable, positionX, positionY)
        }

measurable.measure()로 각 아이템을 측정하고 각 아이템은 가장 낮은 열이 있는 곳에 다음 아이템이 오기 때문에 가장 낮은 열을 찾습니다.

그 후 좌표를 구해보면 X좌표는 앞에서 측정한 고정된 width * 현재 낮은 칼럼을 가진 행을 통해 구할 수 있고 Y좌표는 가장 낮은 열이 있는 곳의 누적된 높이의 값을 가지게 됩니다.

각 아이템의 위치와 크기를 Triple로 저장합니다. 이 Triple에는 placeable(아이템 크기와 위치), positionX, positionY가 포함됩니다.

 

3. 최종 레이아웃 크기 결정 및 배치

  val height = columnHeights.maxOrNull()?.coerceAtLeast(constraints.minHeight) ?: constraints.minHeight

        layout(constraints.maxWidth, height) {
            placeablesWithPositions.forEach { (placeable, x, y) ->
                placeable.placeRelative(x = x, y = y)
            }
        }

• 레이아웃의 최종 높이는 각 열에서 가장 높은 값을 기준으로 설정되며, 앞서 구한 크기를 통해 배치하게 됩니다.
• placeable.placeRelative()로 아이템을 실제 화면에 배치하는데, x와 y는 각각 열과 해당 열의 높이에 맞게 설정됩니다.

이제 만들어진 Layout을 호출하면 우리가 원하는 MasonryLayout을 구현할 수 있습니다.

MasonryLayout(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        columns = 2
    ) {
        repeat(20) {
            Box(
                modifier = Modifier
                    .padding(4.dp)
                    .size(width = 160.dp, height = Random.nextInt(100, 250).dp)
                    .background(
                        color = Color(
                            red = Random.nextInt(100, 255),
                            green = Random.nextInt(100, 255),
                            blue = Random.nextInt(100, 255)
                        )
                    )
            )
        }
    }

 

Masonry Layout

---

Jetpack Compose에서 커스텀 레이아웃을 구현하는 방법에 대해 간단하게 알아보았습니다. Compose에서 제공하는 기본 컴포넌트로 대부분의 UI를 만들 수 있지만, 복잡한 뷰가 주어졌을 때 어떻게 구현해야 할지 감이 안 온다면
Layout Composable를 떠올리고 사용해 보길 바랍니다!

 

 

Reference

https://cheonjaeung.medium.com/jetpack-compose-%EC%BB%A4%EC%8A%A4%ED%85%80-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%A7%8C%EB%93%A4%EA%B8%B0-f76404d15381

Jetpack Compose 커스텀 레이아웃 만들기

 

https://developer.android.com/develop/ui/compose/layouts/custom?hl=ko

 

https://www.youtube.com/watch?v=zMKMwh9gZuI