Android(kotlin) - JetPack Compose - ConstraintLayout으로 프로필카드 만들기

실습

@Composable
fun CardWithConstraintEx() {

    val cardData = CardData(
        imageUri = "https://cdn.gjdream.com/news/photo/202308/631816_233764_323.jpg",
        imageDescription = "sleeping cat",
        name = "pimo",
        description = "이 고양이는 꿀잠자는 중 입니다.",
    )
    Column {
        CardItem(cardData)
        CardItem(cardData)
    }
}

@Preview(showBackground = true)
@Composable
fun CardWithConstraintExPreview() {
    Compose_exampleTheme {
        CardWithConstraintEx()
    }
}

@Composable
fun CardItem(cardData: CardData) {
    val color = Color(0x33000000)

    Card(
        elevation = CardDefaults.elevatedCardElevation(8.dp),
        modifier = Modifier.padding(4.dp),
    ) {
        ConstraintLayout(
            modifier = Modifier.fillMaxWidth()
        ) {
            val (profileImg, name, description) = createRefs()

            AsyncImage(
                model = cardData.imageUri,
                placeholder = ColorPainter(color), // 이미지가 없을때 넣을 것
                contentScale = ContentScale.Crop, // 사이즈에 맞지 않은 것은 잘라냄
                contentDescription = "sleeping cat",
                modifier = Modifier
                    .size(30.dp)
                    .clip(CircleShape) // 둥굴게,
                    .constrainAs(profileImg) {
                        start.linkTo(parent.start, margin = 10.dp)
                        top.linkTo(parent.top)
                        bottom.linkTo(parent.bottom)
                    }
            )

            Text(
                text = cardData.name,
                modifier = Modifier.constrainAs(name) {
                    start.linkTo(profileImg.end, margin = 10.dp)
                }
            )

            Text(
                text = cardData.description,
                modifier = Modifier.constrainAs(description) {
                    start.linkTo(profileImg.end, margin = 10.dp)
                    end.linkTo(parent.end)
                    width = Dimension.fillToConstraints // 제약만큼만
                }
            )

            val chain = createVerticalChain(
                name,
                description,
                chainStyle = ChainStyle.Packed
            )

            // 위 아래 공백 만들기 위함
            // 각 Text 위 아래 margin을 주지 못한다. chain을 만드는 순간 포함된 애들은 margin이 적용 불가
            // 그러므로 아래와 같은 방식으로 margin을 주어야 한다.
            constrain(chain) {
                top.linkTo(parent.top, margin = 8.dp)
                bottom.linkTo(parent.bottom, margin = 8.dp)
            }

        }
    }
}

data class CardData(
    val imageUri: String,
    val imageDescription: String,
    val name: String,
    val description: String,
)