(Compose) Image

Jetpack Compose에서 이미지를 화면에 표시할 때 사용하는 Image 컴포넌트에 대해 소개합니다.

앱을 만들 때 사진, 그림, 아이콘 등을 보여주는 건 거의 필수 기능인데요, Compose에서는 이 과정을 어떻게 처리할 수 있을지 알아보겠습니다.

Image 컴포넌트란?

Image는 단순히 말해 화면에 비트맵, 벡터, URL로 불러온 이미지 등을 보여주는 UI 컴포넌트입니다.

Compose에서는 painter라는 개념을 이용해 이미지를 그리는데, 로컬 리소스뿐만 아니라 네트워크 이미지도 손쉽게 사용할 수 있습니다.

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "샘플 이미지"
)

크기와 스타일 설정

Modifier를 이용하면 크기나 스타일을 쉽게 변경할 수 있습니다.

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "샘플 이미지",
    modifier = Modifier
        .size(120.dp)
        .clip(CircleShape)
        .border(2.dp, Color.Gray, CircleShape)
)

네트워크 이미지 불러오기

로컬 리소스뿐만 아니라 URL로 이미지를 불러오기 위해서는 Coil과 같은 Image Loader 라이브러리를 사용해야 합니다.

AsyncImage(
    model = "<https://example.com/image.jpg>",
    contentDescription = "네트워크 이미지",
)

https://github.com/coil-kt/coil

contentScale로 이미지 맞추기

이미지를 영역에 어떻게 채울지 결정하는 속성은 contentScale입니다.

XML에서 ImageView의 scaleType과 동일한 속성입니다.

• ContentScale.Crop: 영역을 꽉 채우도록 잘라서 보여주기
• ContentScale.Fit: 이미지 전체를 맞추되 비율 유지
• ContentScale.FillBounds: 비율 무시하고 영역에 딱 맞추기

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(150.dp)
)

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA