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

[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% 신뢰할 수는 없는 부분입니다.

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

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

공유합시다 !!