[Android] Compose의 Arrangement와 Alignment 비교하기

compose를 사용하다면 Column과 Row를 자주 사용하게 된다.

 

이 때 하위 뷰 들을 정렬하는 방식을 선택해야 하는데 종종 헷갈리는 옵션들이 있어서 정리를 해보기로 했다.

 

Arrangement와 Alignment의 역할

Arrangement와 Alignment은 역할에 차이가 있는데

- Arrangement는 부모 내에서 자식들 간의 공간 배치를 설정하는데, 자식들 간의 간격을 설정하는데 많이 사용한다.

- Alignment는 부모 내의 자식들을 정렬할 때 사용하는데, 위로 정렬, 가운데 정렬 처럼 자식들을 어떤 기준점에 맞춰 나열할 때 사용한다.

 

 

Arrangement

Horizontal Arrangement 은 Row에서 사용하며

Vertical Arrangement 은 Column에서 사용한다

 

다음은 Row에서 Arrangement를 사용한 예시이다.

• Arrangement.Start: 자식들을 왼쪽에 정렬.

horizontalArrangement = Arrangement.Start

• Arrangement.End: 자식들을 오른쪽에 정렬.

horizontalArrangement = Arrangement.End

• Arrangement.Center: 자식들을 가운데에 정렬.

horizontalArrangement = Arrangement.Center

• Arrangement.SpaceBetween: 자식들 사이에 남은 공간을 균등하게 분배.

horizontalArrangement = Arrangement.SpaceBetween

• Arrangement.SpaceAround: 자식들 사이와 가장자리에 동일한 간격을 둠.

horizontalArrangement = Arrangement.SpaceAround

• Arrangement.SpaceEvenly: 자식들 사이와 부모의 양쪽 가장자리까지 동일한 간격을 둠.

horizontalArrangement = Arrangement.SpaceEvenly

 

추가로 spaceBy 함수도 많이 사용하는데,

• Arrangement.spaceBy: 자식들 사이와 부모의 양쪽 가장자리까지 동일한 간격을 둠.

horizontalArrangement = Arrangement.spacedBy(32.dp) / horizontalArrangement = Arrangement.spacedBy(4.dp)

 

 

 

verticalArrangement도 각 아이템의 세로 간격을 조정할 수 있다.

 

 

Alignment

Vertical Alignment은 Row에서 사용하고,

Horizontal Alignment 은 Column에서 사용한다.

 

다음은 Row에서 Alignment를 사용한 예시이다.

• Alignment.Top: 자식들을 위쪽으로 정렬.

verticalAlignment = Alignment.Top

• Alignment.Bottom: 자식들을 아래쪽으로 정렬.

verticalAlignment = Alignment.Bottom

• Alignment.CenterVertically: 자식들을 세로 중앙에 정렬.

verticalAlignment = Alignment.CenterVertically