[Compose] 프로필 카드 구현 실습

프로필 카드를 만들어 보자

• 조건
  • AsyncImage, Spacer, Column, Text로 레이아웃을 만들어보세요.
  • AsyncImage에는 placeholder를 지정하고, contentScale을 ContentScale.Crop으로 설정합시다. clip(CircleShape)로 둥근 외양을 만들어 봅시다.

---

data class 만들기

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

---

companion object에 CardData 값 세팅하기

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {
                CardEx()
            }
        }
    }

    companion object {
        val cardData = CardData(
            imageUri = "https://cdn.slist.kr/news/photo/202406/559461_884638_4410.jpg",
            imageDescription = "에스파 카리나",
            name = "카리나",
            contents = "안녕하세요. 에스파 카리나 입니다."
        )

    }
}

---

placeholder 적용하기

• 네트워크 이미지를 미리보기에서 보기 불가할 때 컬러로 프로필 이미지 들어가는 곳을 체크하기 위해 적용했다.
  

@Composable
fun CardEx(cardData: CardData) {
    Card(elevation = 8.dp,
        modifier = Modifier.padding(4.dp)) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp)
        ) {
            AsyncImage(model = cardData.imageUri, contentDescription = cardData.imageDescription,
                contentScale = ContentScale.Crop,
                placeholder = ColorPainter(color = Color.Yellow),
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape))
            Spacer(modifier = Modifier.size(8.dp))
            Column {
                Text(text = cardData.name)
                Spacer(modifier = Modifier.size(4.dp))
                Text(text = cardData.contents)
            }
        }
    }

}

전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TestComposeTheme {
                Surface(modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background) {
                    Column {
                        CardEx(cardData)
                        CardEx(cardData)
                    }

                }

            }
        }
    }

    companion object {
        val cardData = CardData(
            imageUri = "https://cdn.slist.kr/news/photo/202406/559461_884638_4410.jpg",
            imageDescription = "에스파 카리나",
            name = "카리나",
            contents = "안녕하세요. 에스파 카리나 입니다."
        )

    }
}

@Composable
fun CardEx(cardData: CardData) {
    Card(elevation = 8.dp,
        modifier = Modifier.padding(4.dp)) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp)
        ) {
            AsyncImage(model = cardData.imageUri, contentDescription = cardData.imageDescription,
                contentScale = ContentScale.Crop,
                placeholder = ColorPainter(color = Color.Yellow),
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape))
            Spacer(modifier = Modifier.size(8.dp))
            Column {
                Text(text = cardData.name)
                Spacer(modifier = Modifier.size(4.dp))
                Text(text = cardData.contents)
            }
        }
    }

}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    TestComposeTheme {
        CardEx(cardData)
    }
}