[Glide] override를 사용해서 크기를 조절해보자

Posted by ITPangPang
2016.09.25 16:14 안드로이드(android)/오픈소스관련


[Glide] override를 사용해서 

크기를 조절해보자



이번에는 Glide의 override를 사용해서 이미지의

    크기를 변경해보도록 하겠습니다.


ㆍ Glide를 처음 사용할때 원하는 이미지 사이즈대로

    가져오기 위해서 override를 사용하는데 생각처럼

    잘 안되는 분들이 있을겁니다. 


ㆍ 이번글에서는 override로 이미지 크기를 변경해서 로드할때 어떤식으로 반영되는지

    아주아주 간단하게 알아보도록 하겠습니다


ㆍ 그리고 다음글에서 CenterCrop, fitCenter 등을 통해 살짝 자유롭게 이미지를 가져오는 방법을 알아보겠습니다 




자 지금까지

Glide를 통해서

이미지를 가져올때

Glide.with(this).load(R.drawable.img).into(ImageView);


이런식으로

이미지를 불러왔습니다


그런데 위에처럼 이미지를

불러오면 이전글에서 봤겠지만

사진크기가 굉장히 크게 나옵니다.


그래서 Glide에서 제공하는 리사이징

방법을 찾아봅니다


override

찾아보면 override를

사용하면 이미지 크기를

재조정할 수 있다고 나옵니다


그럼 한번 override를

사용해보도록 하겠습니다.



불러올 이미지는

크기 (3000 x 2255)입니다


자 이렇게 크기가 큰

이미지를 불러올때

화면에 맞게 넣기 위해서

이미지크기를 조절하게 됩니다

대충 (500x300) 정도로 재조정 해보겠습니다


public class MainActivity extends AppCompatActivity
{
ImageView iv;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv = (ImageView) findViewById(R.id.iv);
Glide.with(this).load(R.drawable.img).override(500,300).into(iv);
new Handler().postDelayed(new Runnable()
{
@Override
public void run()
{
Log.d("ITPANGPANG","img("+iv.getWidth()+" x "+iv.getHeight()+")");
}
}, 2000);
}
}


자 (500 x 300)으로 변경하기 위해서


아래와 같이

Glide.with(this).load(R.drawable.img).override(500,300).into(iv);

적어 주었습니다.


그리고 나서

결과가 잘 나왔나

확인해보겟습니다.



어떤가요

잘 나온것 같나요?


근데 자세히 보면

Width 500, Height 300으로

크기를 잡아줬는데

가로가 세로보다 1.7배정도는

대충 커야될 것 같은데 1.7배는

안되보이지 않나요?


그래서 코드에

이미지뷰 크기를 로그로

찍어봤었는데

그 결과를 보겠습니다



음? override에

(500 x 300)으로

값을 넣어줬는데

Width값이 399로 나옵니다


혹시 모르니 xml에 직접

원하는 재조정 크기와 위 크기를

넣어줘서 비교를 해봅니다


아래와 같이 xml을 변경해봅니다


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
>

<ImageView
android:layout_width="500px"
android:layout_height="300px"
android:background="#000000"/>
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:layout_width="399px"
android:layout_height="300px"
android:background="#000000"/>
</LinearLayout>


리사이징할 이미지를

붙여넣을 ImageView에


아래위로

(500x300), (399,300)으로

값을 강제로 넣어서


결과를 돌린후에

비교해보겠습니다


보이시나요?

아래에 (399 x 300)의 사이즈와

정확하게 일치합니다.


우리는 코드로 override(500,300)을

넣어줬는데 결과는

(399 x 300)의 크기로 리사이징 됬습니다


왜 이런결과가 나오는지

예측해보자면


이것 역시 이전글과 관련이 있습니다

Glide는 이미지를 불러올때

무조건 원본이미지의

비율을 중요시합니다.


리사이징 하면서도 비율을

유지시킨다는 말이죠.


한번 계산해보면서

399이라는 숫자가 왜 나왔는지

알아보겠습니다.


500, 300 중에 300이라는 height값은

정확하게 나왔으므로

이 값으로 계산을 해보자면


원본사진 Height : 2255

리사이징 Height : 300

2255 * x = 300


x값은 0.13303769401~~라는

값이 대충 나옵니다


그럼 이 값을 그대로

원본사진 Width : 3000에 넣어줍니다

3000 x 0.13303769401 = 399.11308


음 ~

원본비율대로 가져온다는

말이 맞는것 같죠?


그럼 테스트를 통해서

확신을 가져봅시다


Glide.with(this).load(R.drawable.img).override(600,300).into(iv);

