[Android][Compose] Glide 이미지 라이브러리 사용하기

Jetpack Compose

 

안녕하세요~ 챠니입니다! :)

 

요즘에 저는 Jetpack Compose에 대해서 공부를 하고있는데요~!

오늘은 Compose에서 Glide 라이브러리를 통해 이미지 URL load하는 방법에 대해서 알아보도록 하겠습니다!

 

 

이미지 라이브러리 종류

라이브러리의 Github은 여기를 참고해 주세요~!

https://github.com/skydoves/landscapist

GitHub - skydoves/landscapist: 🌻 A pluggable, highly optimized Jetpack Compose and Kotlin Multiplatform image loading library

 

해당 Github에서는 이미지 라이브러리 종류와 사용법이 적혀있는데요

Glide, Coil, Fresco와 여러가지 custom하는 방법이 적혀있습니다!

 

 

이번에는 여기중에서 Glide 이미지 라이브러리를 사용해보겠습니다!

 

Compose Glide 셋팅

[build.gradle]

implementation("com.github.skydoves:landscapist-glide:2.4.7")
//    implementation("com.github.bumptech.glide:compose:1.0.0-beta01")

 

Compose Glide를 사용하기 위해서 다음 라이브러리를 추가합니다.

아래에 있는 bumptech 보다는 더 사용성있는 다음 라이브러리를 채택하게 되었습니다!

 

 

Compose Glide 사용방법

저는 Compose에서 Glide를 다음과 같이 사용하고 있는데요~!

 

GlideImage(
    modifier = Modifier
        .size(width = 80.dp, height = 60.dp)
        .border(1.dp, colorResource(R.color.black)),
    imageModel = { item.largeImageURL }, // loading a network image using an URL.
    imageOptions = ImageOptions(
        contentScale = ContentScale.Crop,
        alignment = Alignment.TopStart
    ),
    failure = {
        Image(painterResource(R.drawable.image_error), contentDescription = null)
    },
    onImageStateChanged = {
        when (it) {
            GlideImageState.None -> {}
            GlideImageState.Loading -> {}
            is GlideImageState.Success -> {}
            is GlideImageState.Failure -> {ImageBitmap(R.drawable.image_error)}
        }
    },
)

 

compose에 대한 지식이 부족하다보니, 이상한점있으면 댓글로 남겨주세요~!

 

* 먼저 modifier를 통해서 image에 대한 설정을 하고

* imageModel에 URL을 입력합니다.

* imageOptions에는 이미지 scale과 alignment등을 설정하고

* failure, onImageStateChanged 등을 통해서 [로딩, 성공, 실패] 상태일때 이미지를 어떻게 처리할 것인지 Custom을 할 수 있겠습니다~!

 

 

* Compose Image 관련 도움되는 글

추가적으로 검색을 하다보니 Compose Image관련해서 다음과 링크에서 자세하게 설명이 되어있습니다.

참고가 필요하신분은 같이 참고하면 좋을것 같습니다~!

 

https://pluu.github.io/blog/android/2024/06/02/compose/

Pluu Dev - [정리] Compose 가이드 문서 ~ Images and graphics

 

 

 

 

 

 

 

 

 

질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!

응원의 댓글은 저에게 큰 힘이 된답니다! :)

즐거운 하루되세요!

 

깃허브 보러 놀러오세요 👇 (맞팔환영)

https://github.com/younminchan

younminchan - Overview