Compose의 표준 레이아웃 요소 - Column, Row, Box

Compose의 세 가지 표준 레이아웃 요소는 Column, Row, Box composable이 존재한다.

이 셋은 상위 UI 요소 역할을 할 수 있다. 즉, 이 안에 다양한 ui 요소를 담을 수 있다는 것이다.

 

예를 들어, 단순히 composable function 안에 다음과 같이 text를 나열할 수 있는데,

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp
    )
    Text(
        text = from,
        fontSize = 36.sp
    )
}

그럼 이런 식으로

예쁘지 않게 출력되는 것을 볼 수 있다.

 

이걸 예쁘게 원하는대로 출력하기 위해 사용하는 composable이 바로 Column, Row, Box 이다.

 

ㅇ Column과 Row

Column은 말 그대로 수직하게 쌓는 방식이고, Row은 수평하게 나열하는 방식이다.

 

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column{
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

이렇게 Column을 사용할 경우에는 다음과 같이 한 열에 세로로 나란히 배치되고,

 

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Row{
        Text(
            text = message,
            fontSize = 30.sp, 		// Row 배치가 잘 보이도록 30으로 수정
            lineHeight = 116.sp
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

이렇게 Row를 사용할 경우 다음과 같이 한 행에 가로로 나란히 배치된다.

 

** 이 때, Column()과 Row()는 함수인데, 사용법이 독특해 보인다.

함수라고 한다면, 아래와 같이 작성되어야 할 것이다.

fun Row(param1, param2, ..., param_last){ ... }

여기서 마지막 parameter가 함수일 경우, 특수한 문법을 제공한다.

바로 Row{ 함수의 내용 } 이렇게 표기할 수 있도록 하는 것이다.

이를 "후행 람다 문법"이라고 한다. 관련된 자세한 내용은 다음 링크를 통해 확인할 수 있다.

2025.03.05 - [CS/Kotlin] - [Kotlin 문법] 12. 후행 람다 문법

 

ㅇBox

Jetpack Compose에서의 Box는 여러 위젯을 겹쳐 놓을 수 있는 layout으로,
위에서 설명한 코드를 그대로 보여주면 다음과 같다.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Box {
        Text(
            text = message,
            fontSize = 30.sp,
            lineHeight = 116.sp
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

이렇게 "Happy Birthday Sam!"과 "From Emma"가 겹쳐서 출력된다.

Box 안의 위젯들은 Box 안에서 자신이 어디에 위치할 것인지를 정한다.

따라서 다음처럼, 

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Box {
        Text(
            modifier = Modifier.align(Alignment.BottomEnd),
            text = message,
            fontSize = 30.sp,
            lineHeight = 116.sp
        )
        Text(
            modifier = Modifier.align(Alignment.Center),
            text = from,
            fontSize = 36.sp
        )
    }
}

modifier의 align()을 통해 Box 상에서의 위치를 결정할 수 있다.

이렇게 message는 BottomEnd로, from은 Center로 보내면, 다음과 같은 모습으로 출력된다.

 

이미지를 사용하면 이미지를 배경처럼 두고, 겹치게 메시지를 출력하는 것이 가능하다.

즉, 서로를 겹치게 배치하고 싶을 때 사용하면 되는 것이다.

 

응용하면, 이런식으로 구현할 수 있다.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Box(modifier = Modifier.fillMaxSize().background(Color.LightGray)) {
        Column {
            Text(
                text = message,
                fontSize = 100.sp,
                lineHeight = 116.sp
            )
            Text(
                text = from,
                fontSize = 36.sp
            )
        }
    }
}

Box 전체에 modifier를 사용해 특정 값을 default로 지정하고,

그 안에 원하는 것을 담을 수 있다.

그 결과는 다음과 같다.

 

 

출처 : 구성 가능한 함수 text로 간단한 앱 빌드