Column 내부 살펴보기
Column은 Child Widget이 들어오면 수직으로 배치되는 레이아웃이다.
자 먼저 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
)
}Column은 총 4가지 변수를 인자로 받는다.
- modifier : composable의 크기, 동작, 모양을 변경하거나 사용자의 입력을 처리(클릭, 스크롤 등)할 수 있도록 만드는 변수
- verticalArrangement(Arrangement.Vertical 타입) : 수직 배치(Arrangement)를 설정하는 변수
- horizontalAlignment(Alignment.Horizontal 타입) : 수평 정렬(Alignment)을 설정하는 변수
- content : Layout 안에 들어갈 위젯을 설정하는 변수
아래에서 각 인자가 어떻게 동작하는지를 살펴보도록 하자.
Modifier
Modifier은 composable의 크기, 동작, 모양을 변경하거나 사용자의 입력을 처리(클릭, 스크롤 등)할 수 있도록 만드는 변수이다. 위의 그림2는 너무 왼쪽에 붙어있다. 이에 padding을 줌으로써 여유공간을 줘보도록 하자. 다음과 같이 Column의 변수로 modifier을 넘김으로써 가능하다.
@Preview
@Composable
fun TestView() {
Column(modifier = Modifier.padding(all = 12.dp)) {
EmojiView()
TitleView()
}
}
Modifier은 내부에서 매우 많은 변수를 설정할 수 있으므로 이 부분에 대한 것은 Modifier심화에서 따로 다룬다.
verticalArrangement(수직 배치)
수직 배치는 내부에 있는 콘텐츠들이 수직방향으로 어떻게 배치되는지를 결정하는 것이다. 총 6가지의 옵션을 줄 수 있다.
Arrangement.Top : 위쪽 정렬(기본 옵션)
Arrangement.Center : 중앙 정렬
Arrangement.Bottom : 아래 정렬
Arrangement.SpaceBetween : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 0
Arrangement.SpaceAround : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 (x/2)
Arrangement.SpaceEvenly : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 (x)
이에 대한 코드 예시는 [Jetpack Compose Column] 1. Arrangement 코드 예시 에서 살펴볼 수 있다.
horizontalAlignment(수평 정렬)
수평 정렬은 콘텐츠들이 수평방향으로 어떻게 정렬되는지를 결정하는 것이다. 총 Column에서는 3가지의 옵션을 줄 수 있다.
Start : 왼쪽(Start) 정렬(기본값)
CenterHorizontally : 중앙 정렬
End : 오른쪽(End) 정렬
Content
Content는 ColumnScope 함수를 변수로 받는다.
content: @Composable ColumnScope.() -> UnitColumnScope에는 @Composable 람다식이 들어가야 한다. 즉, 우리가 원하는 위젯들을 이 안에 넣을 수 있다. 즉 코드 상의 Text들은 ColumnScope.() -> Unit 타입을 가지는 람다식이라고 볼 수 있다.
