觸控遊戲與應用：使用Android多重觸控

快速連結：

  1. 範例1：觸控事件的資料
  2. 範例2：多點觸控畫軌跡線
  3. 範例3：3個選n個按鈕同時觸控
  4. 範例4：圖形放大、縮小並跟隨手指移動而改變位置
  5. 範例5：手勢 Gesture
  6. 範例6（作業）：多重觸控解鎖

範例1：觸控事件的資料

MotionEvent 物件：何時(when) 何處(where) 有觸控，以及觸控的詳細細節

Android觸控事件的取得：

範例程式檔案下載 Touch1 下載後解壓縮

在Layout中使用 android:tag ，程式中利用 getTag() 來判定那個物件被觸控 

程式碼
android:tag="1"
String sTag = v.getTag().toString();

取的多點觸控的資訊

程式碼
int numPtrs = e.getPointerCount(); // 目前有多少點的觸控
for (int ptr = 0; ptr < numPtrs; ptr++) { 
	int id = e.getPointerId(ptr);
	String msg = String.format(mFmt, e.getAction(),  tag, e.getX(ptr),
		e.getY(ptr), e.getPressure(ptr));
	// 另有時間的資訊，請參考 MotionEvent 連結的詳細說明
}

使用 DEBUG 以及 Log.v() ，可以再DDMS中觀察顯示的訊息

程式碼
private final boolean DEBUG = true;
if (DEBUG)
	Log.v(mLogTag, msg);

範例1執行畫面，碰觸個別的文字標籤，在該文字標籤顯示 Action, Target, 座標 X, Y, 壓力大小

範例2：多點觸控畫軌跡線

使用多點觸控，隨者手指移動，畫不同顏色的軌跡線條，程式中提供5點觸控，增加顏色陣列可以增加觸控點數 

程式碼
private int[] mColor = { Color.RED, Color.BLUE, Color.rgb(250, 20, 250),
		Color.rgb(20, 250, 250), Color.rgb(250, 250, 20) };

自訂Class TPoint 儲存觸控點的編號與位置，並使用 ArrayList 來儲存所有觸控點的資訊

程式碼
List<TPoint> mTpoints = new ArrayList<TPoint>();

自訂Class TView 來畫軌跡線 ，onDraw()

程式碼
protected void onDraw(Canvas canvas) {
	for (TPoint p : mTpoints) {
		paint.setColor(mColor[p.id]);
		canvas.drawCircle(p.x, p.y, 9, paint);

範例程式檔案下載 Touch2 下載後解壓縮

範例2執行畫面：HTC Desire HD，個人最多能同時畫出4點，可能 HTC DHD 只提供4點觸控

範例2執行畫面：提供 Menu 清除畫面與結束執行

範例3： 3個選n個按鈕同時觸控

下面3個文字標籤，顯示對應上面3個按鈕的觸控資訊

程式碼

private String mFmt = "Action:%d %s, X=%.1f, Y=%.1f";
// Action編號, Action動作說明， Loc X, Y

範例程式檔案下載 Touch3 下載後解壓縮

範例3執行畫面：開始狀態

範例3執行畫面：按下不同按鈕後的畫面

範例4：圖形放大、縮小並跟隨手指移動而改變位置 範例

Making Sense of Multitouch 此範例，為 Adam Powell 所寫，Tim Bray 代為 Post在

http://android-developers.blogspot.com/2010/06/making-sense-of-multitouch.html

很棒的範例，值得參考

subversion source 下載處 或直接下載 android-touchexample.7z 下載後解壓縮

使用 ScaleGestureDetector.SimpleOnScaleGestureListener 中的 onScale() method中的 getScaleFactor() 判斷縮小放大比率 

程式碼
// Let the ScaleGestureDetector inspect all events.
mScaleDetector.onTouchEvent(ev);

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
	@Override
	public boolean onScale(ScaleGestureDetector detector) {
		mScaleFactor *= detector.getScaleFactor();
		
		// Don't let the object get too small or too large.
		mScaleFactor = Math.max(0.1f, Math.min(mScaleFactor, 5.0f));

		invalidate();
		return true;
	}
}

在 onTouchEvent() 紀錄位置 

程式碼
final float x = ev.getX();
final float y = ev.getY();

mLastTouchX = x;
mLastTouchY = y;

範例4執行畫面：開始狀態

範例4執行畫面：移動並縮小

範例4執行畫面：移動並放大

練習：更改顯示的圖案

範例5： 手勢 Gesture

Gesture 手勢 （已經移除） Mirror 備份

範例下載

Gestures

Gesture Builder 手勢產生步驟：

請參考程式碼

程式碼
mLibrary = GestureLibraries.fromRawResource(this, R.raw.spells);

public void onGesturePerformed(GestureOverlayView overlay, Gesture gesture) {
	ArrayList<Prediction> predictions = mLibrary.recognize(gesture);

	// We want at least one prediction
	if (predictions.size() > 0) {
		Prediction prediction = predictions.get(0);
		// We want at least some confidence in the result
		if (prediction.score > 1.0) {
			// Show the spell
			Toast.makeText(this, prediction.name, Toast.LENGTH_SHORT).show();
		}
	}
}

範例5 執行畫面：Gesture Builder 建立手勢畫面

範例5 執行畫面： 閃電 Gesture

範例5 執行畫面： 閃電 Gesture 判斷結果

範例6（作業）： 多重觸控解鎖

當使用者同時按下設定的鍵盤組合（可能10選1、10選2、10選3、或10選4）時，解鎖成功

範例6（作業）： 鍵盤鎖畫面

範例6（作業）：鍵盤鎖按下4鍵

範例6（作業）：鍵盤鎖同時按下6與8鍵

範例6（作業）：鍵盤鎖同時按下2,5與0鍵

範例6（作業）：鍵盤鎖同時按下1,3,7與9鍵

範例6（作業）：鍵盤鎖同時按下正確密碼1,6與8鍵：解鎖成功！