[Jetpack Compose] ConstraintLayout

1. ConstraintLayout 이란?

---

ConstraintLayout(
    modifier = Modifier
        .size(300.dp)
        .background(Color.Gray)
) {

}

 

ConstraintLayout은 Compose에서 복잡한 레이아웃을 구성할 때 사용한다

XML 기반의 ConstraintLayout과 유사한 방식으로, 제트팩 컴포즈에서는 ConstraintLayout을 통해

화면 요소들을 상대적으로 배치할 수 있으며 다른 레이아웃 composable과

마찬가지로 ConstraintLayout은 하나의 modifier 파라미터를 호출할 수 있다

ConstraintLayout은 컴포저블 및 컴포즈의 다른 레이아웃들과 동일한 형태로 제공되며 위와 같은 방식으로 호출한다

 

https://developer.android.com/develop/ui/compose/layouts/constraintlayout

Compose의 ConstraintLayout  |  Jetpack Compose  |  Android Developers

 

2. 사용 방법

---

dependencies {
    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
}

 

Jetpack Compose의 ConstraintLayout은 별도의 라이브러리로 제공된다

ConstraintLayout을 사용하기 위해 가장 먼저 build.gradle 파일에 위의 의존성을 추가한다

@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .size(300.dp)
            .background(Color.Gray)
    ) {
        //val text1 = createRef()
        val (box1, box2) = createRefs()

        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Red)
                .constrainAs(box1) {
                    start.linkTo(parent.start)
                    top.linkTo(parent.top)
                }
        )

        Box(
            modifier = Modifier
                .size(50.dp)
                .background(Color.Green)
                .constrainAs(box2) {
                    start.linkTo(box1.end, margin = 8.dp)
                    top.linkTo(box1.bottom, margin = 8.dp)
                }
        )
    }
}

 

참조를 할당해서 제약을 추가한 코드이다

제약 조건이 존재하지 않으면 ConstraintLayout의 composable 자식은 콘텐츠 영역의 왼쪽 위 모서리에 배치된다

ConstraintLayout이 참조(createRef(), createRefs())를 통해 각 composable 요소를 식별하고,

이를 기반으로 제약 조건을 설정하기 때문에 제약을 받을 composable 요소에

제약 조건을 적용하기 전에 참조를 할당해야 한다

ConstraintLayout을 사용할 때, composable의 제약 조건은 주로 부모 ConstraintLayout 또는

다른 composable의 관계를 설정하는 형태로 정의된다

제약 조건의 작성 방법은 XML 문법과 유사하며 constrainAs의 후행 람다 안에서 linkTo 함수를 호출하여 선언한다

Annotation

Annotation