Android

 

안드로이드 프로그래밍을 하다보면 ImageView 이미지를 두 손가락(멀티터치)으로 확대, 축소가 가능하게 핀치 줌(Pinch Zoom) 기능을

구현해야 할 때가 있습니다.

이러한 기능을 제공하는 기본 위젯이 있으면 좋겠지만 없죠. 그렇다고 쉽게 구현할 수 있는 내용이 아닙니다.

OnTouchEvent 이벤트를 추가해서 처리해야 하고, getPointerCount() 함수로 두 손가락인지도 체크해야 하며, 줌한 거리를 계산하기 위해

복잡한 산수도 해야합니다.

거기에다 확대가 된 이미지에 스크롤 기능도 추가해서 보고 싶은 부분을 볼 수 있게 조절 할 수도 있어야 합니다.

직접 코딩하겠다고 만만하게 덤볐다가는 엄청난 버그를 양산 할 수도 있죠.

공부삼아 직접 짜보는 것도 좋지만 개발자의 입장에선 잘 만들어 놓은 라이브러리를 사용하는 것이 현명합니다.

여기서도 집적 핀치 줌 기능을 구현하는 것이 아니라, 편하게 사용 할 수 있는 PhotoView 라이브러리를 사용하도록 하겠습니다

https://github.com/chrisbanes/PhotoView




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 파일까지 작성했다면 모든 작업이 끝났습니다.

이제 실행해서 테스트만 해보면 됩니다.


 

---

소스파일을 올려 놓습니다. 다운받아서 테스트해 보세요.

PhotoView-master.zip