반응형
SpaceBetween, SpaceAround, SpaceEvenly 알아보기
Compose의 Row와 Column에서 Arrangement의 인자값으로 넘길 수 있는 SpaceBetween, SpaceAround, SpaceEvenly는 컴포넌트를 배치(Arrangement)할 때 매우 유용하게 사용할 수 있는 옵션이다. 기본적으로 Space~이 들어간 옵션은 모두 컴포넌트들간의 간격을 동일하게 맞춰준다. 하지만 그 각각의 내부 동작이 다른데 어떻게 다른지 아래에서 살펴보도록하자.
SpaceBetween
SpaceBetween은 아래 두가지 특징을 가진 컴포넌트이다.
- SpaceBetween은 컴포넌트들간의 간격을 동일하게 맞춰준다.
- SpaceBetween은 양쪽 끝 컴포넌트와 레이아웃의 간격을 0으로 만든다.(간격이 없다.)
아래에서 실제로 어떻게 사용되는지 살펴보자
@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldRow(){
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text("Kotlin")
Text("World")
Text("Blog")
}
}
위의 Kotlin과 Blog가 양끝에 여유공간이 없이 붙어있는 것을 확인할 수 있으며 Compose 컴포넌트간의 간격이 동일한 것을 확인할 수 있다.
SpaceAround
SpaceAround는 아래 두가지 특징을 가진 컴포넌트이다.
- SpaceAround은 컴포넌트들간의 간격을 동일하게 맞춰준다.
- SpaceAround은 양쪽 끝 컴포넌트와 레이아웃의 간격을 컴포넌트들간 간격의 절반으로 만든다.
아래에서 실제로 어떻게 사용되는지 살펴보자
@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldSpaceAround(){
Row(horizontalArrangement = Arrangement.SpaceAround) {
Text("Kotlin")
Text("World")
Text("Blog")
}
}
SpaceEvenly
SpaceEvenly는 아래 두가지 특징을 가진 컴포넌트이다.
- SpaceEvenly은 컴포넌트들간의 간격을 동일하게 맞춰준다.
- SpaceEvenly은 양쪽 끝 컴포넌트와 레이아웃의 간격을 컴포넌트들간 간격과 같게 만든다.
아래에서 실제로 어떻게 사용되는지 살펴보자
@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldSpaceEvenly(){
Row(horizontalArrangement = Arrangement.SpaceEvenly) {
Text("Kotlin")
Text("World")
Text("Blog")
}
}
반응형
