[Android] 이미지 처리를 위한 Glide 라이브러리 사용법

이미지 처리를 위한 Glide 라이브러리 사용법

 

Glide란?

Glide, 글라이드는 안드로이드에서 이미지를 빠르고 효율적으로 불러올 수 있게 도와주는 라이브러리이다. 사용방법도 간단하고, 확장성도 넓어서 이미 메이저하게 사용되고 있는 라이브러리이다. 이미지, GIf, 비디오 스틸의 로디오가 디코딩, 캐싱 등의 다양한 API를 사용할 수 있다. 기본적으로는 커스텀하게 만들어진 HttpUrlConnection 기반이지만, Volley나 OkHttp라이브러리를 사용할 수 있는 플러그인도 지원한다.

 

  Glide는 어떠한 종류의 이미지이더라도 빠르고 부드럽게 스크롤 하는 것을 목적으로 한다. 공식페이지의 설명을 참고해보자.

공식페이지: https://bumptech.github.io/glide/

공식깃허브: https://github.com/bumptech/glide

---

Glide 사용하기

1.  dependency 추가하기

[Gradle Scripts] - 두번째 [build.gradle(Module: 실행하고 있는 프로젝트 이름) - [dependency]

 

implementation 'com.github.bumptech.glide:glide:4.13.2'
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.2'

 

또한 외부 통신을 통해 이미지를 가져와야 한다면, 인터넷 권한을 매니페스트 파일에 추가해준다.

[app]-[manifest]-[AndroidManifest.xml]

 

<uses-permission android:name="android.permission.INTERNET" />

 

2. 뷰에 이미지 로드하기

 

특별한 옵션 없이 단순히 뷰에 이미지를 넣는 것이라면 with(), load(),into()로도 표현할 수 있다.

 

- Activity에서 사용할 경우

 

Glide.with(this) 
.load(이미지 경로) 
.into(imageView)

 

- ViewHolder에서 사용할 경우

 

Glide.with(itemView) 
.load(이미지 경로) 
.into(itemView.imageView)

 

일반적인 경우에는 context로 this(activity)를 사용하지만,ViewHolder에서 사용할 경우 itemView를 사용한다.

RecyclerView에서 사용하려면 ViewHolder에서 바인드할 때 같은 방식으로 사용하면 된다.

 

 

각 함수의 기능을 간단히 살펴보면: 

• with() : View, Fragment 혹은 Activity로부터 Context를 가져온다.
• load() : 이미지를 로드한다. 다양한 방법으로 이미지를 불러올 수 있다. (Bitmap, Drawable, String, Uri, File, ResourId(Int), ByteArray)
• into() : 이미지를 보여줄 View를 지정한다.

  위의 함수들은 Glide의 뼈대가 되는 기능이다. Glide는 단순히 로딩만 도와주는 것이 아니라, 에러 상황이 발생한다던가 후가공이 필요할 때에 손쉽게 처리할 수 있도록 함수를 제공한다.

 

• placeholder() : Glide 로 이미지 로딩을 시작하기 전에 보여줄 이미지를 설정한다.
• error() : 리소스를 불러오다가 에러가 발생했을 때 보여줄 이미지를 설정한다.
• fallback() : load할 url이 null인 경우 등 비어있을 때 보여줄 이미지를 설정한다.

Glide의 모토가 빠르고 부드러운 스크롤을 제공하는 것이라고 한 것을 기억한다면, 위 함수가 이해가 될 것이다. 하얀 화면을 보여주는 것보다 placeholder나 no image 파일을 보여준다면 사용자 입장에서 더 좋은 UX를 경험할 수 있을 것이다.

 

코드 예:

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.model.GlideUrl;
import com.bumptech.glide.load.model.LazyHeaders;
import com.yeo.glide.model.Photo;

import java.util.ArrayList;

public class PhotoActivity extends AppCompatActivity {

   ArrayList<Photo> photoList;
   ImageView imageView;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_photo);

       String imgurl = getIntent().getStringExtra("url");

       imageView = findViewById(R.id.imageView);

       GlideUrl url = new GlideUrl(imgurl,
               new LazyHeaders.Builder().addHeader("User-Agent","Android").build());

       Glide.with(PhotoActivity.this).load(url).placeholder(R.drawable.ic_defult).into(imageView);
   }
}

 

결과물

효과:

스크롤을 했을 때, 이미지가 즉시 쓰레드로 로드되며, 이미지 클릭시 큰 이미지가 로드 되기전에, 임시이미지가 잠시 떳다가 사라지는 것을 볼 수 있다.