[안드로이드] 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를 추천한다.