Image
Android Jetpack Compose UI/Compose Layout

[Compose Layout] 2. Column 사용법 정리

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()
    }
}

그림1. Modifier

Modifier은 내부에서 매우 많은 변수를 설정할 수 있으므로 이 부분에 대한 것은 Modifier심화에서 따로 다룬다.

 

verticalArrangement(수직 배치)

수직 배치는 내부에 있는 콘텐츠들이 수직방향으로 어떻게 배치되는지를 결정하는 것이다. 총 6가지의 옵션을 줄 수 있다.

그림2. verticalArrangeMent

Arrangement.Top : 위쪽 정렬(기본 옵션)

그림3. Column Arrangement.Top Preview

Arrangement.Center : 중앙 정렬

그림4. Arrangement.Center Preview

 

Arrangement.Bottom : 아래 정렬

그림5. Arrangement.Bottom Preview

Arrangement.SpaceBetween : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 0

그림6. Arrangement.SpaceBetween Preview

Arrangement.SpaceAround : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 (x/2)

그림7. Arrangement.SpaceAround Preview

Arrangement.SpaceEvenly : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 (x)

그림8. Arrangement.SpaceEvenly Preview

이에 대한 코드 예시는 [Jetpack Compose Column] 1. Arrangement 코드 예시 에서 살펴볼 수 있다.

 

 

horizontalAlignment(수평 정렬)

수평 정렬은 콘텐츠들이 수평방향으로 어떻게 정렬되는지를 결정하는 것이다. 총 Column에서는 3가지의 옵션을 줄 수 있다.

그림9.horizontalAllignment

 

Start : 왼쪽(Start) 정렬(기본값)

그림10. Allignment.Start

CenterHorizontally : 중앙 정렬

그림11. Allignment.CenterHorizontally

End : 오른쪽(End) 정렬

그림12. Allignment.End

 

Content

Content는 ColumnScope 함수를 변수로 받는다. 

content: @Composable ColumnScope.() -> Unit

ColumnScope에는 @Composable 람다식이 들어가야 한다. 즉, 우리가 원하는 위젯들을 이 안에 넣을 수 있다. 즉 코드 상의 Text들은  ColumnScope.() -> Unit 타입을 가지는 람다식이라고 볼 수 있다.

그림13. content

 

반응형

 

이 글의 저작권은 '조세영의 Kotlin World' 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com