Glide 기본 사용방법(리소스 Image 및 gif)

Glide 기본 사용방법

(리소스 Image 및 gif)

ㆍ Glide의 기본 사용방법에 대해 써보겠습니다

ㆍ 여러 라이브러리에 대해 쓰려고 계획중인데

    Glide를 첫번째로 쓰는 이유는 사용방법에 비해

    효율성이 굉장히 뛰어나다고 해야되나.? 

ㆍ 기본 이미지로딩정도만 하려고 하면 한 3분이면

    배운후 적용가능한 것 같아서 써보려고 합니다.

ㆍ Gradle에 추가하는 방법과 리소스에서 이미지 가져와서

    붙이는 방법, gif 로딩하는 방법만 간단하게 알아보겠습니다.

Glide를 내 프로젝트에 적용하려면?

요즘은 정말 Gradle에서

라이브러리 추가하는 방법이

너무 간단해져서

좋은것 같습니다.

https://github.com/bumptech/glide

추가하는 방법이야

build.gradle에 한줄만

넣으면 되지만

위 주소링크를 타고

들어가게 되면

우측상단에 위에

사진처럼 Star수를 보실수

있습니다

이게 어떻게 보면

좋아요 같은 개념인데

10,000(만)이 넘는다는건

정말정말 좋고 많은사람들이

이용하고 있다는 의미입니다.

어쨋거나.. 

아래로 조금 내려가보면

사용방법도 자세히

나와있습니다

Gradle에서 이렇게 쓰면 된답니다

바로 그럼 써보겠습니다.

위에 주저리주저리 한걸

제외하면 Android Studio

키자마자 사이트 접속해서

저 빨간줄만 추가해주면 됩니다

어디에다가?

바로 요기를 클릭해서

하단

dependencies에 

이런식으로 복붙

사이트에 들어가서 꼭 추가해주세요

버전이 업데이트 될 수 있으니 최신버전으로~

자 저렇게 딱 한줄만

추가해주고 Java파일로

넘어와서 확인을 해보면!

바로 사용가능합니다!

Resource에 있는 이미지 불러오기

좀 더 유용한 예제들은

이번글에서 안쓰겠지만..

왜 굳이 사용하는지

알아보기 위해 간단하게

이미지를 하나 ImageView에

붙여넣어보겠습니다

사진은

저기가 어디였더라...

놀러가서 핸드폰!!

카메라로 찍었던 사진입니다

JPG파일이고 크기는 3.39MB네요

자 이 사진을 drawable 폴더에 넣어놓고

ImageView에 붙여보겠습니다

먼저 Glide 사용전

레이아웃은 이렇게 간단하게(xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.gradleex.MainActivity">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
</RelativeLayout>

코드도 간단하게(java)

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView)findViewById(R.id.iv);
        iv.setImageResource(R.drawable.img);
    }
}

간단해서

별로 흠잡을데 없는

코드죠

결과를 보면?

앱이 죽어버렸네요

로그캣을 확인하면

역시 개발자들을

항상 괴롭히는

OOM

(OutOfMemoryError)

이 놈의 OOM

그렇다면 방금 추가한

Glide를 사용해서

이미지를 붙여보겠습니다

Glide 사용

java코드만 바꾸면 되겠죠?

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView)findViewById(R.id.iv);
        //iv.setImageResource(R.drawable.img);
        Glide.with(this).load(R.drawable.img).into(iv);
    }
}

한 줄 추가 됬네요 맨 아래

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

결과를 보면

짜잔!

이번에는 OOM 없이

이미지가 출력되었습니다

여기서 

Glide를 왜 사용하는지

한가지 이유가 나옵니다

Glide는

OOM을 방지해줍니다

보통 라이브러리를 안쓰면

OOM을 피하기 위해서

이미지를 Resize하고

품질을 낮추기도 하면서

코드를 짜줘야하는데

Glide를 쓰게 되면

이것들을 알아서 잘 처리해줍니다.

위에 나왔듯이 사용방법은

Glide.with(context).load(이미지파일).into(ImageView);

입니다.

정말 간단하죠 한줄..

GIF 로드하기

어떻게 보면 제가

Glide 처음쓰게 된 이유도

이 놈의 gif때문입니다..

안드로이드에서는

기본적으로 gif파일을

불러올 수 없습니다.

어찌저찌 하려면

프레임 애니메이션을

쓰면 되기야 하겠지만..

Glide를 이용하면

gif를 쓸 수 있습니다!!

이게 Glide 사용하는

두번째 이유겠죠

GIF파일 사용가능!!

코드도 아주 간단해서

쉽습니다.

gif 파일이...

저작권 혹시나.. 모르니

대충 예전에 찍었놨던걸

찾아보니 ..

이런게 있네요 아주 허접한..

이걸 붙여보겠습니다..

그 전에 먼저

gif 파일은 raw폴더에

넣어야 합니다

폴더를 생성하는 방법은

트리에서 res폴더 오른쪽클릭!

[NEW] - [Android resource directory]

그 다음에

[raw] 선택 한 후에

여기다가 gif파일을

넣어주시면 됩니다

이렇게 넣은후에

코드를 작성하면

됩니다

역시나 Java파일만 간단히

수정해보면

public class MainActivity extends AppCompatActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView iv = (ImageView)findViewById(R.id.iv);
        //iv.setImageResource(R.drawable.img);
        //Glide.with(this).load(R.drawable.img).into(iv);
        GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(iv);
        Glide.with(this).load(R.raw.unity).into(imageViewTarget);
    }
}

이번엔 두 줄이 추가됬네요

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(iv);

Glide.with(this).load(R.raw.unity).into(imageViewTarget);

어쨋든 결과를 보자면

(Gif 파일 돌린걸 다시 녹화한후

다시 Gif 만들어서 올리고 있는..)

gif in gif

고화질로 만들면

파일크기가 커서..

저화질로 만들었더니

약간 화질이 안좋아보입니다..

여하튼,

성공적으로 gif도

불러왔습니다.!!!

이번글에서 사용한

Glide 코드는 총 3줄입니다

아주 간단하죠

Resource 이미지 로딩(1줄)

Glide.with(context).load(이미지파일).into(ImageView);

gif 파일 로딩(2줄)

GlideDrawableImageViewTarget imageViewTarget = new GlideDrawableImageViewTarget(ImageView);

Glide.with(context).load(gif파일).into(imageViewTarget);

이걸 Glide 없이

직접짜면 코드가 정말

길어지고 시간도

많이 낭비되겠죠?

그리고 가장 중요한

성능도 Glide보다

떨어질 확률도 높습니다.

지금 알아본 2가지가 중요한 부분일수도있는데

이건 Glide의 아주 일부분입니다.

알아보면 훨씬 더 유용한 메서드들이 많으니

지금 당장 사용해보세요~

다음글은 역시나 중요한

RecyclerView로

이미지파일 리스트를

만들어서 스크롤해보는것을..

역시나 Glide를 사용해서

해보겠습니다.