Glide.with(this).load(R.drawable.img).override(300,600).into(iv);

Glide.with(this).load(R.drawable.img).override(720,720).into(iv);


자 아래와 같이

1. (600 x 300)

2. (300 x 600)

3. (720 x 720)


3개의 값으로 테스트를

해보겠습니다.


테스트를 하기전에

먼저 리사이징값을

예상해볼까요?


1. (600 x 300)

자 근데 여기서 Width를 기준으로

재조정할지 Height를 기준으로

할 지 애매합니다


일단 둘다 해보죠


Width기준계산법 :

3000 * x = 600

2255 * x = ???

이런식으로 구해줍니다


Width 기준 = (600 x 451)

Height 기준 = (399 x 300)


2. (300 x 600) 

Width 기준 = (300 x 225)

height 기준 = (798 x 600)

(720 x 541)


3.(720 x 720)

Width 기준 = (720 x 541)

height 기준 = (957 x 720)

(720 x 541)



결과 확인


1. Height 기준

2. Width 기준

3. Width 기준

의 예상값이 거의

맞아떨어졌습니다.


3번에서 예상은 541이었는데

결과가 540나온것은


아마도 Glide에서 재조정할때

소수점 버림처리를 한다던가

해서 미세한 차이가 있는것으로 예상됩니다


그렇다면 Height, Width 중

어떤것을 기준으로 정하는 것일까요?


여기부분은 많은 테스트를

하진 않았지만..

예상해보건데 재조정하면서

-오차값과 + 오차값중

-오차값에 손을 들어주는 것 같습니다


1번 (600 x 300)

Width 기준은 (0, +151)

Height 기준(-201, 0)


2번(300 x 600)

Width 기준 (0, -375)

Height 기준 (+498, 0)


3번(720 x 720)

Width 기준 (0, -179)

Height 기준 (+237, 0)


여기까지 테스트해봤는데

대충은 어느정도 예상했던데로

떨어지는 것 같습니다.


아 그리고

2, 3번 결과값에서

Height기준으로 할때

Width값이 720이 넘었는데(디바이스 Width)

이때는 아마 재조정이 한번더 될 것으로

예상됩니다.

(이전글 참고)



자 그럼 여태까지는

override 값을 대충대충 적어서

이미지를 불러왔었는데


그렇다면 원본비율을 따져가면서

축소시킨다면 원하는대로 값이

넘어올까요?


한번 테스트 해보겠습니다


원본이미지가 3000 x 2255이므로


1번 : 300 x 225.5(나누기10)

Glide.with(this).load(R.drawable.img).override(300,225).into(iv);


2번 : 600 x 451(나누기5)

Glide.with(this).load(R.drawable.img).override(600,451).into(iv);


3번 : 150 x 112.75(나누기20)

Glide.with(this).load(R.drawable.img).override(150,112).into(iv);


결과


결과를 보니

거의 99% 맞는거 같긴 한데

1px씩 오차가 나네요..

이 부분은 어떤 오차인지

감이 안잡히네요



이번글의 테스트는 여기까지입니다

뭐 결론만 보자면 위에 실험이나

이전글 실험은 봐두면 좋으나

몰라도 크게 지장은 없는 부분입니다..


그래도 이전글과 이번글을 통해서

원본이미지 비율을 유지해서 가져온다

이 부분이 가장 중요포인트인거 같네요


그리고 Glide 익숙하지 않은 분들이

왜 override에 임의값을 넣었는데

원하는 결과값이 왜 안나오는지도

알 수 있었습니다


자 이제 다음글에서는

역시 이미지크기와 관련있는

CenterCrop, firCenter에 대해서

알아보도록 하겠습니다


* 이전, 이번글에서 테스트한 부분은 어디서 보고 한게 아니라

제가 맨땅에 헤딩해서 나온 결과를 보고 예측한 내용이므로

100% 신뢰할 수는 없는 부분입니다.


혹시 더 정확한 정보를 가지고 계신분들은

저에게도 알려주시면 감사하겠습니다

공유합시다 !!



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
    • 김정훈
    • 2017.09.21 17:41 신고
    안녕하세요? 글 잘읽었습니다.
    Glide에 대해서 하나 질문할게 있는데요...
    기존에는 이미지를 가로를 꽉차게 하고 원본비율의 이미지를 보여주고싶을때
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    위와 같은 형식으로 사용을 했었습니다.
    그런데 저 상태에서 Glide를 사용하여 이미지를 넣으니 원본비율과는 다르게 출력이 되더라구요,
    혹시 Glide로 가로는 match_parent 세로는 원본비율에 따라 기계마다 유동적으로 줄수는 없을까요??