2014年8月19日 星期二

Android 監測螢幕觸碰方向

功能說明:

監測手指滑動螢幕的座標變化量(VelocityTracker),根據滑的方向,顯示出上下左右,並改變背景顏色做更明顯區分。


##ReadMore##

原理說明:

首先知道在 Java 中的繪圖座標系為
X 左負右正,
Y 上負下正,
接著,方向的判斷,為取X及Y座標變化量來判斷,先取絕對值:

|X|>|Y| 則為水平移動,
再判斷若 X>0 即向右,X<0 即向左;

|X|<|Y| 則為垂直移動,
再判斷若 Y>0 即向下,Y<0 即向上。

Main Java Code :
package com.example.testtouch;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

 // 顯示方向數據
 private TextView touchShow;

 // Velocity Tracker 監測觸碰速度
 private VelocityTracker touchTracker;

 // Relative Layout 相對佈局
 private RelativeLayout layout;


 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  // IO Setting
  touchShow = (TextView) findViewById(R.id.textView2);
  layout = (RelativeLayout) findViewById(R.id.colorLayout);

  // 觸控監測處理
  layout.setOnTouchListener(new OnTouchListener(){
   public boolean onTouch(View view, MotionEvent event){
    // get actinon event
    switch(event.getAction()){

    // 開始觸碰瞬間
    case MotionEvent.ACTION_DOWN:
     touchShow.setText(""); // Clear touchShow
     touchTracker = VelocityTracker.obtain(); // 取得追蹤到的速度
     break;

    // 觸碰中的過程
    case MotionEvent.ACTION_MOVE:
     touchTracker.addMovement(event); // 滑動中的資料加到 Tracker 裡
     break;

    // 觸碰結束
    case MotionEvent.ACTION_UP:
     touchTracker.computeCurrentVelocity(1); // 計算單位:每1ms為一像素(1pix/1ms)

     /*
     先說明在 Java 中的繪圖座標系為 X 左負右正,Y 上負下正,接著,
     方向判斷,取X及Y座標變化量來判斷,先取絕對值:
     若 |X|>|Y| 則為水平移動,再判斷若 X>0 即向右,X<0 data-blogger-escaped-y="">0 即向下,Y<0 data-blogger-escaped-absolute="" data-blogger-escaped-float="" data-blogger-escaped-getabs_x="Math.abs(getVel_X);" data-blogger-escaped-getabs_y="Math.abs(getVel_Y);" data-blogger-escaped-getvel_x="touchTracker.getXVelocity();" data-blogger-escaped-getvel_y="touchTracker.getYVelocity();" data-blogger-escaped-velocity="">|Y| 時,為水平移動
     if(getAbs_X > getAbs_Y){
      if(getVel_X > 0){ // 若 X>0 時,為向右
       touchShow.setText("向右移動\nX = " + getVel_X + "\nY = " + getVel_Y);
       layout.setBackgroundColor(Color.RED); // 顏色區分方向,右=紅
      }
      else { // 若 X<0 data-blogger-escaped-brush:xml="" data-blogger-escaped-nx=" + getVel_X + " data-blogger-escaped-ny=" + getVel_Y);
       layout.setBackgroundColor(Color.YELLOW); // 顏色區分方向,上=黃
      }
     }
     break;
    }
    return true;
   }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button, so long
  // as you specify a parent activity in AndroidManifest.xml.
  int id = item.getItemId();
  if (id == R.id.colorLayout) {
   return true;
  }
  return super.onOptionsItemSelected(item);
 }
}

</pre><br />
<br />
Layout Code:<br />
<pre class=" data-blogger-escaped-touchshow.settext="">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/colorLayout"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1.0"
    android:orientation="horizontal"
    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.testtouch.MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="35dp"
        android:text="@string/hello_world" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="55dp" />

</RelativeLayout>


String Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">testTouch</string>
    <string name="hello_world">滑動方向判斷</string>
    <string name="action_settings">Settings</string>

</resources>