Image
Android Jetpack Compose UI/Compose Layout

[Compose Layout] 3. Compose Row 사용법 정리

Row Layout 내부 살펴보기

Row는 수평 배치를 지원하는 레이아웃이다. 

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun TestView() {
    Row() {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

예를들어 위와 이 Row 안에 세개의 Text 위젯 을 배치한다고 해보자. 그러면 아래와 같이 텍스트가 배치된다.

그림1. Row Layout 예시

 

자 이제 이러한  Row Layout을 그리기 위해 Row Layout은 어떤 변수를 받을 수 있는지 내부를 살펴보자.예를들어

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

Row Layout은 Column Layout과 비슷한 변수를 인자로 받는다.

다른 점은 Column Layout의 Arrangement.Vertical, Alignment.Horizontal 대신

Row는 Arrangement.Horizontal, Alignment.Vertical을 인자로 받는다는 것이다.  

 

Row은 총 4가지 변수를 인자로 받는다.

  • modifier : composable의 크기, 동작, 모양을 변경하거나 사용자의 입력을 처리(클릭, 스크롤 등)할 수 있도록 만드는 변수
  • horizontalArrangement(Arrangement.Horizontal) : 수평 배치를 설정하는 변수
  • verticalAlignment(Alignment.Vertical) : 수직 정렬을 설정하는 변수
  • content : Layout 안에 들어갈 위젯을 설정하는 변수

아래에서 각 인자가 어떻게 동작하는지를 살펴보도록 하자.

 

Modifier

Modifier은 composable의 크기, 동작, 모양을 변경하거나 사용자의 입력을 처리(클릭, 스크롤 등)할 수 있도록 만드는 변수이다. 위의 그림1는 너무 왼쪽과 위쪽에 에 붙어있다. 이에 전체 padding(여유공간)을  12dp만큼 줌으로써 여유공간을 만들어보도록 하자. 다음과 같이 Row의 변수로 modifier을 넘김으로써 가능하다.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun TestView() {
    Row(modifier = Modifier.padding(all = 12.dp)) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

그림3. Row Layout에 Padding 설정하기

이와 같이 위젯이나 레이아웃의 모양을 변경하거나 클릭 이벤트를 주기 위한 변수를 Modifier이라 한다.

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

 

horizontalArrangement(수평 배치)

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

  • Start
  • Center
  • End
  • SpaceBetween
  • SpaceAround
  • SpaceEvenly

그림4. 수평 배치의 종류

 

 

Arrangement.Start : 시작 정렬(기본 옵션)

그림5. Arrangement.Start

Arrangement.Center : 중앙 정렬

그림6. Arrangement.Center

Arrangement.End : 뒤쪽 정렬

그림7. Arrangement.End

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

그림8. Arrangement.SpaceBetween

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

그림9.Arrangement.SpaceAround

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

그림10. Arrangement.SpaceEvenly

 

verticalAlignment(수직 정렬)

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

그림11. verticalAlignment

Alignment.Top : 위쪽(Top) 정렬(기본값)

그림12. Alignment.Top

Alignment.CenterVertically : 중앙 정렬

그림13. Alignment.CenterVertically

Alignment.Bottom : 아래(Bottom) 정렬

그림14. Alignment.Bottom

Content

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

content: @Composable RowScope.() -> Unit

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

그림15. RowScope Content

반응형

 

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

 

 

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

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

open.kakao.com