Published using Google Docs
Glide 활용하기 코드랩
Updated automatically every 5 minutes

Glide 활용하기 - GDGDevFair 2014

29th Nov 2014, 양찬석

문서 링크: bit.ly/1ynEtSr

glide_logo.png

Introduction

Glide 는 Bump! 앱을 만든 Bumptech 가 구글에 인수되면서 Bump 앱에서 사용하던 이미지 로딩 라이블리를 공개하며 시작된 오픈 소스 프로젝트입니다. Glide 는 빠르고 효율적인 안드로이드 미디어 관리 프레임워크를 제공하며, 미디어 디코딩, 메모리/디스크 캐쉬, 리소스 폴링등의 기능을 단순하고 쉬운 API 를 통해 활용할 수 있습니다. Glide 는 Method Chaining 형태로 사용할 수 있도록 설계 되었습니다. Glide 의 관한 보다 자세한 내용은 GDG Korea 의 전병권님이 GDG Korea Android Conference 에서 발표한 내용을 참고해보시기 바랍니다.

이번 코드 랩에서는 간단한 샘플 어플리케이션을 기반으로 Glide 의 다양한 기능을 확인해 봅니다.

Step 1 - Setup

Step 2 - 이미지 뷰에 적용하기

Step 3 - PlaceHolder  적용하기

Step 4 -  에러 처리

Step 5 - 애니메이션 효과 적용하기

Step 6 - Transformation 을 통한 이미지 후처리

Step 7 - Custom Target 을 이용하여 이미지 다운로드 하기

Step 8 - Glide 설정 변경하기

Final

Codelab Steps

Step 1 - Setup

본 코드랩을 진행하기 위해서는 다음과 같은 준비가 필요합니다.

다음 명령을 통해 코드랩에서 사용될 샘플 프로젝트를 다운로드 받습니다. (네트워크 커넥션이 필요합니다.)

마지막으로, Glide 를 사용하기 위해서는 build.gradle 파일에 다음과 같이 Glide 라이브러리 의존성을 추가합니다. 이 후 안드로이드 스튜디오의 Tools > Android > Sync Project with Gradle Files  메뉴를 선택하여 안드로이드 스튜디오가 필요한 라이브러리를 설치할 수 있도록 합니다. (네트워크 커넥션이 필요합니다.)

in build.gradle

dependencies {

  compile fileTree(dir: 'libs', include: ['*.jar'])

  compile 'com.android.support:appcompat-v7:21.0.0'

  compile 'com.github.bumptech.glide:glide:3.4.0'

}

빌드가 성공적으로 수행되면, 이제 코드랩을 진행할 수 있습니다.

Step 2 - 이미지 뷰에 적용하기

샘플 프로젝트에는 하나의 ListView 와 ListAdapter 가 포함되어 있습니다. ImageLoaderAdapter 의  getView 메서드 내부에서 Glide 를 이용하여 이미지가 적절히 로드될 수 있도록 구현 합니다. Glide 프로젝트 페이지 및 Glide Wiki 페이지를 참고하시기 바랍니다.

in ImageLoaderAdapter.java

    @Override

    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {

            convertView = mInflater.inflate(mResource, parent, false);

        }

        ImageView imageView = ViewHolder.get(convertView, R.id.image);

        String url = getItem(position);

        // TODO step2 - using glide, downlad and set an image from url string.

    }

Step 3 - PlaceHolder  적용하기

Glide 에서는 이미지가 로딩되기 전에 사용될 PlaceHolder 를 손쉽게 적용할 수 있도록 placeHolder 메서드가 지원됩니다. Step 2 에서 작업한 결과를 바탕으로, 이 메서드를 이용하여, 특정 색상 혹은 미리 준비된 loading.png 파일을 placeHolder 로 적용해 보세요. 또한,  thumbnail 메서드를 활용해 전체 이미지가 로드 되기 전에 우선 썸네일 이미지를 먼저 로드하여 View 에 표시하고 이후 원본 이미지가 다 로드되었을 때 전체 이미지를 표시하도록 구현할 수도 있습니다.

Step 4 -  에러 처리

이미 알고 계실 수 있겠지만 ListAdapter 에 추가된 첫 번째 URL 은 올바른 URL 이 아닙니다. Step 3 에서 작업한 결과를 바탕으로, Glide 에서 지원하는 error 메서드를 활용하여, 이미지 로드에 실패한 경우 미리 준비된  error.png 이미지가 대신 표시되도록 구현해보시기 바랍니다..

