[compose] ConstraintLayout

Compose ConstraintLayout 적용

Feed화면은 15개 이상의 element를 가지고 있는 복잡한 화면이다.

 

화면을 적당히 나눠 그리는 방법도 있지만 한 번에 가독성 좋게 구성 할 수 있는 방법이 있다.

위 constraintLayout을 사용하는 것이다.

 

constraintLayout은 각 element들을 다양한 방법으로 위치 시킬 수 있어 

row나 colunm, box 와 같은 layout들을 중첩하지 않더라도 한 layout에서 모두 배치 할 수 있는 방법을 제공한다.

 

의존성 추가

compose constraintLayout를 사용하기 위해서는 우선 의존성을 추가해줘야 한다.

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

 

 

feed 완성 화면

 

사전 셋팅

Decoupled API를 활용해서 UI element와 UI를 배치하는 코드를 분리하였다.

가독성에서 보기 좋았고

UI element는 약간의 로직과 많은 파라미터를 필요로 할 수 있어 분리하는게 역시 가독성 면에서 좋았다.

가독성이 좋아지면 구현이나 관리하기도 편해진다.

@Composable
fun Feed(
    ConstraintLayout(modifier = Modifier.fillMaxWidth().padding(top = 8.dp), constraintSet = feedCommentsConstraint())
    {
    }
}

fun feedCommentsConstraint(): ConstraintSet {
    return ConstraintSet {
    }
}

 

프로필 이미지 배치

constraintLayout에서 가장 많이 사용하는 함수는 linkTo() 이다.

 

프로필 이미지는 레이아웃의 최상단, 왼쪽에서 12dp 떨어지게 배치한 코드이다.

// 프로필 이미지
imageLoadCompose.invoke(Modifier.layoutId("refProfile").testTag("imgProfile").size(32.dp).nonEffectclickable(onProfile).border(width = 0.5.dp, color = Color.LightGray, shape = RoundedCornerShape(20.dp)).clip(RoundedCornerShape(20.dp)), review.user.profilePictureUrl, 20.dp, 20.dp, ContentScale.Crop)

...

constrain(profile) {
    top.linkTo(parent.top)
    start.linkTo(parent.start, margin = 12.dp)
}

 

 

 

 

 

소스코드: https://github.com/sarang628/BaseFeed/blob/main/library/src/main/java/com/sarang/torang/compose/feed/Feed.kt