[Android] Glide

💡자주 사용하는 이미지 로딩 라이브러리인 Glide에 대하여 학습 내용을 기록하였습니다.

 

Glide

• Glide는 안드로이드에서 이미지 로딩 및 캐싱을 위한 라이브러리로, 네트워크 또는 로컬에서 이미지를 효율적으로 가져와 로드할 수 있습니다.
• 메모리 효율, 디스크 캐시, 애니메이션 지원 등 다양한 기능을 제공하며, 큰 이미지 파일이나 비동기 이미지 로드가 필요한 경우 유용하게 사용됩니다.

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

 

Gradle

• Glide를 프로젝트에 추가하려면 build.gradle 파일에 의존성을 추가해야 합니다.

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.15.1' // 최신 버전으로 변경 가능
    kapt 'com.github.bumptech.glide:compiler:4.15.1' // Annotation Processor (Optional)
}

이미지 로딩 라이브러리 사용 이유

• 로컬에 있는 이미지를 가져오는 것은 간단하지만, 네트워크나 캐시에서 가져올 경우 불안정하고 예상치 못한 경우가 발생할 수 있습니다.
• 사용자 입장에서 이해할 수 있는 과정과 처리가 진행되어야 하며, 이를 쉽게 해결해줄 수 있는 것이 이미지 로딩 라이브러리입니다.
• 사용자에게 이미지를 보여줄 때 아래와 같은 과정을 거쳐야 합니다.

• 이미지 전처리 : 이미지를 로딩하기 전에 섬네일이나 진행 상황 표시
• 이미지 로딩 : 캐시나 네트워크에서 이미지를 가져옴
• 이미지 디코딩 : BitmapFactory를 이용하여 이미지를 비트맵 형식으로 변환하고 크기, 회전, 품질 등을 변환하는 단계
• 이미지 후처리 : 보여 줄 이미지에 애니메이션이나 모서리를 둥글게 하는 등의 효과를 적용
• 보여 주기 : UI 스레드에서 이미지를 적용하는 단계

Glide 적용

• 일반적으로 아래와 같이 사용하며, 매우 간단하게 이미지를 로드할 수 있습니다.
• placeholder()와 error()를 사용하여 이미지 로드와 실패한 경우를 처리할 수 있습니다.

import com.bumptech.glide.Glide

Glide.with(context)
     .load("<https://example.com/image.jpg>") // 이미지 URL 또는 파일 경로
     .into(imageView) // 이미지가 로드될 ImageView
     .placeholder(R.drawable.placeholder) // 로딩 중 보여줄 이미지
     .error(R.drawable.error_image) // 로딩 실패 시 보여줄 이미지

비디오 로드

• 비디오 파일과 썸네일을 Glide로 로드할 수도 있습니다.

Glide.with(context)
     .asBitmap() // 비디오 썸네일은 Bitmap으로 로드
     .load(Uri.fromFile(File("/path/to/video.mp4"))) // 비디오 파일 경로
     .into(imageView)

RequestOptions 활용

• RequestOptions 객체를 사용해 이미지 로드 옵션을 보다 세밀하게 설정할 수 있습니다.

val requestOptions = RequestOptions()
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error_image)
    .override(100, 100) // 이미지 크기 조정

Glide.with(context)
     .load("<https://example.com/image.jpg>")
     .apply(requestOptions) // 옵션 적용
     .into(imageView)

캐시 전략

• 메모리 캐시와 디스크 캐시를 지원하며, 이를 활용하면 이미지를 빠르게 로드할 수 있습니다.

val requestOptions = RequestOptions()
    .diskCacheStrategy(DiskCacheStrategy.ALL) // 디스크 캐시 사용
    .skipMemoryCache(true) // 메모리 캐시 사용 안 함

Glide.with(context)
     .load("<https://example.com/image.jpg>")
     .apply(requestOptions)
     .into(imageView)

• DiskCacheStrategy.ALL: 모든 버전을 디스크에 캐시합니다.
• DiskCacheStrategy.NONE: 디스크 캐시를 사용하지 않습니다.
• DiskCacheStrategy.DATA: 로드된 이미지만 디스크에 캐시합니다.
• DiskCacheStrategy.RESOURCE: 변환된 리소스를 캐시합니다.

Custom Transformation

• Glide에서 제공하는 기본 변형(원형, 자르기 등) 외에도 커스텀 트랜스포메이션을 구현하여 유동적인 뷰를 제작할 수 있습니다.

class GrayscaleTransformation : BitmapTransformation() {

    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        messageDigest.update("grayscale".toByteArray())
    }

    override fun transform(
        pool: BitmapPool, toTransform: Bitmap, outWidth: Int, outHeight: Int
    ): Bitmap {
        return toGrayscale(toTransform)
    }

    private fun toGrayscale(src: Bitmap): Bitmap {
        val width = src.width
        val height = src.height
        val bmpGrayscale = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bmpGrayscale)
        val paint = Paint()
        val colorMatrix = ColorMatrix()
        colorMatrix.setSaturation(0f)
        val filter = ColorMatrixColorFilter(colorMatrix)
        paint.colorFilter = filter
        canvas.drawBitmap(src, 0f, 0f, paint)
        return bmpGrayscale
    }
}

// 사용 예시
Glide.with(context)
     .load("<https://example.com/image.jpg>")
     .transform(GrayscaleTransformation()) // 그레이스케일 변형 적용
     .into(imageView)

Glide 장점

• 메모리 및 디스크 캐시 최적화
• 사용하기 쉬운 API
• GIF 및 애니메이션 이미지 지원
  • GIF와 같은 애니메이션 이미지도 쉽게 로드 및 재생할 수 있습니다.
• 생명주기 관리
  • Activity or Fragment와 연결되어 생명주기를 자동으로 관리하며, 메모리 누수를 방지할 수 있습니다.

Glide vs Picasso

• Picasso는 Square사에서 제공하는 이미지 로딩 라이브러리 입니다.
• Picasso는 이미지를 다운로드하고 전체 크기 이미지를 캐시에 저장합니다.
  • 동일한 이미지를 요청할 때마다 전체 크기 이미지를 반환하고 실시간으로 이미지 보기에 맞게 크기를 조정합니다.
• Glide는 이미지를 다운로드하고 View의 크기로 크기를 조정한 후 캐시에 저장합니다.
• 두 개의 다른 크기의 이미지가 필요한 경우, 동일한 이미지로 두 가지 해상도로 캐시에 저장할 수 있습니다.
• Glide는 Picasso에 비해 메모리 사용량이 적지만 로딩이 느리다는 특징이 있습니다.