[Compose Column] horizontal alignment 사용해 정렬하기

Alignment란?

Jetpack Compose의 Alignment란 View의 정렬을 지원해주는 변수이다. 즉, 모든 View가 동일한 x축 혹은 y축을 기준으로 정렬되도록 만드는 변수이다.

 

Column의 Alignment

Column의 자식 View들은 수직으로 배치되므로 수평으로 정렬(horizontalAlignemnt)이 지원되는데 수평 정렬은 모든 자식 View들의 x위치가 동일하도록 만들어주는 정렬이다. 따라서 같은 y축 상에서 정렬된다(x값 동일하기 때문).

그림1. Column의 Alignment

 

Column에서 사용할 수 있는 Alignment의 종류

Column에서는 Alignment.Horizontal을 상속받는 3가지 Alignment를 사용할 수 있다.

그림2. Column에서 지원하는 Alignment

• Alignment.Start (왼쪽 정렬)
• Alignment.CenterHorizontally (중앙 정렬)
• Alignment.End (오른쪽 정렬)

 

Alignment.Start

Alignment.Start는 자식 View들을 Column의 수평방향으로 Start(왼쪽)에 정렬하는 옵션이다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldColumn(){
    Column(horizontalAlignment = Alignment.Start) {
        Text("Kotlin World")
        Text("Blog")
    }
}

그림3. Alignment.Start

 

 

Alignment.CenterHorizontally

Alignment.CenterHorizontally는 자식 View들을 Column의 수평방향으로 중앙(Center Horizontal)에 정렬하는 옵션이다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldColumn(){
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("Kotlin World")
        Text("Blog")
    }
}

그림4. Alignment.CenterHorizontally

 

Alignment.End

Alignment.End는 자식 View들을 Column의 수평방향으로 오른쪽에 정렬하는 옵션이다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldColumn(){
    Column(horizontalAlignment = Alignment.End) {
        Text("Kotlin World")
        Text("Blog")
    }
}

그림5. Alignment.End