[안드로이드] ImageView에 고화질 이미지 확대,축소,이동 핀치 줌 (Pinch Zoom) 기능을 한 번에...[SubsamplingScaleImageView]

안드로이드 ImageView에 고화질 이미지를 출력하려면 당연하게? Out of memory[이하 OOM] 메시지를 만나게 될 것이다.

안드로이드 앱 별로 메모리가 한정적이라서 생기는 현상이다.

하지만 안드로이드 고화질 이미지를 갤러리 앱으로 실행하면 OOM 메세지는 나오지 않는다.

그렇다면 ImageView에 고화질 이미지를 출력하게 할 수 있다는 것인데... 혼자서 알고리즘을 만드는 나로선는 여간 여려운 것이 아니었다. 그래서 난 Github프로젝트를 뒤지기 시작했고, 마침내 ImageView에 고화질 이미지를 출력할 수 있는 프로젝트를 발견하였고, 그 내용을 여기에 남긴다.

내가 찾은 프로젝트는 SubsamplingScaleImageView 이다. 사용 방법 또한 제일 쉽고, 예제는 물론 데모 앱(Scale Image View Demo)이 출시 되어있어 구글플레이(안드로이드 최신 버전이 아니라면 구글플레이 검색에서 나오지 않을 수 있다. 그 아래 버전에서도 동작한다. 데모 앱 실행버전 5.0이상일 뿐)에서 사용가능하다.

 

구글플레이 Scale Image View Demo (필요한 Android 버전5.0 이상) :
https://play.google.com/store/apps/details?id=com.davemorrissey.labs.subscaleview.sample

 

* 데모 실행 :

위 링크에서 다운 받아도되고 구글플레이에서 Scale Image View Demo로 검색하면 나온다. (안드로이드 버전5.0 이상이 아니라면 구글플레이 검색에서 나오지 않을 수 있다. 그 아래 버전에서도 동작한다. 데모 앱 실행버전 5.0이상일 뿐)

다운로드 후 실행하면 Image display 항목을 클릭해 보자!!

 

 

위와 이미지화 같이 7577*5669 크기의 이미지가 앱에 준비 되어있다.

직접 확대해보면 고화질 이미지가 선명하게 확대되어 출력되는 것을 확인 할 수 있다.

그리고 속도 또한 이미지 확대 및 이동, 축소를 해도 느리지 않고, 단지 이미지 확대 후 조금 기다려야 선명한 이미지가 나오긴 하지만 갤러리 앱과 비슷한 수준이다.

Github (subsampling-scale-image-view) :
https://github.com/davemorrissey/subsampling-scale-image-view

 

* 실습 :

먼저 Github에서 프로젝트를 다운로드 한다. 위 링크에서 다운 받아도되고 Github에서 검색해도 나온다. 안드로이드 스튜디오에서 실행해 보면 sample 항목에

ImageDisplayLargeFragment클래스에 코드를 보면 내용은 간단하다.

 

SubsamplingScaleImageView imageView = rootView.findViewById(id.imageView);
  imageView.setImage(ImageSource.asset("card.png"));

 

단 2줄의 코드이다. [card.png이미지는 asssets에 들어있다.]

 

imagedisplay_large_fragment.xml에

 

<com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView

style="@style/mainPanel"

android:id="@+id/imageView"/>

 

3줄의 코드가 있을 뿐이다. 스타일 정의(style="@style/mainPanel")를 제외하면 단2줄의 코드이다.

 

실행해보면 구글플레이 앱과 같다는 것을 알 수 있다.

 

* 프로젝트 사용

- 프로젝트에 Github프로젝트를 포함하려면

build.gradle에 코드 추가

dependencies {

    //...
    implementation 'com.davemorrissey.labs:subsampling-scale-image-view:3.10.0'
}

 

- 프로젝트에 layout XML에 코드 추가

    <com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView
        android:id="@+id/imageView" />

 

- 이미지 로드 방법 (이미지 리소스, assets폴더, URI)

SubsamplingScaleImageView imageView =

  (SubsamplingScaleImageView)findViewById(id.imageView);
imageView.setImage(ImageSource.resource(R.drawable.monkey));
// ... or ...
imageView.setImage(ImageSource.asset("map.png"))
// ... or ...
imageView.setImage(ImageSource.uri("/sdcard/DCIM/DSCM00123.JPG"));

 

- 실행은 가능하나 에러를 가져올 수 있는 방법

imageView.setImage(ImageSource.bitmap(bitmap));

  -> 기존의 방법인 Bitmap클래스를 이용하여 고화질 이미지를 로드하면OutOfMemory 메시지가 나올 수 있다.

 

* 라이선스 또한 Apache License, Version 2.0이다. Apache License, Version 2.0 형식에 맞게 출시한다면 상업적이용도 자유롭다.

 

이와같이 코드 단 몇 줄로 ImageView에 고화질 이미지 확대,축소,이동 핀치 줌 (Pinch Zoom) 기능을 한 번에 사용 가능한 SubsamplingScaleImageView를 추천한다.