[Android] 안드로이드 UI 어디까지 아는데 ? - (3) 이미지 로더 Glide의 원리 : with, load, into를 중심으로
[Android] 안드로이드 UI 어디까지 아는데 ? - (2) 이미지 형식 : bitmap, vector, SVG, PNG의 시리즈 글로, dp와 dpi에 대한 개념을 모른다면 위 글을 읽고 오면 더 이해가 쉽다. 이미지를 이루는 단위에 대
sxunea.tistory.com
저번글에서 이미지로더의 내부 동작 방식에 대해 알아보았다면, 이어서 glide에서 제공하는 다양한 옵션들에 대해 정리하고 넘어가자. Glide는 이미지 로딩 과정에서 다양한 옵션 설정을 통해 이미지의 변형, 캐시, 크기 조절 등을 가능하게 한다. 이를 RequestOptions 클레스를 사용해 설정할 수 있다.
Placeholders
Glide v4 : Placeholders
Types Glide allows users to specify three different placeholders that are used under different circumstances: Placeholder Placeholders are Drawables that are shown while a request is in progress. When a request completes successfully, the placeholder is re
bumptech.github.io
glide는 세 가지 placeholder를 지정할 수 있다. 이때, 이 placeholder는 비동기적으로 로드되지 않는다. 메인 스레드에서 로드된다.
Glide.with(context)
.load(url)
.placeholder(R.drawable.placeholder)
.fallback(R.drawable.fallback)
.error(R.drawable.error)
.into(ivImageView);
placeholder
placeholder는 이미지 요청이 진행되는 동안 표시되는 이미지이다. 요청이 성공적이면 placeholder가 요청된 리소스로 바뀐다. 요청이 실패하고, Error Drawable이 설정되지 않은 경우 placeholder는 계속 표시된다. 마찬가지로 요청된 URL 또는 모델이 null이고 Error Drawable 또는 Fallback Drawable 이 설정되지 않은 경우 placeholder도 계속 표시된다.
error
요청이 영구적으로 실패하면 Error Drawable이 표시된다. 요청된 URL이 null이고 Fallback Drawable이 설정되지 않은 경우에도 표시된다.
fallback
Fallback Drawable은 요청된 URL 또는 모델이 null인 경우 표시된다. Fallback Drawables의 주요 목적은 사용자가 null이 예상되 는지 여부를 표시 할 수 있도록 하는 것이다.
TransitionOptions
Glide v4 : Options
RequestBuilder options Most options in Glide can be applied directly on the RequestBuilder object returned by Glide.with() Available options include (among others): Placeholders Transformations Caching Strategies Component specific options, like encode qua
bumptech.github.io
transitionOptions는 요청된 리소스의 로딩이 완료되었을 때의 효과를 지정한다. 대표적으로 fade효과를 가능하게 한다. 예를 들어, 스와이프를 통해 이미지를 연속적으로 보여주는 경우 전환효과를 통해 끊기는 느낌을 줄이고 부드러운 사용감을 줄 수 있다.
Glide.with(context)
.load(url)
.transition(DrawableTransitionOptions.withCrossFade())
.into(ivImageView)
withCrossFade(500)과 같이 ms단위의 duration 옵션을 따로 지정할 수도 있다. 또, Custom CrossFadeFactory를 통해 효과를 더욱 세세하게 지정하여 적용할 수도 있다.
Size Override
glide는 이미지의 크기를 명시적으로 조정하는 것도 가능하게 한다. override(width, height) 메소드를 통해 사이즈를 지정할 수 있다.
Glide.with(context)
.load(url)
.override(300, 300)
.into(ivImage)
Transformation
Glide v4 : Transformations
About Transformations in Glide take a resource, mutate it, and return the mutated resource. Typically transformations are used to crop, or apply filters to Bitmaps, but they can also be used to transform animated GIFs, or even custom resource types. Built
bumptech.github.io
glide는 다양한 이미지 변환 또한 제공한다. 예를 들어, centerCrop(), fitCenter(), circleCrop() 같은 변환 옵션이 제공되며, 이러한 여러 변환을 체이닝할 수 있다.
Glide에 내장된 변형 타입 Glide에는 몇가지 내장된 변형 타입들이 있고, RequestOptions 클래스를 사용해 변형시킨다.
CenterCrop
이미지를 중앙을 기준으로 잘라내서 ImageView에 꽉 채운다.
FitCenter
이미지를 가로 세로 비율에 맞춰 축소하여 ImageView에 맞춰준다.
CircleCrop
이미지를 원형으로 잘라 ImageView에 넣어준다.
이외에도 Blur Transformation, GrayScale Transformation, Custom Transformation이 가능하다. 이 중 Custom Transformation은 이후 비트맵만 따로 다루는 글을 작성할 예정이라 그 때 같이 다뤄보도록 하자.
이러한 RequestOptions는 재활용이 가능하므로 다양한 요청에서 반복해 활용하고 싶다면 RequestOptions 인스턴스르를 만들고, glide 호출부에서 .apply()를 통해 불러서 재활용해 사용할 수 있다. 이때 만약 RequestOptions 간의 충돌이 있을 경우 마지막에 호출된 옵션이 적용 되게 된다.