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

Posted by ITPangPang
2016.09.02 02:09 안드로이드(android)/오픈소스관련


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를 사용해서

해보겠습니다.


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
    • rolr
    • 2016.09.06 11:51 신고
    support-v4 파일이 생성이안되서 에러가나는데 어떻게해야하나요 ㅠ
    • v4 부분은 추가 안해줘도 될 거에요
      기존 프로젝트에 빨간 박스로 나온 glide 부분만 넣으시면 되고

      v4 부분은 뒤에 19 이게 sdk 버전인데
      compile 버전이랑 맞춰야되고
      19 install 안되있으시면 ctrl+alt+S 누르신다음에 설치하시면 되고
      그래도 안되시면
      ctrl+alt+shift+S 누르신다음에
      [Modules]-[Dependencies]-[+ 누르시고]-[1.Library dependency]-누르신다음에 v4 찾으셔서 추가시키시면 될거에요
    • choying
    • 2016.09.30 13:31 신고
    흐엉 감사합니다 ㅠㅠ 덕분에 gif 출력 간단하게 해결했어요!!
    좋은 하루 보내세요!!! :D
    • yeol
    • 2017.04.05 23:59 신고
    Glide.with(this).load(R.raw.unity).into(imageViewTarget);

    여기서 에러 투성이로 나오는데 미치겠습니다 ㅠㅠㅠ 어제 컴파일도 됐고 여기선 오류가 없었는데 오늘 다시 켜보니 갑자기 오류가 뜨네요 ....
    with - Cannot resolve Symbol 'with'
    load - Invalid method declaration; return type required
    R.raw.unity(raw폴더에 gif파일 분명히 있습니다) - Unknown class R.raw.unity
    into(imageViewTarget); - Invalid method declaration; return type required , Missing Method body, or declare abstract

    오류 투성인데 방법을 못찾겠네요 ㅜㅜㅜ
    • 제가 저번주 바빠서 지금에서야 봤네요..

      프로젝트를 새로 하나 만들어서 Glide부분만 따로 만들어보시는게 좋을거 같네요..

      아니면 비공개로 코드를 올려주시면 한번 봐야할것 같아요..