Android Jetpack Compose ConstraintLayout match constraint

Jetpack Compose에서 ConstraintLayout을 사용하며 겪은 어려움을 공유해보려한다.

(내가 Compose에 대한 사전지식이 충분하지 않은 탓이 클 것이라 생각하지만 말이다.)

 

내가 가장 힘들었던 부분은 제목에 적은 것처럼 match constraint 속성을 어떻게 적용해야하는가였다.

 

match constraint라는 말이 어색할 사람들을 위해 풀어서 설명해보자면 이런 것이다.

 

width, height를 0dp로 설정하고 View의 start, end, top, bottom에 제약 조건을 건다.

 

그렇게 되면 뷰가 제약 조건에 맞춰 늘어난다.

 

당연히 Compose에서도 그렇겠거니! 생각을 하고 Modifierdml width, height를 0.dp로 설정한 뒤 실행을 했더니

정말 그대로 안보였다.

 

그럼 이게 ConstraintLayout의 컨셉에 맞지 않다는 생각이 들었다.

 

하지만 공식 사이트에는 이에 대한 소개는 찾기 힘들었다.

 

결국 match constraint라는 키워드를 찾은 것은 공식 사이트였지만 Compose에서 사용하는 이름은 달랐다.

 

Modifier의 constraintAs 안에 width와 height를 Dimension.fillToConstraints로 설정해주면 됐다.

 

아래처럼 말이다.

            modifier = Modifier
                .constrainAs(playerBox) {
                    top.linkTo(something)
                    bottom.linkTo(something)
                    start.linkTo(something)
                    end.linkTo(something)
                    width = Dimension.fillToConstraints
                    height = Dimension.fillToConstraints
                }

 

이 간단한 두 줄을 추가하려고 몇 시간을 고생했는지 모른다.