안녕하세요 씨앤텍 시스템즈입니다.
이번 포스트는 Android Studio의 이미지로딩 라이브러리인 Picasso, Glide, Fresco에 대해 정리해보았습니다.
이미지를 로딩하는 방법은 크게 세가지로 나눠집니다.
1. 안드로이드 앱 안의 drawable 폴더의 리소스를 보여주는 경우
2. 안드로이드 디바이스에 저장된 사진을 보여주는 경우
3. 이미지 URL을 로드해서 보여주는 경우
이번에는 그 중에서 이미지 URL을 로드해서 보여주는 경우의 사용방법에 대해 알아보겠습니다.
[ Picasso]
Picasso는 외부로부터 이미지를 불러와야 할 경우 유용하게 사용할 수 있는 이미지 로딩 라이브러리입니다.
이미지를 불러오거나 처리할 수 있도록 하고, 이미지를 디스플레이하는 과정을 외부 장소를 통해 단순화시킵니다.
Picasso는 이미지 로딩 처리 과정의 각 단계를 다루는 데, 초기 HTTP 요청부터 이미지를 캐싱하는데 까지의 범위를 아우릅니다.
Picasso의 장점
- 이미지를 화면에 보여주는 일에 수반되는 부가적인 작업이 많음
- 사용하는 개발자가 많아 솔루션 공유가 잘 되고 있음
- 사용이 용이
Picasso의 단점
- gif 이미지는 사용할 수 없음
- 기본 이미지 캐시가 크기 때문에 빠른 로딩을 원한다면 resize 작업을 해야함
Picasso의 사용법에 대해 알아보겠습니다.
사용법은 Picasso 공식 문서(https://square.github.io/picasso/)를 참고하여 작성했습니다.
1. Android Studio 의 build.gradle의 dependencies에 Picasso를 추가합니다.
2. Android Studio의 AndroidManifest.xml에 uses-permission을 추가합니다.
3. 어떤 라이브러리를 사용했는지를 보여줄 텍스트뷰와 이미지를 띄울 이미지뷰 그리고 이미지 로딩 요청을 할 버튼을 생성합니다.
여러개의 이미지 라이브러리를 한 레이아웃에 띄우기 위해 ScrollView로 LinearLayout을 감싸줍니다.
4. 클래스 파일에서 Glide를 구현합니다.
4.1 클래스 파일에 이미지 주소를 담을 변수와 ImageView, Button을 선언합니다.
이미지는 저작권 문제가 없는 사진들이 있는 pixabay.com 에서 가져왔습니다.
4.2 onCreate에 액티비티에서 정의한 ID를 가져오고, 버튼에는 리스너를 설정합니다.
4.3 리스너를 정의합니다.
4.4 startLoadPicasso 메소드를 정의합니다.
Picasso 클래스는 빌더패턴*으로 구현되어 있고, 3개의 필수 파라미터를 요구합니다.
-
get()
Picasso 클래스를 사용하기 위함 -
load(String url)
이미지 경로 -
into(ImageView imageView)
다운로드 받은 이미지를 보여줄 이미지 뷰
이 세개 외에도 placeholder()와 erro()가 있습니다.
placeholder()에 지정된 이미지는 원본 이미지를 보여주기 전에 잠깐 보여주는 이미지이고, erro()에 지정된 이미지는 이미지 로드에 실패했을 때와 같이 원본이미지를 로드할 수 없을때 보여주는 이미지입니다.
*빌더패턴 : 생성패턴의 하나로, 클래스 설계에서 생성부분을 분리하여 객체를 깔끔하고 유연하게 생성부분만 담당하는 빌더를 고안한 패턴
5. 앱을 실행하면 이미지가 로딩되는것을 확인할 수 있습니다.
[ Glide ]
Glide는 부드러운 스크롤에 초점을 맞춘 Android용 빠르고 효율적인 이미지 로딩 라이브러리입니다.
개발자가 거의 모든 네트워크 스택에 플러그인 할 수 있는 유연한 API가 포함되어 있습니다.
사용하기 쉬운 API, 성능이 뛰어나고 확장 가능한 리소스 디코딩 파이프라인 및 자동 리소스 풀링을 제공합니다.
Glide의 장점
- 빠른 이미지 로딩 속도
- ImageView가 그려진 후에 로딩을 시작해서 View의 크기만큼의 리소스 지원
Glide의 단점
- 이미지 변환의 어려움
Glide의 사용 방법에 대해 알아보겠습니다.
사용법은 Glide 공식 GitHub(https://github.com/bumptech/glide)를 참고하여 작성했습니다.
1. Android Studio 의 build.gradle의 dependencies에 Glide를 추가합니다.
2. Android Studio의 AndroidManifest.xml에 uses-permission을 추가합니다.
3. 어떤 라이브러리를 사용했는지를 보여줄 텍스트뷰와 이미지를 띄울 이미지뷰 그리고 이미지 로딩 요청을 할 버튼을 생성합니다.
Picasso와 Glide를 비교하기 위해 Picasso의 이미지뷰 아래에 Glide 이미지뷰를 추가합니다.
4. 클래스 파일에서 Glide를 구현합니다.
4.1 클래스 파일에 이미지 주소를 담을 변수와 ImageView, Button을 선언합니다.
4.2 onCreate에 액티비티에서 정의한 ID를 가져오고, 버튼에는 리스너를 설정합니다.
4.3 리스너를 정의합니다.
4.4 startLoadGlide 메소드를 정의합니다.
Glide 클래스도 3개의 필수 파라미터를 요구합니다.
-
with(Context context)
안드로이드 시스템 서비스에서 제공하는 API를 호출 -
load(String url)
웹 상에서의 이미지 경로 -
into(ImageView imageView)
다운로드 받은 이미지를 보여줄 이미지 뷰
이 세개 외에도 placeholder()와 erro()가 있습니다.
5. 앱을 실행하면 이미지가 로딩되는것을 확인할 수 있습니다.
[Fresco]
Fresco는 Facebook에서 공개한 이미지로딩 라이브러리입니다.
최근 공개된 라이브러리로(2015년 3월 26일) 레퍼런스가 적고, 기본 ImageView가 아닌 Fresco의 DraweeView를 사용해야합니다.
Fresco는 2.3(진저브레드)이상 버전의 안드로이드를 지원합니다.
Fresco의 장점
- 간편한 이미지 변환
Fresco의 단점
- ImageView가 아닌 DraweeView를 사용해야 함
- DraweeView가 wrap_content를 지원하지 않아 요청할 이미지릐 정확한 사이즈를 알고 있어야 함
Fresco의 사용법에 대해 알아보겠습니다.
사용법은 Fresco 공식 문서(https://frescolib.org/docs/index.html)를 참고하여 작성했습니다.
1. Android Studio 의 build.gradle의 dependencies에 Fresco를 추가합니다.
2. MyApplication.java파일을 생성해 Fresco를 초기화 합니다.
3. Android Studio의 AndroidManifest.xml에 uses-permission을 추가합니다.
4. AndroidManifest.xml의 application에 android:name=".MyApplication"을 추가합니다.
android:name이라는 attribute는 어플리케이션 프로세스가 시작될 때, 어플리케이션의 다른 어떤 컴포넌트보다 먼저 객체화됩니다. 이 attribute를 통해 Fresco가 초기화 됩니다.
5. 어떤 라이브러리를 사용했는지를 보여줄 텍스트뷰와 이미지를 띄울 이미지뷰 그리고 이미지 로딩 요청을 할 버튼을 생성합니다.
glide 아래에 fresco를 추가합니다.
fresco는 ImageView 대신 facebook에서 만든 DraweeView를 사용합니다.
layout_width나 layout_height에 wrap_content를 지정할 수 없기 때문에 이미지의 크기에 맞춰 지정합니다.
6. 클래스 파일에서 Fresco를 구현합니다.
6.1 클래스 파일에 이미지 주소를 담을 변수와 ImageView, Button, Uri를 선언합니다.
Fresco는 String 타입의 url을 uri로 파싱해서 쓸 수도 있습니다.
6.2 onCreate에 액티비티에서 정의한 ID를 가져오고, 버튼에는 리스너를 설정합니다.
6.3 리스너를 정의합니다.
6.4 startLoadGlide 메소드를 정의합니다.
url을 파싱해서 uri로 사용하거나 url을 그대로 사용할 수 있습니다.
7. 앱을 실행하면 이미지가 로딩되는 것을 확인할 수 있습니다.
Glide, Picasso, Fresco의 사용방법에 대해 알아보았습니다.
이 세 라이브러리 중 Glide 와 Picasso가 자주 쓰이고 있습니다.
| Picasso | Glide | |
| 기능개수 | Glide와 비교해서 기능이 적은 편입니다. | Picasso에 비해 많은 기능을 가지고 있습니다. |
| 캐싱방법 | 인터넷에서 받은 이미지 사이즈 변환없이 저장합니다. | 인터넷에서 받은 이미지 사이즈를 줄여서 저장합니다. |
| 메모리 사용량 | 원본 이미지를 저장해 상대적으로 많은 메모리를 사용합니다. |
저장된 이미지 사이즈가 상대적으로 작아 적은 메모리를 사용합니다. |
| 로딩시간 |
빠르게 인터넷 이미지가 로딩되고(사이즈 변환 X), |
느리게 인터넷 이미지가 로딩되고 (사이즈 변환 O), 빠르게 캐시 이미지가 로딩됩니다. |
| 이미지 품질 | Glide에 비해 비트수가 높아 고품질 이미지로 표현됩니다. | Picasso에 비해 비트수가 낮아 이미지 품질이 떨어집니다. |
| GIF 지원 | 불가능합니다. | 가능합니다. |
두 라이브러리는 지원하는 기능도 쓰이는 형태도 비슷하지만 각각의 어플리케이션 성격에 맞춰서 사용하면 될 것 같습니다.
감사합니다.
'ETC > 기타' 카테고리의 다른 글
| Volley와 Retrofit (3) | 2019.10.10 |
|---|