Android之手势交互的详解

手势:是指用户手指或者触摸笔在触摸屏上连续触碰的一种行为

使用手势检测需要俩个步骤:

1.创建一个GestureDetector对象，识别各种手势

2.为应用程序的activity的TouchEvent事件绑定事件监听器,在事件处理中指定把activity上的touchEvent的事件交给GestureDetector处理

代码如下：

//1.创建一个GestureDetector对象,识别各种手势
private GestureDetector mGestureDetector;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGestureDetector=new GestureDetector(this, this);
}

//2.在事件处理中指定把activity上的touchEvent的事件交给GestureDetector处理
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return mGestureDetector.onTouchEvent(event);
}

识别手势有6个方法~

分别为onDown，onShowPress，onSingleTapUp，onScroll，onLongPress，onFling

让Activity实现OnGestureListener接口，这就要重写这6个方法~

详细解释如下：

//按下:刚刚手指接触到触摸屏的那一刹那
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onDown");
return false;
}
//按住:手指按在触摸屏上,它的时间范围在按下起效,在长按之前
@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onShowPress");

}
//抬起:手指离开触摸屏的那一刹那,
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onSingleTapUp");
return false;
}
//滑动
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
// TODO Auto-generated method stub
System.out.println("onScroll");
return false;
}
//长按,手指按住持续一段时间,并且没有松开
@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onLongPress");

}
//抛掷:快速滑动的时候执行这个方法,并且松开的动作
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// TODO Auto-generated method stub
System.out.println("onFling");
return false;
}

状态不同的时候要调用哪个方法呢？？？如下：

点击:onDown-onSingleTapup

长按并且未抬起:onDown--onShowPress--onLongPress

长按(按了一段时间就抬起了):onDown--onShowPress--onSingleTapup

迅速滑动:onDown--onScroll....--onFling

缓慢滑动:onDown--onScroll.....

MainActivity全部代码：

public class MainActivity extends Activity implements OnGestureListener{

//1.创建一个GestureDetector对象,识别各种手势
private GestureDetector mGestureDetector;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGestureDetector=new GestureDetector(this, this);
}

//2.在事件处理中指定把activity上的touchEvent的事件交给GestureDetector处理
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return mGestureDetector.onTouchEvent(event);
}

//按下:刚刚手指接触到触摸屏的那一刹那
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onDown");
return false;
}
//按住:手指按在触摸屏上,它的时间范围在按下起效,在长按之前
@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onShowPress");

}
//抬起:手指离开触摸屏的那一刹那,
@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onSingleTapUp");
return false;
}
//滑动
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
// TODO Auto-generated method stub
System.out.println("onScroll");
return false;
}
//长按,手指按住持续一段时间,并且没有松开
@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onLongPress");
}
//抛掷:快速滑动的时候执行这个方法,并且松开的动作
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// TODO Auto-generated method stub
System.out.println("onFling");
return false;
}
}

效果图：



现在再实现另外一个功能~

长按跳转到电子翻书效果的一个界面~

只需要在onLongPress方法中添加几行代码就行了~

//长按,手指按住持续一段时间,并且没有松开
@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
System.out.println("onLongPress");
Intent intent=new Intent(this,SecondActivity.class);
startActivity(intent);
}

在SecondActivity的这个界面中，实现了电子翻书的效果-动画左右滑动效果

其实也就是使用了补件动画的知识~

还使用ViewFlipper实现了动画的左右滑动效果

步骤如下：

在res文件下新建anim文件

在anim文件夹下面新建了4个xml文件，分别是next_in,next_off,pre_in,pre_off,分别代表的意思是下一张图片向左进来，这一张图片向左出去，上一张图片向右进来，这一张图片向右出去

代码如下：

next_in:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="100%p"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0">

</translate>

next_off:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="-100%p"
android:toYDelta="0">

</translate>

pre_in:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="-100%p"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0">

</translate>

