Jetpack Compose에서 Column과 Modifier.align으로 버튼 정렬 쉽게 하기

Jetpack Compose는 안드로이드 앱의 UI를 쉽고 빠르게 만들 수 있는 최신 도구입니다. 오늘은 Jetpack Compose를 사용하여 간단한 버튼 배치 레이아웃을 만드는 방법을 소개하겠습니다. 이번 예제는 세 개의 버튼 (LEFT, CENTER, RIGHT)을 각각 왼쪽, 중앙, 오른쪽에 배치하는 간단한 구조입니다. 이 예제는 초보자도 쉽게 따라 할 수 있도록 설명해드릴게요.

 

안드로이드 스튜디오에서 "New Project">"Empty Activity"로 새로운 프로젝트를 다음과 같이 생성합니다.

 

프로젝트 이름을 "compose_02_03"이라고 입력하고 프로젝트를 생성합니다.

 

 

프로젝트를 만들면 자동으로 MainActivity가 생성이 됩니다. 자동으로 생성된 Greeting 컴포즈 함수를 삭제합니다.  

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_03Theme {
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Compose_02_03Theme {
    }
}

 

세 개의 버튼 (LEFT, CENTER, RIGHT)을 각각 왼쪽, 중앙, 오른쪽에 배치하는 SampleLayoutScreen 컴포즈 함수를 작성합니다.

@Composable
fun SampleLayoutScreen() {
}

 

세 개의 버튼 출력하기 위해서 Column 레이아웃을 사용하여 수직으로 배치하고 배경색, 패딩 등을 다음과 같이 지정합니다. Arrangement.spacedBy()는 Column 또는 Row와 같은 레이아웃에서 내부 요소들 사이의 간격을 설정하는 데 사용됩니다.

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(16.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
	}

 

이제 버튼 세 개를 추가하고 버튼의 위치를  각각 왼쪽, 중앙, 오른쪽에 배치하기 위해서  Button의 Modifier.align()으로 Button의 위치를 Start,  CenterHorizontally, End로  지정 했습니다.

 

1. Alignment.Start:
   • 요소를 부모의 시작 (왼쪽)으로 정렬합니다.
   • 예시: modifier = Modifier.align(Alignment.Start)
2. Alignment.CenterHorizontally:
   • 요소를 부모의 중앙에 정렬합니다 (수평 기준).
   • 예시: modifier = Modifier.align(Alignment.CenterHorizontally)
3. Alignment.End:
   • 요소를 부모의 끝 (오른쪽)으로 정렬합니다.
   • 예시: modifier = Modifier.align(Alignment.End)

 

@Composable
fun SampleLayoutScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(16.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        Button(
            onClick = {},
            modifier = Modifier.align(Alignment.Start)
        ) {
            Text(text = "LEFT", fontWeight = FontWeight.Bold, fontSize = 16.sp)
        }
        Button(
            onClick = {},
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Text(text = "CENTER", fontWeight = FontWeight.Bold, fontSize = 16.sp)
        }
        Button(
            onClick = {},
            modifier = Modifier.align(Alignment.End)
        ) {
            Text(text = "RIGHT", fontWeight = FontWeight.Bold, fontSize = 16.sp)
        }
    }

}

 

위에서 작성한 SampleLayoutScreen 컴포즈 함수를 onCreate 함수 안에서 다음과 같이 SampleLayoutScreen() 컴포즈 함수를  추가해서 호출을  합니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Compose_02_03Theme {
                SampleLayoutScreen()
            }
        }
    }
}

 

 

이제 모든 작업이 끝났기 때문에 실행을 하거나 Preview 화면으로 확면을 확인 하면 다음과 같이 세개의 버튼이 LEFT, CENTER, RIGHT위치에 배치되어 출력이 됩니다. 

 

 

[실행화면]