Android 에서 원형, 사각형 이미지 로딩할 때는 Glide

네트워크로 이미지 받아올 때, 어떻게 하세요?

저는 구글이 인수한 BumpTech의 Glide를

쓰는데요. 사용하기도 매우 편리하구요.

속도도 상대적으로 여타 이미지라이브러리보다 빠르다고 합니다.

오늘은 이 Glide를 정리해 보겠습니다.

1. 라이브러리 설정

항상 시작은 라이브러리 디펜던시 설정부터죠.

glide검색해서 bumptech에서 만든 글라이드 선택해주고 가겠습니다~.

혹은 직접 build.gradle에 compile 'com.github.bumptech.glide:glide:3.7.0'을 직접 넣어주셔도 됩니다~.

2. 먼저 xml부터 준비하기

Java파일에서 Glide로딩해서 쓰기전에,

xml로 레이아웃부터 준비해놓고 갈께요.

상단에 버튼이 있고, 그 밑에 이미지가 로딩되서 보이도록 하겠습니다.

3. Java파일에서 이미지로드

버튼 클릭하면 Glide가 이미지를 로딩하는 코드이구요.

Glide사용법은 너무나도 간단합니다.

>> Glide.with(Context).load(url).into(imageView)

요 한줄이면 이미지 로딩되는데요.

with에 컨텍스트, load에 URL, into에 로딩할 이미지뷰를 넣어주면 됩니다.

나머지는 부가적인데,

centerCrop()은 말 그대로 이미지가 center로 와서 크롭되도록 하는 것이구요.

crossFade()는 이미지가 로딩될 때 페이드효과가 나도록 하는 것입니다.

Glide가 업데이트 되면서 사용방법이 조금 바뀌었습니다.

.apply(new RequestOptions().centerCrop())

.transition(new DrawableTransitionOptions().crossFade())

이와같이 추가해야 centerCrop이나 crossFade옵션을 사용할 수 있습니다.

업데이트 합니다.

기존Glide에서는 위의 이미지와 같이 사용하였으나, 

버전업된 Gilde에서는 아래와 같이 사용해야 합니다.

4-1. Circle형 이미지로 출력위한 준비사항

카카오톡 같은 데 보시면, 이미지 프로필이 둥그렇게 되어있습니다.

요거 어떻게 해야할까요? 유아이작업하다보면 많이들 필요한데 말이지요.

이것도, 라이브러리의 도움을 받으면 되는데요.

Glide-transformations라는 라이브러리 입니다.

https://github.com/wasabeef/glide-transformations

이것도 먼저 라이브러리 설정먼저 하고 가겠습니다.

wasabeef라고 검색해서 나오는 것중 glide-transformations를 선택하시면 됩니다.

그런데 , 이번에는 build.gradle에서 compile 'jp.wasabeef:glide-transformations:2.0.1' 을 직접 넣어주시는 게 좋습니다.

더 최신버전을 사용할 수 있기때문인데요. 몇몇 라이브러리는 이런경우가 있더라구요.

dependecies검색에서는 아직 1.0.6이군요.

4-2. Java파일 수정

원래썻던 코드에

.bitmapTransform(new CropCircleTransformation(Context))

이렇게만 추가해주시면 원형형태로 이미지가 로딩됩니다.

추가적으로 제가 쓴 override라는 것은 

리소스의 이미지를 강제적으로 작게 줄여서 보여주려고 할때 사용합니다.

이렇게 하면 아래와 같은 결과물을 볼 수 있습니다. 

여러가지 장점이 있는 Glide지만, 한가지 단점이 있습니다.

아직은 vector로 된 resource를 로딩할 수 없다는 점 인데요.

이 점은 추후에 개선되면 좋겠네요.

개선되는데로 블로그 글을 업데이트 하도록 하겠습니다.