Compose Layout(Column, Row, Box)

 

compose는 뷰를 tree구조로 관리하지 않고 flat하게 관리한다고 한다.

하위 요소를 측정한 후, 또 그 요소의 하위 요소를 측정하는 방식이 아니라 한 하위 요소를 하나씩만 측정한다고 한다.

즉, Column, Row, Box 등의 레이아웃을 아무리 중첩해도 flat하게 관리되기 때문에 중첩된 것과 안 된 것에 차이가 없다고 한다.

이 때문에 성능 면에서 ConstraintLayout을 사용하는 이점이 사라져 Compose에서는 사용을 지양하고 있다.

난 이 부분을 처음 접했을 때 너무너무 깜짝 놀랬다. layout의 중첩을 전혀 생각하지 않을 수 있다!!

compose에는 재밌는 부분이 굉장히 많은 것 같다. 

 

종류

• Column
• Row
• Box
• BoxWithConstraints

 

 

Column, Row

기존의 LinearLayout을 대체하는 Layout이다.

Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Column { /*...*/ }
    }
}

 

이런 식으로 ( ) 안에 속성을 작성한 후 { }에 하위 요소를 작성한다.

 

자주 사용한 속성

• Row.verticalAlignment : 세로 정렬
• Row.horizontalArrangement : 가로 정렬
• Column.horizontalAlignment : 가로 정렬
• Column.verticalArrangement : 세로 정렬
• modifier : 수정자인데 크기나 padding,background, border, 그림자 넣기까지 웬만한 건 다 이걸로 수정하는 듯

 

Box

Box는 아이템을 중첩할 수 있는 Layout이다. 어떤 속성도 주지 않으면 하위 요소는 계속 중첩된다.

만약 Box에 제약조건을 걸고 싶다면 BoxWithConstraints을 쓰면 된다고 하는데 아직 나도 안 써봐서 잘 모르겠당~~. 나중에 공부해서 추가로 내용을 더 채워보겠다!

 

 

기타

만약 compose에서 constraintsLayout을 사용하고 싶다면 따로 dependency를 추가해야 한다고 한다.

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01"

 

 

 

 

출처

https://developer.android.com/jetpack/compose/layouts?hl=ko

Compose의 레이아웃  |  Jetpack Compose  |  Android Developers

https://kotlinworld.com/184

Android Jetpack Compose 정리

https://tourspace.tistory.com/415

[Compose] 9. Constraint layout