[Jetpack Compose] 5. Card, Image, Icon

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=dAwnZfZPP48&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=5 

---

Card

기존의 cardView와 비슷

• fillMaxWidth() : 화면의 가로를 꽉 채움
• fillMaxWidth(0.5f) : 화면의 가로를 절반만 채움
• RoundedCornerShape : 모서리 둥글게

Card(
    modifier = Modifier
        .fillMaxWidth(0.5f)
        .padding(16.dp),
    shape = RoundedCornerShape(8.dp),
    elevation = 5.dp
)

---

사진

Image Composable 객체 사용

• painter : drawable에 들어있는 resource 경로
• contentDescription : 설명이 반드시 들어가야 함
• contentScale : 이미지가 layout과 맞지 않는 경우 scale을 맞출 수 있도록 함

(contentScale 설명)

https://sonseungha.tistory.com/654

[Compose UI] Image (이미지 다루기)

Image(
      painter = painterResource(id = R.drawable.profile),
      contentDescription = "poster",
      contentScale = ContentScale.Crop
)

---

아이콘

IconButton으로 아이콘 생성

• imageVector : 안드로이드 기본 아이콘 사용할 때
• tint : 색깔 지정

IconButton(onClick = {  }) {
          Icon(
              imageVector = Icons.Default.Favorite,
              contentDescription = "favorite",
              tint = Color.Red
          )
}

---

결과물