유용한 이미지 라이브러리 - Glide (1)

300x250

300x250

Android app 개발 시 가장 많은 UI 를 차지하는 것이 이미지를 로딩하여 화면에 보여주는 것이다.

쉽게 생각하면 drawable resouce 나 image path 를 얻어와 bitmap 으로 ImageView 에 보여주면 그만이다.

 

하지만, 이미지 URL 을 로드해야 한다거나 아주 큰 size 의 image 여러 개를 보여줘야 한다면

하단과 같이 고려해야 할 사항이 너무 많이 생겨 버린다.

(실패처리, 디코딩, 이미지 재활용, OOM, 캐시 및 병렬 처리)

 

Glide, Picasso, Fresco 등 이런 여러 가지 고민을 해결해 놓은 유용한 이미지 라이브러리들이 많이 있다.

이번 포스팅에서는 이중에서도 Glide 에 대해 알아보자.

Glide?

Google에서 개발해서 밀고 있던 volly 이후에 2014 년에 공개된 이미지 라이브러리.

기존의 Bump 앱이 만들어 사용하던 라이브러리였는데 구글이 Bump 앱을 인수하여 라이브러리를 공개.

이미지를 빠르고 효율적으로 불러올 수 있게 도와주며 사용자가 이용하기 쉽게 만든 라이브러리.

 

https://github.com/bumptech/glide

Dependency 추가

하단과 같이 app gradle file 에 추가한다.

 

이미지 로딩

Glide 는 빌더 패턴으로 구형되어 있고, 3 개의 필수 파라미터를 요구한다.

- with() : Context

- load() : 대상 이미지 (URL, Resouce ID, File URI ......)

- into() : 이미지를 보여줄 ImageView

 

이미지 리사이징

Glide 는 기본적으로 ImageView 의 크기에 맞게 이미지가 다운로드 되고 캐싱된다.

명시적으로 이미지 크기를 변경하려면 override 함수를 사용하면 된다.

 

◼ Original

 

◼ Override

이미지 변형

Glide 로 받아온 이미지를 하단과 같은 3 가지 변형 타입으로 변환해 준다.

(커스터마이징도 가능하지만 본문에서는 3 가지의 내장된 변형 타입만 다룬다.)

 

◼ Original

◼ CenterCrop

이미지가 ImageView 의 사이즈보다 클 때, Imageview 의 크기에 맞춰 이미지 크기를 조정 후 자른다.

ImageView 가 완전히 채워지지만 전체 이미지가 표시되지 않을 수 있다.

◼ FitCenter

이미지가 ImageView 의 사이즈와 다를 때, ImageView 크기와 같거나 작도록 이미지의 크기를 조정한다.

이미지가 완전히 표시되지만 전체 ImageView 를 채우지 않을 수 있다.

◼ CircleCrop

이미지가 원으로 변경된다.

Glide hompage 에서는 FitCenter 와 동일한 방식이라고 되어 있지만 CenterCrop 과 동일한 방식으로 보인다.

(https://bumptech.github.io/glide/javadocs/400/com/bumptech/glide/load/resource/bitmap/CircleCrop.html)