[Android Compose] Arrangement의 SpaceBetween, SpaceAround, SpaceEvenly의 차이

SpaceBetween, SpaceAround, SpaceEvenly 알아보기

Compose의 Row와 Column에서 Arrangement의 인자값으로 넘길 수 있는 SpaceBetween, SpaceAround, SpaceEvenly는 컴포넌트를 배치(Arrangement)할 때 매우 유용하게 사용할 수 있는 옵션이다.  기본적으로 Space~이 들어간 옵션은 모두 컴포넌트들간의 간격을 동일하게 맞춰준다. 하지만 그 각각의 내부 동작이 다른데 어떻게 다른지 아래에서 살펴보도록하자. 

 

 

SpaceBetween

그림1. Arrangement.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")
    }
}

그림2. Arrangement.SpaceBetween 사용 예제

위의 Kotlin과 Blog가 양끝에 여유공간이 없이 붙어있는 것을 확인할 수 있으며 Compose 컴포넌트간의 간격이 동일한 것을 확인할 수 있다.

 

 

 

SpaceAround

그림3. Arrangement.SpaceAround

SpaceAround는 아래 두가지 특징을 가진 컴포넌트이다.

• SpaceAround은 컴포넌트들간의 간격을 동일하게 맞춰준다.
• SpaceAround은 양쪽 끝 컴포넌트와 레이아웃의 간격을 컴포넌트들간 간격의 절반으로 만든다.

 

아래에서 실제로 어떻게 사용되는지 살펴보자

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldSpaceAround(){
    Row(horizontalArrangement = Arrangement.SpaceAround) {
        Text("Kotlin")
        Text("World")
        Text("Blog")
    }
}

그림4. Arrangement.SpaceAround 사용 예제

 

 

SpaceEvenly

그림5. Arrangement.SpaceEvenly

SpaceEvenly는 아래 두가지 특징을 가진 컴포넌트이다.

• SpaceEvenly은 컴포넌트들간의 간격을 동일하게 맞춰준다.
• SpaceEvenly은 양쪽 끝 컴포넌트와 레이아웃의 간격을 컴포넌트들간 간격과 같게 만든다.

 

아래에서 실제로 어떻게 사용되는지 살펴보자

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldSpaceEvenly(){
    Row(horizontalArrangement = Arrangement.SpaceEvenly) {
        Text("Kotlin")
        Text("World")
        Text("Blog")
    }
}

그림6. Arrangement.SpaceEvenly 사용 예제