ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Glide] 3. Image Resize
    Android 2016.09.23 18:42

    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

    댓글 2

    • 남나매 2016.09.23 18:47

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

      • Diordna 2016.09.23 19:19 신고

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

Designed by Tistory.