[Compose Layout] 6. ConstraintLayout 사용법 정리

ConstraintLayout 이란?

ConstraintLayout이란 View간의 상대적 제약조건(Constraint)을 만들 수 있는 Layout을 뜻한다. 상대적 제약조건이란 특정 뷰가 다른 View에 대해 위(Top), 아래(Bottom), 왼쪽(Start), 오른쪽(End)에 위치할 수 있는지를 정의한 조건을 뜻한다.

 

Compose 이전 안드로이드에서는 ConstraintLayout을 쓰는 것이 복잡한 View를 성능 저하 없이 만들 수 있는 최선의 방법이었으므로 권장되었는데, Compose에서는 코드의 가독성이 아닌이상 굳이 ConstraintLayout을 쓰는 것이 권장되지 않는다. 이에 대해서 자세히 알고 싶으면 아래 글을 참조 하길 바란다.

 

 [Android] ConstraintLayout을 쓰는 것이 Compose에서는 권장되지 않는 이유

[Android] ConstraintLayout을 쓰는 것이 Compose에서는 권장되지 않는 이유

 

 

ConstraintLayout을 이용하기 위한 준비

Compose에서는 ConstraintLayout을 꼭 써야 하지 않는 이상(코드상 가독성 등) 쓰는 것이 권장되지 않다보니, ConstraintLayout은 Compose의 기본 라이브러리에 포함되어 있지 않다. 따라서 사용하려면 별도의 라이브러리를 추가해주어야 한다.

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

 

 

 

ConstraintLayout  사용하기

자 이제 ConstraintLayout을 사용해보자. ConstraintLayout을 사용하기 위해서는 자식 View 만큼의 ConstrainedLayoutReference를 만들어야 한다. 

*ConstrainedLayoutReference이란?
ConstraintLayout은 View(Compose) 간의 상대적인 위치를 지정할 수 있는 레이아웃이다. 이를 위해서는 상대 View의 Id를 알아야 한다. 기존 xml에서는 이를 android:id로 지정했지만, Compose에서는 이를 ConstrainedLayoutReference에 대응시킨다.

 

예를들어 ConstraintLayout 안에 KotlinWorld라는 Text와 Enter Button이라는 Text 두개가 있다고 해보자.

@Preview(showBackground = true, widthDp = 200, heightDp = 200)
@Composable
fun KotlinWorldConstraintLayout() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val kotlinWorldText: ConstrainedLayoutReference = createRef() // 0. ConstrainedLayoutReference 만들기
        val enterButtonText: ConstrainedLayoutReference = createRef() // 0. ConstrainedLayoutReference 만들기

        Text(text = "KotlinWorld",
            modifier = Modifier.constrainAs(kotlinWorldText) { // 1. Text에 kotlinWorldText라는 ConstrainedLayoutReference를 지정한다.
                top.linkTo(parent.top) //  3. ConstraintLayout(parent)의 bottom에 kotlinWorldText의 top을 놓기
            })

        Text("Enter Button", modifier = Modifier.constrainAs(enterButtonText) { // 2. Text에 Enter Button이라는 ConstrainedLayoutReference를 지정한다.
            top.linkTo(kotlinWorldText.bottom)// 4.enterButton을 가지고 있는 Compose의 top을 KotlinWorldText의 Bottom에 위치시킨다.
        })
    }
}

1. 먼저 이들의 ConstrainedLayoutReference를 지정하기 위해 ConstraintLayoutScope createRef()함수를 통해 kotlinWorldText, enterButtonText두개의 ConstrainedLayoutReference를 만들어내야 한다.
2.  KotlinWorld에 kotlinWorldText를 Id(ConstrainedLayoutReference)로 지정한다.
3. Enter Button에 enterButtonText를 Id(ConstrainedLayoutReference)로 지정한다.
4. KotlinWorld의 상단(top)을 ConstraintLayout 의 상단(top)에 맞춘다.
5. Enter Button의 상단(top)을 KotlinWorld의 하단(bottom)에 맞춘다.

이 과정을 통해 다음의 View가 완성된다. KotlinWorld는 parent의 상단에 맞춰져있고 Enter Button은 KotlinWorld의 하단에 맞춰진 것을 볼 수 있다.

그림1. ConstraintLayout 예제 결과물