[안드로이드] 안드로이드 개발 중 멀티 터치 구현

멀티 터치(MultiTouch)는 컴퓨터 사용자가 동시에 여러 손가락을 통해 도형 인터페이스를 제어할 수 있도록 하는 기술을 말한다.다중 터치 기술과 대응하는 것은 바로 단일 터치이다. 단일 터치 설비는 이미 여러 해가 되었다. 작은 사이즈의 터치식 휴대전화, 큰 사이즈의 가장 흔히 볼 수 있는 것은 은행 안의 ATM기와 줄 서기 조회기 등이다.
다중 터치 기술은 실제 개발 과정에서 가장 많이 사용되는 것이 확대 축소 기능이다.예를 들어 일부 이미지 브라우저는 여러 손가락으로 화면에서 조작하여 이미지를 확대하거나 축소할 수 있다.예를 들어 일부 브라우저도 여러 개의 터치로 글꼴을 확대하거나 축소할 수 있다.사실 확대 축소도 다중 터치의 실제 응용 사례 중 하나일 뿐이다. 다중 터치 기술이 있으면 어느 정도에 더 많은 조작 방식을 혁신하여 더욱 멋진 인간과 기계의 상호작용을 실현할 수 있다.
이론적으로 안드로이드 시스템 자체가 256개에 달하는 손가락의 터치를 처리할 수 있는데 이것은 주로 휴대전화 하드웨어의 지원에 달려 있다.물론 멀티 터치를 지원하는 휴대전화도 이렇게 많이 지원하지 않는다. 보통 2시나 4시를 지원한다.개발자에게 다중 터치 코드를 작성하는 것과 단일 터치 코드를 작성하는 것은 큰 차이가 없다.안드로이드 SDK의 Motion Event 클래스는 단일 터치 메시지뿐만 아니라 다중 터치 메시지도 봉인하여 단일 터치와 다중 터치에 대한 처리 방식이 거의 같기 때문이다.
단일 터치 처리에서, 우리는 일반적으로 Motion Event를 사용한다.ACTION_DOWN、ACTION_UP、ACTION_MOVE - Switch 문을 사용하여 별도로 처리할 수 있습니다.ACTION_DOWN 및 ACTIONUP는 화면을 한 번에 터치해서 누르고 놓는 동작입니다. ACTIONMOVE는 화면에서 손가락을 움직이는 동작이다.
다중 터치를 처리하는 과정에서 MotionEvent가 필요합니다.ACTION_MASK.일반적으로 switch(event.getaction() & MotionEvent.ACTION_MASK) 멀티 터치 처리가 가능한 ACTIONPOINTER_DOWN 및 ACTIONPOINTER_UP 이벤트.코드가 이 "와"동작을 호출한 후, 두 번째 손가락을 누르거나 놓으면 ACTIONPOINTER_DOWN 또는 ACTIONPOINTER_UP 이벤트.
다음은 코드에서 어떻게 다중 터치 기능을 실현하는지 실제적인 예로 설명한다.여기서 우리는 그림을 불러옵니다. 그림을 불러온 후 한 손가락으로 그림을 드래그할 수도 있고, 두 손가락의 미끄럼을 통해 그림의 확대와 축소 기능을 실현할 수도 있습니다.

// import 
public class ImageViewerActivity extends Activity implements OnTouchListener {

	private ImageView mImageView;

	private Matrix matrix = new Matrix();
	private Matrix savedMatrix = new Matrix();

	private static final int NONE = 0;
	private static final int DRAG = 1;
	private static final int ZOOM = 2;
	private int mode = NONE;

	//           
	private PointF startPoint = new PointF();
	//               
	private PointF midPoint = new PointF();
	//                 
	private float oriDis = 1f;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.imageviewer);
		mImageView = (ImageView) this.findViewById(R.id.imageView);
		mImageView.setOnTouchListener(this);
	}

	@Override
	public boolean onTouch(View v, MotionEvent event) {
		ImageView view = (ImageView) v;

		//               
		switch (event.getAction() & MotionEvent.ACTION_MASK) {
		case MotionEvent.ACTION_DOWN:
			//          
			matrix.set(view.getImageMatrix());
			savedMatrix.set(matrix);
			startPoint.set(event.getX(), event.getY());
			mode = DRAG;
			break;
		case MotionEvent.ACTION_POINTER_DOWN:
			//          
			oriDis = distance(event);
			if (oriDis > 10f) {
				savedMatrix.set(matrix);
				midPoint = middle(event);
				mode = ZOOM;
			}
			break;
		case MotionEvent.ACTION_UP:
		case MotionEvent.ACTION_POINTER_UP:
			//       
			mode = NONE;
			break;
		case MotionEvent.ACTION_MOVE:
			//       
			if (mode == DRAG) {
				//        
				matrix.set(savedMatrix);
				matrix.postTranslate(event.getX() - startPoint.x, event.getY()
						- startPoint.y);
			} else if (mode == ZOOM) {
				//       
				float newDist = distance(event);
				if (newDist > 10f) {
					matrix.set(savedMatrix);
					float scale = newDist / oriDis;
					matrix.postScale(scale, scale, midPoint.x, midPoint.y);
				}
			}
			break;
		}

		//   ImageView Matrix
		view.setImageMatrix(matrix);
		return true;
	}

	//             
	private float distance(MotionEvent event) {
		float x = event.getX(0) - event.getX(1);
		float y = event.getY(0) - event.getY(1);
		return FloatMath.sqrt(x * x + y * y);
	}

	//           
	private PointF middle(MotionEvent event) {
		float x = event.getX(0) + event.getX(1);
		float y = event.getY(0) + event.getY(1);
		return new PointF(x / 2, y / 2);
	}

}

다음은 레이아웃 파일입니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <ImageView 
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/example"
        android:scaleType="matrix" >
    </ImageView>
</RelativeLayout>

 
이 코드에서 우리는 손가락의 조작을 통해 Matrix의 값을 계산한 다음에 그림의 Matrix를 설정하여 그림의 이동과 축소를 실현한다.
리소스 파일에서 ImageView의 scaleType을 "matrix"로 설정해야 합니다.
 
경험 공유: 일반적으로 핸드폰의 화면이 작아서 두 손가락을 처리하면 충분한데 3개 이상의 손가락을 놓고 조작하면 좀 어렵다.그래서 일반적으로 디자인하는 과정에서 두 손가락을 실현하면 충분하다.많은 휴대전화는 다중 터치를 지원하지 않기 때문에 반드시 다른 방법으로 필요한 기능을 실현해야 한다.예를 들어 위의 그림의 축소 예를 들면 실제 제품 개발에서 반드시 일반적인 방식으로 그림의 축소를 실현해야 한다. 예를 들어 단추를 사용해서 여러 개의 터치에 완전히 의존해서는 안 된다.
 
---------------------------------------------------------------------------
http://blog.csdn.net/arui319
'안드로이드 앱 개발 다이제스트'는 초고의 일부로 출간됐다.구매 독서를 환영합니다.
본문은 전재할 수 있지만, 상기 저자의 정보를 보류해 주십시오.
고맙습니다.
---------------------------------------------------------------------------