[Compose Row] horizontal arrangement 사용해 배치하기

Row의 Arrangement

Row는 수평방향으로 자식 컴포넌트들을 순서대로 배치하는 레이아웃이다. 이때 어떤 방식으로 자식 컴포넌트들을 배치할지를 Row의 horizontalArrangement가 결정한다.

 

예를 들어 3개의 Text를 row의 내부에 배치한다고 할 때 첫 번째 컴포넌트는 왼쪽에 붙여서, 두 번째는 정중앙에, 세 번째는 오른쪽에 붙여서 배치하고 싶다고 해보자. 이때 직접 컴포넌트의 위치를 지정해주기보다. Arrangement.SpaceBetween을 쓰면 한 번에 해결된다.

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

그림1. SpaceBetween

 

이러한 동작 방식을 익히는 것은 UI 코드의 간결성과 안정성을 위해 매우 중요하다. 자 이제 Row에서 어떤 배치가 가능할지 알아보도록 하자.

 

Row에서 사용할 수 있는 Arrangement의 종류

Row에서는 Arrangement.Horizontal 인터페이스를 상속 받는 6가지의 Arrangement를 사용할 수 있다. 

그림2. Arrangement.Horizontal을 상속 받는 6가지 Arrangement

• Arrangement.Start
• Arrangement.Center
• Arrangement.End
• Arrangement.SpaceBetween
• Arrangement.SpaceAround
• Arrangement.SpaceEvenly

 

Arrangement.Start

왼쪽 배치 옵션이다.

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

그림3. Arrangement.Start

 

Arrangement.Center

중앙 배치 옵션이다.

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

그림4. Arrangement.Center

 

 

Arrangement.End

오른쪽 배치 옵션이다.

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

그림5. Arrangement.End

Arrangment.SpaceBetween

Arrangement.Space*은 자식 컴포넌트들 간에 간격이 동일하도록 만드는 옵션이다. 다른 점은 레이아웃의 양 끝과 자식 컴포넌트와의 간격이다.

SpaceBetween은 양끝과 자식 컴포넌트와의 간격이 0이라 자식 컴포넌트가 양끝에 붙어있다.

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

그림6. Arrangment.SpaceBetween

Arrangment.SpaceAround

SpaceBetween은 양끝과 자식 컴포넌트와의 간격이 자식 컴포넌트들간의 간격(x)의 반(x/2)이라 양 끝에 빈 공간이 자식 컴포넌트들과의 간격의 반만큼 있다.

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

그림7. Arrangment.SpaceAround

Arrangment.SpaceEvenly

SpaceEvenly은 양끝과 자식 컴포넌트와의 간격이 자식 컴포넌트들간의 간격(x)과 동일하다.

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

그림8. Arrangment.SpaceEvenly