[Compose] UI를 구성할 때 요소를 정렬하는 방법

Box, Row, Column, LazyColumn, LazyRow 기본 컨테이너에서 정렬 방법

 

1. Box

- 자식 요소를 원하는 위치에 배치할 수 있는 컨테이너

정렬 방법

• contentAlignment → 전체 자식 정렬
• Modifier.align() → 각 자식 개별 정렬

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center // 모든 자식 요소 기본 정렬
) {
    Text(
        text = "이 텍스트는 오른쪽 상단!",
        modifier = Modifier.align(Alignment.TopEnd) // 개별 정렬
    )
}

contentAlignment = Alignment.Center → 모든 자식 요소를 중앙에 배치
Modifier.align(Alignment.TopEnd) → 이 요소만 오른쪽 상단에 배치

 

2. Row 

- 자식 요소들을 가로로 나열하는 컨테이너

정렬 방법

• verticalAlignment → 세로 정렬 (Row 내부)
• horizontalArrangement → 가로 간격 조정

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically, // 세로 중앙 정렬
    horizontalArrangement = Arrangement.SpaceBetween // 가로 양 끝 정렬
) {
    Text("왼쪽")
    Text("오른쪽")
}

verticalAlignment = Alignment.CenterVertically → 텍스트가 세로 중앙 정렬됨
Arrangement.SpaceBetween → 양쪽 끝에 요소 배치

 

3. Column

- 자식 요소들을 세로로 배치하는 컨테이너

정렬 방법

• horizontalAlignment → 가로 정렬 (Column 내부)
• verticalArrangement → 세로 간격 조정

Column(
    modifier = Modifier.fillMaxHeight(),
    horizontalAlignment = Alignment.CenterHorizontally, // 가로 중앙 정렬
    verticalArrangement = Arrangement.SpaceEvenly // 세로 간격 균등 배치
) {
    Text("위쪽 요소")
    Text("아래쪽 요소")
}

horizontalAlignment = Alignment.CenterHorizontally → 모든 자식이 가로 중앙 정렬됨
Arrangement.SpaceEvenly → 요소 간 간격이 균등해짐

 

4. LazyColumn & LazyRow

- 스크롤 가능한 리스트를 만들 때 사용

정렬 방법

• horizontalAlignment → 가로 정렬 (LazyColumn에서만 사용 가능)
• verticalAlignment → 세로 정렬 (LazyRow에서만 사용 가능)
• contentPadding → 리스트 전체의 패딩 설정

LazyColumn(
    modifier = Modifier.fillMaxHeight(),
    horizontalAlignment = Alignment.CenterHorizontally, // 가로 정렬
    contentPadding = PaddingValues(16.dp) // 리스트의 전체 패딩 설정
) {
    items(10) { index ->
        Text("아이템 $index")
    }
}

horizontalAlignment = Alignment.CenterHorizontally → 모든 아이템을 가로 중앙 정렬
contentPadding = PaddingValues(16.dp) → 리스트의 패딩 추가

 

5. Modifier를 활용한 정렬 설정

Box(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "가운데 정렬된 텍스트",
        modifier = Modifier.align(Alignment.Center) // 부모 기준 중앙 배치
    )
}