[Android Compose] Column이란?

Compose로 프로젝트를 만들면 가장 먼저 보이는 키워드 중 하나가 Column이다.

안드로이드 스튜디오에서 이 키워드를 컨트롤 + 좌클릭하면 아래와 같은 설명이 나온다.

 

자식을 수직 순서로 배치하는 레이아웃 구성 Composable. 자식을 가로 순서로 배치하는 레이아웃 Composable에 대해선 Row를 참조하라. 기본적으로 항목은 스크롤되지 않는다. 이 동작을 추가하려면 Modifier.verticalScroll을 참조하라. 현재 보이는 아이템만 구성하고 배치하는 세로 스크롤 가능한 리스트는 LazyColumn을 참조하라. 열 레이아웃은 ColumnScope.weight Modifier를 써서 제공된 가중치에 따라 자식의 높이를 할당할 수 있다. 가중치가 제공되지 않는 자식은 선호하는 높이를 묻는 메시지가 표시되기 전에 남은 공간을 기준으로 가중치에 비례해서 높이가 있는 자식의 크기가 계산된다. Column이 세로로 스크롤 가능하거나 세로로 스크롤 가능한 컨테이너의 일부인 경우 남은 사용 가능한 공간이 무한하므로 제공된 가중치는 무시된다. 자식 중 가중치가 없으면 Column은 자식을 다른 자식 위에 놓을 수 있도록 가능한 작아진다...(적용)

 

레이아웃 중 리니어 레이아웃을 떠올리게 하는 설명이다. 다른 설명은 아래의 안드로이드 디벨로퍼 링크에서 확인할 수 있다.

 

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary?hl=ko#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1) 

androidx.compose.foundation.layout  |  Android Developers

 

아래는 위 링크에서 제공하는 GIF 이미지다. 내가 사용한 속성에 따라 뷰가 어떻게 표시되는지 보여주는 이미지다.

 

 

아래는 Column Composable 함수의 원형이다.

 

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable @ExtensionFunctionType ColumnScope.() -> Unit
): Unit

 

디벨로퍼에서 각각 클릭하면 어떤 것인지 확인할 수 있다. 각 매개변수가 뭔지 간단하게 정리하면 아래와 같다.

 

• Modifier : Compose UI 요소에 동작을 추가하거나 장식하는 Modifier 요소의 순서화된 변경 불가능한 컬렉션 인터페이스. background, 패딩, 클릭 이벤트 등을 추가할 때 사용한다
• verticalArrangement : 자식 레이아웃의 수직 위치를 지정할 때 사용하는 인터페이스. 위처럼 사용 시 위쪽 정렬된 형태로 표시된다
• horizontalArrangement : 사용 가능한 너비 안에서 특정 너비의 상자 위치를 계산하는 인터페이스. 위처럼 사용 시 왼쪽 정렬된 형태로 표시된다
• content : 안에 들어갈 내용. 다른 @Composable 함수를 호출할 수도 있다.

 

디벨로퍼에서 제공하는 예제는 아래와 같다.

 

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column {
                // The child with no weight will have the specified size.
                Box(Modifier.size(40.dp, 80.dp).background(Color.Magenta))
                // Has weight, the child will occupy half of the remaining height.
                Box(Modifier.width(40.dp).weight(1f).background(Color.Yellow))
                // Has weight and does not fill, the child will occupy at most half of the remaining height.
                // Therefore it will occupy 80.dp (its preferred height) if the assigned height is larger.
                Box(
                    Modifier.size(40.dp, 80.dp)
                        .weight(1f, fill = false)
                        .background(Color.Green)
                )
            }
        }
    }

 

이 상태로 빌드하면 아래 화면이 나타난다.

 

 

1번째 자주색 박스는 따로 weight를 지정하지 않아서 가로 40, 세로 80dp의 직사각형 모양으로 생겼다.

2번째 노란색 박스는 weight가 1f로 지정되고 전체의 중간 크기만큼 차지한다. weight 값을 크게 할수록 노란색 박스가 점점 작아지는 걸 볼 수 있다.

3번째 녹색 박스는 가중치가 있고 fill의 값이 false기 때문에 화면 바닥까지 늘어나지 않았다. weight 값을 크게 할수록 노란색 박스가 점점 작아진다.

값을 바꾸면서 어떻게 변하고 왜 그렇게 되는지 확인해보자.