Android Jetpack Compose UI/Compose Layout

[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")
    }
}

 

반응형

 

이 글의 저작권은 Dev World 에 있습니다. 글, 이미지 무단 재배포 및 변경을 금지합니다.

 

 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com