android/Compose

Compose의 ConstraintLayout

liz_devel 2024. 8. 2. 12:02

특징

  • 여러 중첩된 Row, Column, Box, 맞춤 레이아웃 요소 대신 사용할 수 있다.
  • 복잡한 정렬 요구사항이 있는 더 큰 레이아웃을 구현할 때 유용하다.
  • xml에서 사용할 때는 중첩을 피해 플랫된 구조로 사용하여 뷰를 찾아가는 복잡도를 줄여 많은 이점이 있었으나 Compose에서는 다른 레이아웃과 동일하게 하위 Tree를 1회 오가기 때문에 성능상 다른 이점은 없다.

 

이럴 때 사용하기

  • 코드 가독성 개선을 위해 여러 Column 및 Row를 중첩하지 않고 싶을 때
  • 다른 컴포저블을 기준으로 컴포저블을 배치하거나 가이드라인, 배리어, 체인을 기반으로 컴포저블을 배치할 때

어떻게 사용해?

  1. build.gradle에 이 종속 항목을 추가합니다.
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

 

코드 예제

@Composable
fun TestConstrain() {
    ConstraintLayout {
        val (text1, text2, button) = createRefs()
        Text(
            text = "샘플이라서",
            color = Color.White,
            modifier = Modifier
                .padding(end = 10.dp)
                .constrainAs(text1) {
                    centerVerticallyTo(parent)
                    top.linkTo(parent.top)
                }
        )
        Text(
            text = "아무말이나",
            color = Color.White,
            modifier = Modifier
                .constrainAs(text2) {
                    centerVerticallyTo(parent)
                    start.linkTo(text1.end)
                }
        )
        Button(onClick = { /*TODO*/ },
            modifier = Modifier
                .padding(start = 10.dp)
                .constrainAs(button) {
                    centerVerticallyTo(parent)
                    end.linkTo(parent.end)
                    start.linkTo(text2.end)
                }) {}
    }

}

 

  • createRefs()
    • xml에서 각 뷰에 대한 id를 만들어서 참조를 만들어 주었듯이 createRefs() 또는 createRefFor()를 통해 id를 만들어 준다.
val (text1, text2, button) = createRefs()

 

  • constrainAs()
    • 정해진 이름을 알맞은 컴포저블 constrainAs에 넣어준다.
constrainAs(text1)
  • linkTo()
    • 다른 구성물을 기준으로 자신의 위치를 배치한다.
    • 아래 코드를 보면 자신의 윗면이 parent 윗면과 연결한다는 뜻이다.
top.linkTo(parent.top)

 

 

*그 외 비슷한 BoxWithConstraints라는 게 있는데 Box처럼 사용 가능하고 ConstraintLayout과 다른 점은 최소, 최대 사이즈 설정이 가능하다.

 

 

샘플 코드: https://github.com/search?q=repo%3Aandroid%2Fcompose-samples+ConstraintLayout&type=code

반응형