Glide란 무엇인가??
- 구글에서 공개한 이미지 라이브러리
- 기존의 Bump앱이 만들어 사용하던 라이브러리였는데 구글이 Bump앱을 인수하여 라이브러리를 공개
- 웹 상의 이미지를 로드하여 보려주기 위해 고려해야 할 사항들을 미리 구현하여, 사용자가 이용하기 쉽게 만든 라이브러리
Glide 추가하기
Dependency 추가
- build.gradle의 dependencies에 다음을 추가한다.
compile 'com.github.bumptech.glide:glide:3.7.0'
- 혹시 maven을 이용한다면 다음을 추가한다.
<dependency>
<groupId>com.github.bumptech.glide</groupId>
<artifactId>glide</artifactId>
<version>3.7.0</version>
<type>aar</type>
</dependency>
기본 이미지 로딩
- Glide 클래스는 빌더 패턴으로 구현되어 있고, 3개의 필수 파라미터를 요구한다.
- with(Context context) : 안드로이드의 많은 API를 이용하기 위해 필요
- load(String imageUrl) : 웹 상에서의 이미지 경로
URL or 안드로이드 리소스 ID or 로컬 파일 or URI - into(ImageView targetImageView) : 다운로드 받은 이미지를 보여줄 이미지 뷰
ImageView target = (ImageView) findViewById(R.id.imageview);
String url = "http://www.example.com/icon.png";
Glide.with(context)
.load(url)
.into(target);
int resourceId = R.mipmap.ic_launcher;
Glide.with(context)
.load(resourceId)
.into(target);
File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "Example.jpg");
Glide.with(context)
.load(file)
.into(target);
Uri uri = Uri.parse("android.resource://com.example.test/resource");
Glide.with(context)
.load(uri)
.into(target);
- 만일 해당 경로에 이미지가 없다면, Glide는 error 콜백을 리턴할 것이다.
PlaceHolder 이미지
PlaceHolder
- PlaceHolder : 원본이미지를 보여주기 전에 잠깐 보여주는 이미지
- 네트워크 로드 등, 이미지 로드에 시간이 오래 걸릴 때 빈화면 대신 PlaceHolder 이미지를 보여준다.
- Glide는 PlaceHolder 이미지를 리소스 영역에서 불러온다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.placeholder(R.mipmap.ic_launcher)
.into(target);
Error PlaceHolder
- 이미지 로드에 실패했을 때 등, 예상하지 못한 상황으로 원본이미지를 로드할 수 없을 때 보여주는 이미지이다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.placeholder(R.mipmap.ic_launcher)
.erro(R.mipmap.ic_error)
.into(target);
Animation
- 원본 이미지가 다 로드되고 나면 PlaceHolder 이미지가 원본 이미지로 교체되는데, 이 때 애니메이션 처리를 할 수 있다.
3.7.0 현재 버전을 기준으로, 이미지 교체 애니메이션은 기본 동작한다.- 애니메이션을 수동으로 On / Off 하려면
.crossFade() / dontAnimate 를 호출한다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.placeholder(R.mipmap.ic_launcher)
.erro(R.mipmap.ic_error)
.crossFade()
.into(target);
Glide.with(context)
.load("http://www.example.com/icon.png")
.placeholder(R.mipmap.ic_launcher)
.erro(R.mipmap.ic_error)
.dontAnimate()
.into(target);
이미지 리사이징
리사이징
- Glide는 기본적으로 이미지뷰의 사이즈에 맞게 이미지가 다운로드되고 캐싱된다.
- 명시적으로 이미지 사이즈를 변경하려면
override(x,y) 메서드를 호출한다. - 타켓 이미지뷰가 없을때, 미리 이미지를 특정 사이즈로 로드하는 용도로 사용된다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.override(600,200)
.into(target);
스케일링
- Glide는 실제 이미지의 사이즈와 화면에 보이는 크기가 다를 때, 스케일링할 수 있는 옵션을 제공한다.
CenterCrop
- 실제 이미지가 이미지뷰의 사이즈보다 클 때, 이미지뷰의 크기에 맞춰 이미지 중간부분을 잘라서 스케일링한다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.override(600,200)
.centerCrop()
.into(target);
fitCenter
- 실제 이미지가 이미지뷰의 사이즈와 다를 때, 이미지와 이미지뷰의 중간을 맞춰서 이미지 크기를 스케일링한다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.override(600,200)
.fitCenter()
.into(target);
이미지 캐싱
캐싱 기본정책
- Glide는 기본적으로 메모리 & 디스크에 이미지를 캐싱하여 불필요한 네트워크 연결을 줄인다.
메모리 캐시
- 기본적으로 메모리 캐싱을 하기때문에, 메모리 캐싱을 위해 추가적으로 할 일은 없다.
- 메모리 캐싱을 끄려면
skipMemoryCache(true)를 호출한다. - 처음 메모리 캐싱을 한 후에, skipMemoryCache(true)로 캐싱을 중지하더라도, 그 전에 저장된 캐시는 그대로 남아있다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.skipMemoryCache(true)
.into(target);
디스크 캐시
- 기본적인 개념은 메모리 캐시와 같다. Glide는 기본적으로 디스크 캐싱을 수행한다.
- 디스크 캐싱을 끄려면
diskCacheStrategy(DiskCacheStrategy.NONE) 메서드를 호출한다. - diskCacheStrategy 메서드는 DiskCacheStrategy enum을 인수로 받는다.
- DiskCacheStrategy.NONE : 디스크 캐싱을 하지 않는다.
- DiskCacheStrategy.SOURCE : 원본 이미지만 캐싱
- DiskCacheStrategy.RESULT : 변형된 이미지만 캐싱
- DiskCacheStrategy.ALL : 모든 이미지를 캐싱(
기본)
- 메모리 캐싱과는 별개이므로, 둘다 사용하지 않을 경우 다음과 같이 둘다 꺼주어야 한다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.skipMemoryCache(true)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.into(target);
이미지 로드 우선순위
Priority
- Glide 라이브러리는 동시에 이미지 로드 명령을 받았을 때, 지정한 우선순위에 따라 이미지를 로드하도록 지원한다.
priority()메서드에 Priority열거형 타입을 인수로 지정하여 우선순위를 변경한다.- Priority.LOW
- Priority.NORMAL
- Priority.HIGH
- Priority.IMMEDIATE
- Glide 라이브러리는 이 우선순위대로 이미지 로드를 수행하지만, 반드시 우선순위 순서대로 진행된다는 보장은 없다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.priority(Priority.HIGH)
.into(target);
썸네일
원본 썸네일
- 원본 이미지를 썸네일로 사용한다.
thumbnail()메서드를 이용한다. 이 때, 크기의 배수값을 줌으로써 썸네일의 크기를 지정할 수 있다.
Glide.with(context)
.load("http://www.example.com/icon.png")
.thumbnail(0.1f)
.into(target);
- 원본 이미지를 사용하는 방법이기 때문에 원본이미지를 변경하면 썸네일에도 변경이 적용된다.
별도 썸네일
- 위의 방법과는 다르게, 원본과 썸네일 이미지를
각각 로드하는 방법이다. - 이때도
thumbnail()메서드를 이용한다. 대신 썸네일을 위한 새로운 Request를 생성하여 인자로 주어야 한다.
DrawableRequestBuilder<String> thumbnailRequest = Glide
.with(context)
.load("http://www.example.com/thumbnail.png");
Glide.with(context)
.load("http://www.example.com/icon.png")
.thumbnail(thumbnailRequest)
.into(target);
- 원본 이미지와는 별개의 리소스이므로 원본 이미지를 변경해도 썸네일은 변화가 없다.
Target
- Glide는 기본적으로 이미지를 비동기로 로드하여 이미지뷰에 보여준다.
- 하지만, Target을 이용하면 이미지뷰에 보여주는 동작이 아닌 Bitmap 자체를 얻어오는 등, 여러 동작을 수행할 수 있다.
- Glide 입장에서는 일종의 콜백이라고 볼 수 있다.
- Target을 구현하는 방법은
BaseTarget 추상클래스를 상속받거나, SimpleTarget을 이용한다.
SimpleTarget
SimpleTarget은 BaseTarget 클래스를 상속받은 클래스로 기본 동작이 구현되어 있고, onResourceReady메서드만 추가로 구현하면 된다.- 리소스 로드가 완료되면
onResourceReady 메서드가 호출되므로, 이 메서드 내부에서 수행할 동작을 구성하면 된다.
private SimpleTarget target = new SimpleTarget<Bitmap>() {
@Override
public void onRersourceReady(Bitmap bitmap, GlideAnimation glideAnimation) {
}
}
Glide.with(context)
.load("http://www.example.com/icon.png")
.asBitmap()
.into(target);
Target을 구현할 때 고려사항
- Target 으로 쓸 인스턴스가 가비지컬렉션의 대상이 되지 않도록 주의해야 한다. Target 인스턴스가 가비지컬렉션 되면 콜백을 받을 수 없다.
- 엑티비티의 생명주기와는 무관한 Target일 경우, 항상
Application Context를 이용한다.
특정 크기를 지닌 Target
- Glide는
.into()에 이미지뷰를 넘기면, 이미지뷰의 크기를 고려하여, 그 크기에 맞게 이미지를 로드한다. - 이와 유사하게, Target을 생성할 때, 로드될 이미지의 크기를 지정하면, Glide는 이미지를 로드할 때, 그 크기를 참조하여 이미지를 해당 크기에 맞게 로드한다.
private SimpleTarget target = new SimpleTarget<Bitmap>(250, 250) {
@Override
public void onRersourceReady(Bitmap bitmap, GlideAnimation glideAnimation) {
}
}
Glide.with(context)
.load("http://www.example.com/icon.png")
.asBitmap()
.into(target);
RequestListener
- Glide에서 Callback 리스너를 제공한다. 리스너는 다음의 2가지 콜백을 받는다.
- onException : 이미지 로드 중, 예외가 생겼을 때
- onResourceReady : 이미지 로드가 완료됬을 때
- 각 콜백 메서드는 boolean 타입 반환인자를 가지고 있다.
true일 경우, 각 콜백을 핸들링 했다는 의미이므로, Glide가 기본 후처리를 하지 않는다. 반면에, false일 경우, Glide가 기본 후처리를 진행한다.
private RequestListener<String, GlideDrawable> requestListener = new RequestListener<String, GlideDrawable>() {
@Override
public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
return false;
}
@Override
public boolean onResourceReady(GlideDrawable resouorce, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
return false;
}
}
Glide.with(context)
.load("http://www.example.com/icon.png")
.listener(requestListener)
.into(target);
애니메이션
- Glide는 이미지 전환시에 애니메이션을 지정할 수 있다.
- 기본으로 제공하는 애니메이션으로는
crossFade 애니메이션이 있다. - 그 외에,
animate 메서드를 이용해 커스텀 애니메이션을 지정할 수 있다.
xml로 애니메이션 주기
- xml로 원하는 애니메이션을 정의한다.
- 정의한 애니메이션 리소스를
animate 메서드의 인자로 넘겨준다.
// 애니메이션 리소스 준비 (anim.xml 이라 가정)
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-5%p" android:toXDelta="0" android duration="500" />
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" />
</set>
Glide.with(context)
.load("http://www.example.com/icon.png")
.animate(R.anim.anim)
.into(target);
커스텀 클래스를 이용한 애니메이션
ViewPropertyAnimation.Animator인터페이스를 구현한 커스텀 클래스를 만든다.- 만든 클래스의 인스턴스를
animate 메서드의 인자로 넘겨준다.
ViewPropertyAnimation.Animator animationObject = new ViewPropertyAnimation.Animator() {
@Override
public void animate(View view) {
view.setAlpha( 0f );
ObjectAnimator fadeAnim = ObjectAnimator.ofFloat( view, "alpha", 0f, 1f );
fadeAnim.setDuration( 2500 );
fadeAnim.start();
}
};
Glide.with(context)
.load("http://www.example.com/icon.png")
.animate(animationObject)
.into(target);
참고 사이트