pre_off:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%p"
android:toYDelta="0">
</translate>

MainActivity：

public class SecondActivity extends Activity implements OnGestureListener{

//电子翻书动作

private ViewFlipper mViewFlipper;
private GestureDetector mGestureDetector;
private Animation[] animations=new Animation[4];

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
animations[0]=AnimationUtils.loadAnimation(this, R.anim.next_in);
animations[1]=AnimationUtils.loadAnimation(this, R.anim.next_off);
animations[2]=AnimationUtils.loadAnimation(this, R.anim.pre_in);
animations[3]=AnimationUtils.loadAnimation(this, R.anim.pre_off);
mGestureDetector=new GestureDetector(this, this);
mViewFlipper=(ViewFlipper) findViewById(R.id.vf);
mViewFlipper.addView(getImageView(R.drawable.a1));
mViewFlipper.addView(getImageView(R.drawable.a2));
mViewFlipper.addView(getImageView(R.drawable.a3));
}

private ImageView getImageView(int resId){
ImageView imageView=new ImageView(this);
imageView.setImageResource(resId);
return imageView;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return mGestureDetector.onTouchEvent(event);
}
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}

@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub

}

@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
// TODO Auto-generated method stub
return false;
}

@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub
}

/*
*第一个参数:按下的触点
*第二个参数:抬起的触点
*第三个参数:在x轴的滑动速度
*第四个:在y轴的滑动速度
*/
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// TODO Auto-generated method stub
//50是误差值
if(e2.getX()-e1.getX()>50){
//从左向右滑
//这一页向右出去
mViewFlipper.setOutAnimation(animations[3]);
//上一页进来
mViewFlipper.setInAnimation(animations[2]);
mViewFlipper.showPrevious();
}else if(e1.getX()-e2.getX()>50){
//从右向左滑
//这一页向左出去
mViewFlipper.setOutAnimation(animations[1]);
//下一页向左进来
mViewFlipper.setInAnimation(animations[0]);
mViewFlipper.showNext();
}
return false;
}
}

效果图如下：



现在在实现另外一个功能~俩点的触摸使图片变大变小

这个是要到真机上测试的~

一样在SecondActivity中的onLongPress方法中添加跳转到ThirdActivity的代码，这里我就不写了~

在ThirdActivity中，通过手指的距离来控制图片的大小

我就不详细说了，代码如下：

public class ThirdACtivity extends Activity implements OnGestureListener{

private ImageView image;
private GestureDetector mGestureDetector;
private float lastCurrent=-1f;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_third_activity);
image=(ImageView) findViewById(R.id.image);
mGestureDetector=new GestureDetector(this, this);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
return mGestureDetector.onTouchEvent(event);
}

@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
lastCurrent=-1f;
return false;
}

@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub

}

@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
// TODO Auto-generated method stub
if (e2.getPointerCount()==2) {
float x=e2.getX(0)-e2.getX(1);
float y=e2.getY(0)-e2.getY(1);
float current=(float) Math.sqrt(x*x+y*y);
if(lastCurrent<0){
lastCurrent=current;
}else{
RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) image.getLayoutParams();
if (lastCurrent-current>2) {
//俩点距离变小
System.out.println("缩小");
lastCurrent=current;
//缩小
params.width=(int) (0.9*image.getWidth());
params.height=(int) (0.9*image.getHeight());
//缩小最小到100
if(params.width>100){
image.setLayoutParams(params);
}
} else if(current-lastCurrent>2){
//俩点距离变大
System.out.println("放大");
lastCurrent=current;
//放大
params.width=(int) (1.1*image.getWidth());
params.height=(int) (1.1*image.getHeight());
//放大最大到1000
if(params.width<1000){
image.setLayoutParams(params);
}
}
}
}
return true;
}

@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub

}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
// TODO Auto-generated method stub
return false;
}

}

效果图不好贴~我就不贴了

源码：http://download.csdn.net/detail/qq_33642117/9585069