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

1. Glide 라이브러리

• 구글에서 인수한 안드로이드 이미지 로딩 라이브러리
• 이미지의 크기 조정, 로딩 이미지, 오류 이미지 표시 등을 쉽게 구현도록 지원한다.
• 동영상, gif 파일 로딩까지 지원한다.
• 빠른 로딩을 위해 내부적으로 cache를 갖는다.
• httpUrlConnection 라이브러리를 기반으로 하지만, Volley, OkHttp 등의 라이브러리를 사용할 수 있는 플러그인도 지원한다.(때문에 url을 통해 웹서버에 접근하여 file등을 다운로드 받을 수 있고, 이를 로딩할 수 있다.)
• 서버에서 이미지를 내려받을 때 Volley나 Retrofit보다 더 빠르게 처리한다.
• 자동으로 페이징 처리를 해서 스크롤이 가지 않은 곳의 이미지는 불러오지 않는다.
• 공식 GitHub

유저가 요청한 이미지를 불러오기 위해 Glide 내부에서 거치는 과정

 

 

2. 사용 방법

 

build.gradle에 dependencies 추가

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.14.2'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.2'
}

 

기본 사용법

Glide.with(context)
    .load("이미지 url")
    .into(imageView)

 

 

대표적인 함수

 

1. override()

 override 메서드로 이미지 사이즈를 조절해줄 수 있다. 사이즈를 조절하며 이미지 로딩 속도를 최적화할 수 있다. 메모리를 절약하고 싶을 때 유용하게 사용된다.

Glide.with(this)
    .load("이미지 url")
    .override(100, 100)
    .into(imageView)

 

2. placeholder()

 이미지가 로딩하는 동안 보일 이미지를 정해준다.

Glide.with(this)
    .load("이미지 url")
    .placeholder(R.drawable.loading)
    .into(imageView)

 

3. error()

 이미지 로딩에 실패했을 경우 실패 이미지를 지정해줄 수 있다.

Glide.with(this)
    .load("이미지 url")
    .error(R.drawable.error)
    .into(imageView)

 

4. asGif()

 gif 이미지를 로딩할 때 호출한다.

Glide.with(this)
    .asGif()
    .load("gif 이미지 url")
    .into(imageView)

 

5. thumbnail()

 원본 이미지를 썸네일로 사용한다. 지정한 % 비율만큼 미리 이미지를 가져와서 보여준다. 0.1f로 지정했다면 실제 이미지 크기 중 10%만 먼저 가져와서 흐릿하게 보여준다.

Glide.with(this)
    .load("이미지 url")
    .thumbnail(0.1f)
    .into(imageView)

 

 

3. 샘플 코드

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    ImageView imageView1;
    ImageView imageView2;
    ImageView imageView3;

    final String URL1 = "https://via.placeholder.com/600/92c952";
    final String URL2 = "https://block-yh-test2.s3.ap-northeast-2.amazonaws.com/2023-01-13T03_31_12.564141.jpeg";
    final String URL3 = "https://block-yh-test2.s3.ap-northeast-2.amazonaws.com/2023-01-13T03_46_46.079772.jpg";

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

        imageView1 = findViewById(R.id.imageView1);
        imageView2 = findViewById(R.id.imageView2);
        imageView3 = findViewById(R.id.imageView3);

        Glide.with(MainActivity.this).load(URL1).into(imageView1);

        Glide.with(MainActivity.this).load(URL2).into(imageView2);

        // placrholder : 불러오는 동안 보여줄 기본 이미지
        Glide.with(MainActivity.this).load(URL3)
                .placeholder(R.drawable.baseline_person_outline_24).into(imageView3);

 

activiy_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/baseline_person_outline_24" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="200dp"
            android:layout_height="150dp"
            app:srcCompat="@drawable/baseline_person_outline_24" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="250dp"
            android:layout_height="200dp"
            app:srcCompat="@drawable/baseline_person_outline_24" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

실행 화면