[Compose Column] vertical arrangement 사용해 배치하기

Arrangement 란?

Jetpack Compose의 Arrangement란 View의 배치(Arrangement)을 지원해주는 변수이다.

 

그림1. Column의 Arrangement

Column에서는 Arrangement.Vertical을 상속받는 아래 6가지 Arrangement를 사용할 수 있다.

• Arrangement.Top
• Arrangement.Center
• Arrangement.Bottom
• Arrangement.SpaceBetween
• Arrangement.SpaceAround
• Arrangement.SpaceEvenly

아래에서 각각이 어떻게 동작하는지 살펴보자.

 

ColumnArrangement 살펴보기

이 옵션들이 어떻게 보이는지 확인하기 위해 다음과 같이 Preview를 정의한다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

위 코드를 보면 아래와 같이 나온다.

그림2. 기본 Column Preview

 

Arrangement.Top

ArrangeMent.Top은 Column의 Default(기본) Arrangement로 기본과 같이 나온다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Top
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

그림3. Column Arrangement.Top Preview

 

Arrangement.Center

Arrangement.Center은 중앙정렬이다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

그림4. Arrangement.Center Preview

 

Arrangement.Bottom

Arrangement.Bottom은 아래정렬이다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Bottom
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

 

 

Arrangement.SpaceBetween

Arrangment.SpaceBetween은 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 0인 Arrangement 이다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

 

Arrangement.SpaceAround

Arrangement.SpaceAround는 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 컴포넌트들간 간격의 절반(x/2)인 Arrangement 이다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.SpaceAround
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}

 

Arrangement.SpaceEvenly

Arrangement.SpaceEvenly는 컴포넌트들 간의 간격은 동일(x), 양쪽 끝과 컴포넌트 사이의 빈 공간이 컴포넌트들의 간겨과 동일(x)한 Arrangement이다.

@Preview(showBackground = true, widthDp = 120, heightDp = 200)
@Composable
fun KotlinWorldColumn() {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.SpaceEvenly
    ) {
        Text(text = "Kotlin")
        Text(text = "World")
        Text(text = "Blog")
    }
}