[Android] Glide 라이브러리 gif파일 로드

오늘은 ImageView에 url로 이루어진 데이터를 바인드하기 위해서 자주 사용하는 Glide라이브러리에 대한 내용입니다.

gif파일을 로드하는 방법에 대한 자료는 많지만 여러가지 이미지로 이루어진 gif의 애니메이션 효과를 컨트롤할 수 있는 자료가 많이 없는 것 같습니다..ㅜㅜ

 

우선 저는 gif파일의 모든 이미지를 한번씩 로드하고(움짤처럼 재생됩니다.) 해당 이미지뷰를 사라지게 하는 기능이 필요하여 구현하게 되었습니다.

implementation 'com.github.bumptech.glide:glide:4.9.0'

우선 build.gradle에 추가해야하는 glide 버전입니다. 저와 버전이 다르다면 DrawableImageViewTarget 또는 Animatable2Compat, GifDrawable, GifDrawable.registerAnimationCallback과 같은 클래스, 메소드가 존재하지 않을지도 모릅니다..

 

메소드를 살펴보겠습니다.

fun startAnimation(actionImage:ImageView){
        if(animationMode == 0){
            actionImage.visibility = View.VISIBLE
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                actionImage.translationZ = (10).toFloat()
            }
            val listener= object:RequestListener<GifDrawable>{
                override fun onLoadFailed(
                    e: GlideException?,
                    model: Any?,
                    target: Target<GifDrawable>,
                    isFirstResource: Boolean
                ): Boolean {
                    return false
                }

                override fun onResourceReady(
                    resource: GifDrawable,
                    model: Any?,
                    target: Target<GifDrawable>?,
                    dataSource: DataSource?,
                    isFirstResource: Boolean
                ): Boolean {
                    resource.setLoopCount(1)
                    val callback = object : Animatable2Compat.AnimationCallback(){
                        override fun onAnimationEnd(drawable: Drawable?) {
                            Glide.with(context).clear(actionImage)
                            actionImage.visibility = View.GONE
                            super.onAnimationEnd(drawable)
                        }

                    }
                    resource.registerAnimationCallback(callback)
                    return false
                }
            }
            val requestOptions = RequestOptions()
            requestOptions.diskCacheStrategy(DiskCacheStrategy.NONE)
            requestOptions.skipMemoryCache(false)
            requestOptions.signature(ObjectKey(System.currentTimeMillis()))
            Glide.with(context).asGif().listener(listener).load(skin.url).apply(
                requestOptions).into(actionImage)

        }
        //animationMode else
}

첫번째로 이미지가 들어갈 actionImage가 있습니다. animationMode는 gif이미지가 아닐 경우에 대한 처리이므로 무시하셔도 무방합니다.
우선 저는 움짤이 한번 재생되고 actionImage를 GONE시킬 것이기 때문에 visibility를 VISIBLE로 설정합니다. constraint layout으로 선언되어 view가 겹치기 때문에 translationZ를 설정해주고(bringTofront가 안되는 관계로.... 이유를 알고계시다면 알려주시면 감사드리겠습니다..) Glide에 적용할 listener를 정의합니다.

Gif이미지를 처리할 것이므로 RequestListener의 제너릭 타입을 GifDrawable로 설정하고 필요한 메소드를 implement합니다. 로드가 실패할 경우 호출되는 onLoadFailed는 따로 정의하지 않았고 오늘 중요한 메소드는 onResourceReady입니다.

Gif이미지를 1번 반복할 것이기 때문에 loopcount를 1로 적용하고 animation이 끝날 때 적용할 callback listener를 다시 한 번 등록합니다. 사실상 Glide라이브러리에 listener를 2개 커스텀 하는 것이지요..(depth가 무려 2!!) 아무튼 animation은 1번 반복하기로 약속했기 때문에 1번 반복이 끝날 경우 호출되는 onAnimationEnd메소드를 재정의합니다. 저의 경우는 이미지를 clear하고 GONE 시키도록 하였습니다. 그런 뒤에 registerAnimationCallback으로 설정해 줍니다.(그냥 setCallback이 존재하는데 해당 메소드를 사용하시면 이미지가 난리가 납니다..꼭 animationCallback을..!!) 설정이 끝나셨다면 Glide라이브러리를 통하여 적용할 url에서 gif이미지를 가져오시면 됩니다~~!

 

오늘의 글이 도움이 되셨다면 공감 버튼 눌러주시면 감사하겠습니다.

 

아래는 제가 참고했던 블로그 주소입니다.

https://heenustroy.tistory.com/178

[안드로이드] gif 종료 시점 찾고 그때 특정 작업 처리하기