[Glide] 3. Image Resize

Glide의 image resize의 기능에 대해서 알아보겠다.

직접 서버에서 size를 미리 정의를 해서 받아오는 이미지를 제외하고는 웹에서 불러오는 이미지의 크기는 전부

다를 경우가 많다. 극단적으로 어쩔때는 100*100의 이미지가 넘어오는가 하면 2000*2000의 이미지를 받아보게

될 수도 있다.

물론 ImageView 사이즈에 맞에 알아서 잘 표시 되도록 되겠지만 100*100과 2000*2000의 이미지 용량은 

꽤나 차이가 날 수 있다.

이를 대비하여 이미지의 사이즈를 imageView에 표시 되기 전에 resize를 해줄 수 있는 기능이 있다.

---

1. override

일단 .override()는 아래와 같이 사용한다.

Glide.with(this)
        .load(url)
        .override(int, int)
        .into(imageView);

매개변수로 int형을 전달 할 수 있고 이 int는 pixel을 의미한다.

override는 어떤 사이즈의 이미지가 올 지 모르는 상황에 사용하면 좋은 기능이다.

다음 사용 예시이다.

<main.xml> 을 다음과 같이 정의하였다.

<ImageView
    android:id="@+id/glideView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#ccffcc"/>
<Button
    android:id="@+id/btn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="1번"/>

<ImageView
    android:id="@+id/glideView02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#ccCcff"/>
<Button
    android:id="@+id/btn02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="2번"/>

그리고 코드에서 아래와 같이 버튼을 클릭하면 imageView01은 보통의 상태

imageView02는 override로 축소된 상태를 불러 오게했다.

btn01.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Glide.with(context)
                .load(url)
                .into(imageView01);

    }
});

btn02.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Glide.with(context)
                .load(url)
                .override(100, 100)
                .into(imageView02);

    }
});

결과는 다음과 같다.

이미지 url은 같은 url을 사용하였고

1번 버튼을 눌렀을때는 원래 크기의 이미지가 뜨고

2번을 눌렀을때 보다시피 100*100의 이미지가 뜨게됬다.

---

override의 기능에 대해 살펴보았다. 하지만 imageView의 크기가 정해져 있고 그 imageView 사이즈에 딱 맞추어야 한다면

저렇게만 사용한다면 비율이 맞지 않게 된다.

그런경우에 override에는 두가지 기능이 있는데 centerCrop과 fitCenter가 있으니 입맛에 맛게 사용하면 될 것 같다.

Glide.with(context)
        .load(url)
        .override(100, 100)
        .fitCenter()
        .into(imageView);

Glide.with(context)
        .load(url)
        .override(100, 100)
        .centerCrop()
        .into(imageView);

---

더 자세한 정보는 아래 출처에서 확인해 볼 수 있다.

Github - https://github.com/bumptech/glide

Glide Getting Started - https://futurestud.io/tutorials/glide-getting-started