안드로이드 ImageView 멀티터치 핀치 줌(Pinch Zoom) 기능 구현하기 (PhotoView 라이브러리 사용법, 두 손가락으로 이미지 확대 축소하기)

안드로이드 프로그래밍을 하다보면 ImageView 이미지를 두 손가락(멀티터치)으로 확대, 축소가 가능하게 핀치 줌(Pinch Zoom) 기능을 구현해야 할 때가 있습니다. 이러한 기능을 제공하는 기본 위젯이 있으면 좋겠지만 없죠. 그렇다고 쉽게 구현할 수 있는 내용이 아닙니다. OnTouchEvent 이벤트를 추가해서 처리해야 하고, getPointerCount() 함수로 두 손가락인지도 체크해야 하며, 줌한 거리를 계산하기 위해 복잡한 산수도 해야합니다. 거기에다 확대가 된 이미지에 스크롤 기능도 추가해서 보고 싶은 부분을 볼 수 있게 조절 할 수도 있어야 합니다. 직접 코딩하겠다고 만만하게 덤볐다가는 엄청난 버그를 양산 할 수도 있죠. 공부삼아 직접 짜보는 것도 좋지만 개발자의 입장에선 잘 만들어 놓은 라이브러리를 사용하는 것이 현명합니다. 여기서도 집적 핀치 줌 기능을 구현하는 것이 아니라, 편하게 사용 할 수 있는 PhotoView 라이브러리를 사용하도록 하겠습니다

https://github.com/chrisbanes/PhotoView

 

안드로이드 스튜디오를 사용하는 사람이라면 이응이네님의 글을 참고하세요!

http://ieung2.tistory.com/21

 

PhotoView 라이브러리로 ImageView 핀치 줌(Pinch Zoom, 이미지 확대 축소) 기능 구현하기

https://github.com/chrisbanes/PhotoView/releases

이 글을 쓰기에 앞서 멋진 핀치 줌 기능(PhotoView)을 오픈소스로 만들어준 Chris Banes님께 감사의 말씀을 드립니다. PhotoView는 아파치 라이선스를 따르고 있으니 참고하시기 바랍니다. 위 링크 GitHub PhotoView 페이지에서 PhotoView 라이브러리를 다운받을 수 있습니다. 여기서는 윈도우에서 자주 사용하는 zip파일로 다운받았습니다.

 

압축을 풀고 폴더에 들어와 보면 참 많은 파일이 있습니다.

 

PhotoView를 사용하기 위해서는 일단 안드로이드 프로젝트에 PhotoView 패키지를 포함시켜야 합니다. PhotoView-1.2.3/library/src/main/java 폴더 경로에 가보면 uk라는 폴더가 보입니다. 이 폴더를 선택하고 Ctrl + C를 눌러 복사를 합니다.

 

안드로이드 프로젝트에서 소스코드 패키지가 들어있는 src 폴더를 클릭하고 Ctrl + V 를 누릅니다.

 

Ctrl + V를 눌러 제대로 복사를 했으면, 위 화면처럼 없었던 4개의 패키지가 나타납니다.

 

PhotoView를 위한 패키지(소스코드 포함) 복사가 끝났으면 이제 기존의 프로젝트 코드를 수정해야 합니다. 예제는 간단한 것이 좋으니 하나의 액티비티에 필요한 2개의 파일(MainActivity.java와 activity_main.xml)만 수정해 보겠습니다.

 

activity_main.xml 파일

<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.helloworld.MainActivity" >

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

ImageView 위젯을 하나 추가하고 src는 기본으로 제공되는 아드로보이 이미지를 사용했으며 자바코드에서 이미지뷰를 참조하기 위해 id값을 지정했습니다.

 

MainActivity.java 파일

package com.example.helloworld;

import uk.co.senab.photoview.PhotoViewAttacher;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class MainActivity extends ActionBarActivity {
    // 1.변수선언	
    ImageView m_imageView;
    PhotoViewAttacher mAttacher;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 2.ImageView를 인자로 하여 PhotoViewAttacher객체를 생성
        m_imageView = (ImageView) findViewById(R.id.imageView);
        mAttacher = new PhotoViewAttacher(m_imageView);
        // 3.화면에 꽉차는 옵션 (선택사항)
        mAttacher.setScaleType(ScaleType.FIT_XY);
    }
}

ImageView, PhotoViewAttacher 변수를 선언하고 ImageView를 기반으로 하는 PhotoViewAttacher 객체를 생성하는 하는 코드입니다. 마지막에 있는 setScaleType(ScaleType.FIT_XY)는 이미지가 작을 때 이미지 크기를 ImageView 사이즈만큼 늘여주는 역할을 하는데 필요한 경우에만 사용하면 됩니다. (FIT_XY말고 다른 옵션도 가능)

 

PhotoView 패키지를 프로젝트에 포함시키고 MainActivity.java와 activity_main.xml 파일까지 작성했다면 모든 작업이 끝났습니다. 이제 실행해서 테스트만 해보면 됩니다.

 

  

안드로이드 프로그램을 실행하면 화면에 안드로보이 이미지가 하나 나오는데, 이 이미지를 핀치줌(Pinch Zoom)하거나 더블클릭을 하면 이미지가 확대(축소)가 됩니다. 이렇게 ImageView에 PhotoView 기능을 첨가하는 방식은 기존의 XML의 변경없이 자바코드만 수정하면 사용할 수 있어서 참 편리합니다. 직접 구현도 해보고 다양한 방법도 적용해 봤지만 현재까지는 PhotoView가 가장 쓸만한 것 같습니다. 혹시 더 좋은 방법이 있으면 추천 바랍니다. 그럼 행복한 코딩하세요!

 

[Android] - 안드로이드 개발환경 이클립스ADT(Eclipse ADT)에서 블럭선택(Toggle block Selection) 편집모드 사용하여 소스코드 편집하기 (블록선택 기능 단축키 설정 변경)

[Android] - 안드로이드 프로그래밍 샘플 소스코드 실행 방법 (Android Sample Project ApiDemos 예제 프로젝트 만들기)

[Android] - 안드로이드 프로그래밍 프로젝트 백업, 복구, 삭제 방법 (이클립스 Export, Import, Delete 사용법, 프로젝트 관리)

[Android] - 이클립스(Eclipse) ADT로 안드로이드 프로젝트 복사(복제) 방법 (일반 자바 Java Project 복사 가능)

[Android] - 안드로이드 프로그래밍 프로젝트 생성하고 에뮬레이터 실행하기 (Android Application Project 만들기, AVD 가상머신 작동하기)

[Android] - 안드로이드 프로그래밍 개발환경 구축하기 (자바 JDK 설치, 이클립스 ADT Bundle 설치, Android SDK 업데이트, AVD 에뮬레이터 설정)