Chain

@Composable
fun ConstraintLayoutEx() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (redBox, yellowBox, magentaBox, text) = createRefs()

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Red)
            .constrainAs(redBox) {
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Yellow
            .constrainAs(yellowBox) {
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Magenta)
            .constrainAs(magentaBox) {
            }
        )

        // createHorizontalChain 사용
        createHorizontalChain(redBox, yellowBox, magentaBox)
        
        // createHorizontalChain + chainStyle 적용. (Packed, Spread, SpreadInside)
        createHorizontalChain(redBox, yellowBox, magentaBox, chainStyle = ChainStyle.Packed)
        
        createVerticalChain(redBox, yellowBox, magentaBox)
    }
}

• horizontal
  

• vertical
  
  )

• 동시 사용
  

• ChainStyle Packed
  

• ChainSytle SpreadInside
  

Barrier

@Composable
fun ConstraintLayoutEx() {
    ConstraintLayout(modifier = Modifier.fillMaxSize()) {
        val (redBox, yellowBox, magentaBox, text) = createRefs()

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Red)
            .constrainAs(redBox) {
                top.linkTo(parent.top, margin = 18.dp)
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Yellow)
            .constrainAs(yellowBox) {
                top.linkTo(parent.top, margin = 32.dp)
            }
        )

        Box(modifier = Modifier
            .size(40.dp)
            .background(color = Color.Magenta)
            .constrainAs(magentaBox) {
                top.linkTo(parent.top, margin = 20.dp)
            }
        )

        createHorizontalChain(redBox, yellowBox, magentaBox, chainStyle = ChainStyle.SpreadInside)

        // 3개의 박스 가장 아래 배리어
        // 가장 위로 하려면 createTopBarrier.
        // 같은 방식으로 Start, End 가능. 단, Text constraint와 호환되는지 확인 필요. (ex, EndBarrier 하고 top.link하면 안됨
        val barrier = createBottomBarrier(redBox, yellowBox, magentaBox)

        Text(
            text = "가장 아래",
            modifier = Modifier.constrainAs(text) {
                top.linkTo(barrier)
                centerHorizontallyTo(parent)
            }
        )
    }
}

Practice

card data는 Card 게시물 확인

@Composable
fun CardEx(cardData: CardData) {

    Card(
        modifier = Modifier.padding(4.dp),
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
            val (profileImage, author, description) = createRefs()

            AsyncImage(
                model = cardData.imageUri,
                placeholder = ColorPainter(Color(0x5500ff00)),
                contentDescription = "앤텔로프 캐년",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape)
                    .constrainAs(profileImage) {
                        centerVerticallyTo(parent)
                        start.linkTo(parent.start, margin = 8.dp)
                    }
            )

            Text(
                text = cardData.author,
                modifier = Modifier
                    .constrainAs(author) {
                        linkTo(profileImage.end, parent.end, startMargin = 8.dp, endMargin = 8.dp)
                        width = Dimension.fillToConstraints
                    }
            )

            Text(
                text = cardData.description,
                modifier = Modifier.constrainAs(description) {
                    linkTo(profileImage.end, parent.end, startMargin = 8.dp, endMargin = 8.dp)
                    width = Dimension.fillToConstraints
                }
            )

            // chain에 참여하는 순간 마진이 꺼짐.
            // 따라서 chain에 마진 설정 필요
            val chain = createVerticalChain(author, description, chainStyle = ChainStyle.Packed)
            constrain(chain) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(parent.bottom, margin = 8.dp)
            }
        }
    }
}