[Compose Row] vertical alignment 사용해 정렬하기

Row의 Alignment

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

그림1. 동일 x축에서 정렬되는 verticalAlignment

 

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

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

그림2. verticalAlignment 종류

• Alignment.Top (위쪽 정렬)
• Alignment.CenterVertically (중앙 정렬)
• Alignment.Bottom (아래쪽 정렬)

Alignment.Top

Alignment.Top은 Row의 기본 Arrangement로 레이아웃의 위쪽에 모든 컴포넌트들이 정렬된다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldRowTop(){
    Row(verticalAlignment = Alignment.Top) {
        Text("Kotlin")
        Text("World")
        Text("Blog")
    }
}

그림3. Alignment.Top

 

Alignment.CenterVertically

레이아웃의 수직 중앙에 모든 컴포넌트들이 정렬된다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldRowCenterVertically(){
    Row(verticalAlignment = Alignment.CenterVertically) {
        Text("Kotlin")
        Text("World")
        Text("Blog")
    }
}

그림4. Alignment.CenterVertically

 

Alignment.Bottom

레이아웃의 아래쪽에 모든 컴포넌트들이 정렬되는 옵션이다.

@Preview(showBackground = true, widthDp = 200, heightDp = 100)
@Composable
fun KotlinWorldRowBottom(){
    Row(verticalAlignment = Alignment.Bottom) {
        Text("Kotlin")
        Text("World")
        Text("Blog")
    }
}

그림5. Alignment.Bottom