[Android]Compose 정렬

Compose의 정렬 (Alignment & Arrangement)

작업하면서 Compose에서 정렬 기능을 자주 사용하게 되어, 이를 체계적으로 정리할 필요성을 느껴 정리한다. Compose에서는 정렬과 배치를 Alignment와 Arrangement로 구분하여 처리할 수 있다.

1. Alignment (정렬)

• 설명: Alignment는 Column, Row, Box에서 자식 View들의 정렬을 지정할 수 있음. Modifier.align()을 통해 세부 정렬 지정 가능.

• Column 정렬

  • Start: View의 왼쪽 정렬
  • CenterHorizontally: View의 중앙 정렬
  • End: View의 오른쪽 정렬

• Row 정렬

  • Top: View의 상단 정렬
  • CenterVertically: View의 중앙 정렬
  • Bottom: View의 하단 정렬

• Box 정렬

  • TopStart: 좌상단 정렬
  • TopCenter: 상단 중앙 정렬
  • TopEnd: 우상단 정렬
  • CenterStart: 왼쪽 중앙 정렬
  • Center: 중앙 정렬
  • CenterEnd: 오른쪽 중앙 정렬
  • BottomStart: 좌하단 정렬
  • BottomCenter: 하단 중앙 정렬
  • BottomEnd: 우하단 정렬

2. Arrangement (배치)

• 설명: Arrangement는 자식 View들의 배치 간격을 설정하는 데 사용. Row와 Column에서 적용 가능.

• Row Arrangement

  • View들을 수평으로 배치할 때 사용.

Row Arrangemnet

• Column Arrangement

  • View들을 수직으로 배치할 때 사용.
  • 특정 배치 옵션들에 대한 설명이 추가적으로 필요.

Column Arrangement

3. Space 관련 Arrangement 옵션

• Space Between
  • 각 component 간의 간격을 동일하게 하고, 양 끝은 간격을 두지 않음.
• Space Around
  • 각 component 간의 간격을 동일하게 하지만, 양 끝과 component 간의 간격은 component들 사이의 간격의 절반.
• Space Evenly
  • 각 component 간의 간격을 동일하게 하고, 양 끝과 component 간의 간격도 동일함.
• SpaceBy
  • component 간 간격을 직접 설정할 수 있는 옵션.