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 위젯 을 배치한다고 해보자. 그러면 아래와 같이 텍스트가 배치된다.
자 이제 이러한 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")
}
}
이와 같이 위젯이나 레이아웃의 모양을 변경하거나 클릭 이벤트를 주기 위한 변수를 Modifier이라 한다.
Modifier은 내부에서 매우 많은 변수를 설정할 수 있으므로 이 부분에 대한 것은 Modifier심화에서 따로 다룬다.
horizontalArrangement(수평 배치)
수평 배치는 내부에 있는 콘텐츠들이 수평방향으로 어떻게 배치되는지를 결정하는 것이다. 총 6가지의 옵션을 줄 수 있다.
- Start
- Center
- End
- SpaceBetween
- SpaceAround
- SpaceEvenly
Arrangement.Start : 시작 정렬(기본 옵션)
Arrangement.Center : 중앙 정렬
Arrangement.End : 뒤쪽 정렬
Arrangement.SpaceBetween : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 0
Arrangement.SpaceAround : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 (x/2)
Arrangement.SpaceEvenly : 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 컴포넌트 사이의 공간과 동일(x)
verticalAlignment(수직 정렬)
수직 정렬은 콘텐츠들이 수직방향으로 어떻게 정렬되는지를 결정하는 것이다. 총 Column에서는 3가지의 옵션을 줄 수 있다.
Alignment.Top : 위쪽(Top) 정렬(기본값)
Alignment.CenterVertically : 중앙 정렬
Alignment.Bottom : 아래(Bottom) 정렬
Content
Content는 RowScope 함수를 변수로 받는다.
content: @Composable RowScope.() -> UnitRowScope에는 @Composable 람다식이 들어가야 한다. 즉, 우리가 원하는 위젯들을 이 안에 넣을 수 있다. 즉 코드 상의 Text들은 RowScope.() -> Unit 타입을 가지는 람다식이라고 볼 수 있다.
