본문 바로가기

Android

[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

태그

  • 남나매 2016.09.23 18:47

    가로는 꽉채우고 세로는 이미지 비율에 맞추려면 어떻게 하면 되나요?

    • Diordna 2016.09.23 19:19 신고

      이방법은 비율을 보장하기 힘들기 때문에 그런경우에는 여유가 된다면 override를 걸지 않거나 다른방법을 사용하는것이 옳은것 같습니다.