device-2014-11-29-020811.png

Step 5 - 애니메이션 효과 적용하기

  1. 이미지 로딩이 완료된 후, 바로 이미지를 표시하는 대신 다양한 애니매이션 효과를 적용할 수 있습니다. Glide 에서는 손쉽게 CrossFade 애니메이션을 지원할 수 있도록 crossFade 메서드를 지원하고 있습니다. 해당 메서드를 이용하여 이미지가 부드러운 전환 효과와 함께 화면상에 표시될 수 있도록 구현해보시기 바랍니다.
  2. Glide 는 이용해 ViewAnimator 형태의 사용자 정의 애니메이션 효과를 추가할 수 도 있습니다. 아래의 코드와 Glide 의 animate 메서드를 활용하여 이미지가 로드되는 경우 한 바퀴 회전하면 화면에 표시되도록 구현해보시기 바랍니다.

import com.bumptech.glide.request.animation.ViewPropertyAnimation;

...

       

 ViewPropertyAnimation.Animator animator = new ViewPropertyAnimation.Animator() {

            @Override

            public void animate(View view) {

                ViewPropertyAnimatorUtil.startAwesomeAnimation(view);

            }

        };

Step 6 - Transformation 을 통한 이미지 후 처리

  1. 현재 샘플 프로젝트는 화면에 로드되는 이미지가 View 를 꽉 채우지 않고 좌우로 여백이 남는 경우가 많이 있습니다. Glide 에서 제공하는 centerCrop() 메서드를 이용하여, 이미지가 View 를 가득 채우도록 구현해보세요.
  2. 이 외에도 Glide 의 Custom Transformation 을 통해, 여러분이 원하는 이미지의 특정 영역만을 Crop 하도록 구현할 수 있습니다. 이미지의 (0,0) 위치에서 View 크기만큼 이미지를 크롭하는 아래의 Custom Transformation 코드를 참고해서 이미지 로드할 때 Custom Transformation 을 적용해보시기 바랍니다.

public class MyTransformations extends BitmapTransformation{

    public MyTransformations(Context context) {

        super(context);

    }

    @Override

    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {

        Bitmap myBitmap = Bitmap.createBitmap(toTransform, 0, 0, outWidth, outHeight);

        return myBitmap;

    }

    @Override

    public String getId() {

        return "com.the42apps.imageloaders.view";

    }

}

  1. Custom Transformation 을 통해 이미지를 Crop 하는 것 뿐만 아니라 이미지의 색조를 변경하거나 이미지를 왜곡하는 등의 후 처리 작업을 수행할 수도 있습니다. 샘플 프로젝트에 포함되어 있는 MyBlueTransformations 클래스를 활용해 View 에 표시되는 이미지의 색조를 푸른색으로 조정해보시기 바랍니다.

device-2014-11-29-022414.png

Step 7 - Custom Target 을 이용하여 이미지 다운로드 하기

View 가 아닌 다른 목적을 위해 이미지를 사용하기 위한 경우에도 Glide 를 이용하여 이미지를 다운로드 할 수 있습니다. 아래 코드를 참고하여, 샘플 어플리케이션의 메뉴 중 ‘다운로드' 메뉴를 선택하면, 특정 Url 의 이미지를 파일로 저장하는 Simple Target 을 구현해 적용해보시기 바랍니다. MainFragment.java  의 downloadImage 메서드를 구현하시면 됩니다.

Glide.with(yourApplicationContext))
   .load(youUrl)
   .asBitmap()
   .into(new SimpleTarget<Bitmap>(800, 600) {
       @Override
       public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
           // Do something with bitmap here.
       }
   };

Step 8 - Glide 설정 변경하기

  1. 네트워크 스택을 OkHttp 나 Volley 로 변경할 수 있습니다.
  2. GlideBuilder 를 이용하여 DiskCache, MemoryCache 의 속성을 변경할 수 있습니다.
  3. 커스텀한 ModelLoader 를 구현하여, 캐쉬 정책을 변경할 수 있습니다.

Final

수고하셨습니다! 지금 까지 Glide 의 기본적인 활용 방법을 살펴 보았습니다. 완전한 샘플 프로젝트는 다음 명령어로 다운 받으실 수 있습니다.