[Android Compose] Row란?

컴포저블의 기본 표준 레이아웃은 총 3가지 있다.

 

• Column
• Row
• Box

 

이 중 Row에 대해 확인한다. Row의 사전적 정의는 아래와 같다.

 

(옆으로 늘어서 있는) 열, 줄

 

이런 뜻이니 Compose의 Row도 이 뜻처럼 가로로 배치할 때 사용하는 게 아닌가 추측된다.

 

https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#row

androidx.compose.foundation.layout  |  Android Developers

하위 요소를 가로 순서로 배치하는 레이아웃 컴포저블이다. 하위 요소를 수직 순서로 배치하는 레이아웃 컴포저블은 Column을 참조하라. 기본적으로 아이템은 스크롤되지 않는다. 이 동작을 추가하려면 Modifier.horizontalScroll을 추가하라. 현재 표시되는 아이템만 구성하고 배치하는 가로 스크롤 가능 목록은 LazyRow를 참고하라
Row 레이아웃은 RowScope.weight modifier를 써서 제공된 가중치에 따라 하위 너비를 할당할 수 있다. 자식에게 가중치를 제공하지 않은 경우, 가중치를 가진 자식의 크기가 남은 공간을 기준으로 가중치에 비례해 계산되기 전에 선호하는 너비를 묻는다. Row가 가로로 스크롤 가능하거나 가로로 스크롤 가능한 컨테이너의 일부인 경우 남은 사용 가능한 공간이 무한하므로 제공된 가중치는 무시된다
자식 중 가중치가 없는 경우 Row는 자식을 나란히 맞출 수 있도록 가능한 작아진다. Row의 너비를 변경하려면 Modifier.width를 사용한다. 사용 가능한 너비를 채우려면 Modifier.fillMaxWidth를 사용할 수 있다. Row의 자식 중 적어도 하나에 가중치가 있으면 Row가 사용 가능한 너비를 채우므로 Modifier.fillMaxWidth가 필요하지 않다. 그러나 Row의 크기를 제한해야 하는 경우 Modifier.width 또는 Modifier.size 레이아웃 수정자를 적용해야 한다
Row의 크기가 하위 크기의 합보다 크면 Row 안의 하위 위치를 정의하기 위해 horizontalArrangement를 지정할 수 있다. 사용 가능한 위치 지정 동작은 배열(Arrangement)을 참조하라. Arrangement의 생성자를 써서 커스텀 arrangement를 정의할 수도 있다. 아래는 다양한 가로 arrangement의 그림이다

파라미터 목록)

- Modifier : Row에 적용할 modifier
- horizontalArrangement: Arrangement.Horizontal = Arrangement.Start : 레이아웃 자식의 수평 배치
- verticalAlignment: Alignment.Vertical = Alignment.Top : 레이아웃 자식의 수직 정렬
- content : 레이아웃 안에 들어갈 위젯 설정

4번째 인자로 content가 있는데 공식문서에는 설명이 없다. 이것이 뭔지는 다른 블로그에서 확인해서 썼다.

위젯 설정이라고 해도 Row {} 블록 안에 Text()나 Column() 등을 넣는데 이 Text, Column들이 content의 매개변수다.

 

https://foso.github.io/Jetpack-Compose-Playground/layout/row/

Row - Jetpack Compose Playground

Row는 이전 자식 옆에 있는 각 자식을 표시한다. 가로 리니어 레이아웃과 비슷하다

@Composable
fun RowExample() {
    Row {
        Text("Hello World!")
        Text("Hello World!2")
    }
}

 

Text 뿐 아니라 세로 형태의 Column도 가로로 몇 개 이어붙일 수 있다.

Row의 인자 중 가로 배치를 결정하는 Arrangement가 있는데 이것으로 호출할 수 있는 옵션은 6개 있다.

 

 

• Start : 기본 설정. 왼쪽에 붙는다
• End : 오른쪽에 붙는다
• Center : 가운데 정렬
• SpaceAround : 컴포넌트 사이 간격은 동일하고 양쪽 끝부분과 컴포넌트 사이에 빈 공간이 있다
• SpaceBetween : 컴포넌트 사이 간격은 동일하지만 양쪽 끝부분과 컴포넌트 사이에 빈 공간이 없다
• SpaceEvenly : 컴포넌트 사이 간격과 양쪽 끝 - 컴포넌트 사이 빈 공간의 너비가 모두 같다

 

수직 정렬 옵션은 총 3가지 줄 수 있다.

 

 

• Bottom : 모든 컴포넌트들이 밑에 붙는다
• Top : 모든 컴포넌트들이 위에 붙는다
• CenterVertically : 모든 컴포넌트들이 세로 기준 중앙 정렬된다