[Android]Glide와 Picasso

 

이번에는 Glide와 Picasso에 대해서 한번 알아보자

이미지 로드 라이브러리

JAVA에서 네트워크에서 이미지를 가져오려면 네트워크 관련 소스를 이용하여 받아와야 한다. 

그리고 이미지 캐싱, 로드 실패시 처리, 가져온 이미지 프로세싱 등등의 많은 작업들을 이미지 로드 라이브러리로 쉽게 처리할 수 있다.

https://github.com/bumptech/glide

[Glide]

dependencies {
  ...
  compile 'com.github.bumptech.glide:glide:4.0.0-RC1'
  ...
}

Glide의 기본 사용방법은 다음과 같다.

 Glide.with(this).load(Image).into(ImageView);

Glide의 with는 Context뿐 아니라 Activity and Fragment도 인자로 사용할 수 있다.

[출처 : https://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en]

Glide는 기본 RGB_565 Bitmap 포맷을 사용한다. (Picasso는 ARGB_8888)

이것은 ARGB_8888 보다 화질은 떨어지지만 절반의 메모리 용량을 사용한다.

Glide에서 ARGB_8888 포맷은 다름과 같이 사용할 수 있다.

    Glide.with(this).load(Image)
                .apply(new RequestOptions().format(DecodeFormat.PREFER_ARGB_8888))
                .into(ImageView);

RequestOption을 통해서 여러가지 옵션들을 적용시킬 수 있다.

        //포맷 설정
        //RequestOptions으로 다양한 효과를 적용할 수 있다.
        //이미지를 로딩하는 중에 placeholder로 지정한 이미지가 출력된다.
        RequestOptions requestOptions = new RequestOptions();
        requestOptions.format(DecodeFormat.PREFER_ARGB_8888).placeholder(Image);

이미지의 포맷을 설정하고 로딩중에 보여줄 이미지를 placeholer를 통해서 지정할 수 있다.

        //Circle 모양으로 자른다.
        Glide.with(this).load(Image)
                .apply(requestOptions.fitCenter().circleCrop())
                .into(ImageView);

.fitCenter() 는 중앙에 맞추는 옵션이고

.circleCrop() 은 원 모양으로 이미지가 잘려서 나오게된다.

Glide에서는 Gif이미지를 출력할 수 있는데 먼저 raw 디렉토리를 생성해야 한다.

        //Gif 불러오기
        //TODO (1)raw 디렉토리 만들기
        //TODO (2)gif 파일 넣어두기
        Glide.with(this).load(R.raw.이미지)
                .into(ImageView);

[Glide 샘플 예제]

에러는 Internet 권한 설정을 주지 않는것으로 구현했다.

간단하게 Glide를 사용하는 방법에 대해서 알아보았다.

Glide 라이브러리 참조

[http://dktfrmaster.blogspot.kr/2016/09/glide.html]

다음으로 Picasso는

https://github.com/square/picasso

[Picasso]

 
dependencies {
    ...
    compile 'com.squareup.picasso:picasso:2.5.2'
    ...
}
 

Picasso도 Glide와 사용방법이 유사하다.

        Picasso.with(this).load(Image).into(ImageView);

 
        Picasso.with(this).load(Image)
                .rotate(50)
                .into(ImageView);
 
        Picasso.with(this).load("이미지 링크")
                .placeholder(Image)
                .error(Image)
                .into(ImageView);
 
        Picasso.with(this).load(Image).into(ImageView);
 
        Picasso.with(this).load(Image).resize(300,100).into(ImageView);
 
 

.placeholder 와 .error 은 Glide와 동일하고

.rotate 와 .resize 는 이름 그대로 동작한다.

Picasso 라이브러리 참조

[http://dwfox.tistory.com/33]

디스크 캐싱

동일한 이미지를 Picasso와 Glide를 이용해 ImageView에 로드할 때 

Picasso가 풀 사이즈 (1920x1080 픽셀)를 캐시하는 동안 Glide는 ImageView 크기 (768x432 픽셀)를 캐싱한다.

[출처 : https://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en]

 Glide.with(this)
             .load(Image)
             .diskCacheStrategy(DiskCacheStrategy.ALL)
             .into(ImageView);
 

Glide에서 .diskCacheStrategy 를 사용함으로써 전체 이미지 크기를 캐싱할 수 있다.