现在的位置: 首页 > 综合 > 正文

GestureDetector的实现 (GestureDetector.OnDoubleTapListener GestureDetector.OnGestureListener)

2014年03月02日 ⁄ 综合 ⁄ 共 10914字 ⁄ 字号 评论关闭

GestureDetector的使用 GestureDetector.OnDoubleTapListener GestureDetector.OnGestureListener

   屏幕的切换是指在一个Activity中切换不同的View,而不是Activity的跳转。最常见的就是FrameLayout包含多个View,例如FrameLayout包含一个系统设置页面和一个个性化页面。

    android.widget.ViewAnimator类继承至FrameLayout,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。该类有如下几个和动画相关的函数:
l、setInAnimation:设置View进入屏幕时候使用的动画,该函数有两个版本,一个接受单个参数,类型为android.view.animation.Animation;一个接受两个参数,类型为Context和int,分别为Context对象和定义Animation的resourceID。
2、setOutAnimation: 设置View退出屏幕时候使用的动画,参数setInAnimation函数一样。
3、showNext: 调用该函数来显示FrameLayout里面的下一个View。
4、showPrevious: 调用该函数来显示FrameLayout里面的上一个View。
 
一般不直接使用ViewAnimator而是使用它的两个子类ViewFlipper和ViewSwitcher。ViewFlipper可以用来指定FrameLayout内多个View之间的切换效果,可以一次指定也可以每次切换的时候都指定单独的效果。该类额外提供了如下几个函数:
 
isFlipping: 用来判断View切换是否正在进行
setFilpInterval:设置View之间切换的时间间隔
startFlipping:使用上面设置的时间间隔来开始切换所有的View,切换会循环进行
stopFlipping: 停止View切换
ViewSwitcher 顾名思义Switcher特指在两个View之间切换。可以通过该类指定一个ViewSwitcher.ViewFactory 工程类来创建这两个View。该类也具有两个子类ImageSwitcher、TextSwitcher分别用于图片和文本切换。
在教程中通过示例介绍ViewFlipper 的使用,其他的使用方式是类似的。

 

示例:

ViewFlipper是继承FrameLayout,在他的一个Layout中可以添加多个View对象在示例中定义一个ViewFlipper,里面包含三个ViewGroup作为示例的三个屏幕,每个ViewGroup中包含一个按钮和一张图片,点击按钮则显示下一个屏幕。代码如下(res\layout\main.xml):

<ViewFlipper 
	    xmlns:android="http://schemas.android.com/apk/res/android"
    	xmlns:tools="http://schemas.android.com/tools"
	    android:id="@+id/mViewFlipper"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:persistentDrawingCache="animation"
	    android:flipInterval="1000"
	    android:inAnimation="@anim/left_push_in"
	    android:outAnimation="@anim/left_push_out">
	    
	    <FrameLayout 
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	        
	        <ImageView 
	            android:id="@+id/flipper_img1"
	            android:layout_width="match_parent"
	            android:layout_height="wrap_content"
	            android:scaleType="fitXY"
	            android:src="@drawable/phone1"/>
	        <Button 
	            android:id="@+id/flipper_bn1"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_gravity="bottom|center_horizontal"
	            android:alpha="0.5"
	            android:text="@string/next"
	            />
	    </FrameLayout>
	    
	    <FrameLayout 
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	        
	        <ImageView 
	            android:id="@+id/flipper_img2"
	            android:layout_width="match_parent"
	            android:layout_height="wrap_content"
	            android:scaleType="fitXY"
	            android:src="@drawable/phone2"/>
	        <Button 
	            android:id="@+id/flipper_bn2"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_gravity="bottom|center_horizontal"
	            android:alpha="0.5"
	            android:text="@string/next"
	            />
	    </FrameLayout>
	    
	    <FrameLayout 
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	        
	        <ImageView 
	            android:id="@+id/flipper_img3"
	            android:layout_width="match_parent"
	            android:layout_height="wrap_content"
	            android:scaleType="fitXY"
	            android:src="@drawable/phone3"/>
	        <Button 
	            android:id="@+id/flipper_bn3"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_gravity="bottom|center_horizontal"
	            android:alpha="0.5"
	            android:text="@string/next"
	            />
	    </FrameLayout>
	    
</ViewFlipper>

在Layout定义中指定动画的相关属性就可以了,通过persistentDrawingCache指定缓存策略;flipInterval指定每个View动画之间的时间间隔;inAnimation和outAnimation分别指定View进出使用的动画效果。这个动画效果在没有重新设置之前会一直使用,这个就是一次性指定。

动画效果(res/drawable/anim)

(left_push_in.xml)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="500" android:fromXDelta="100.0%p" android:toXDelta="0.0"/>
    <alpha android:duration="500" android:fromAlpha="0.5" android:toAlpha="1.0"/>

</set>
(left_push_out.xml)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="500" android:fromXDelta="0.0" android:toXDelta="-100.0%p"/>
	<alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.5"/>
</set>
(right_push_in.xml)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="500" android:fromXDelta="-100.0%p" android:toXDelta="0.0"/>
    <alpha android:duration="500" android:fromAlpha="0.5" android:toAlpha="1.0"/>

</set>
(right_push_out.xml)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="500" android:fromXDelta="0.0" android:toXDelta="100.0%p"/>
    <alpha android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.5"/>

</set>

Activity程序代码:

package com.example.gesturedemo;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnDoubleTapListener;
import android.view.GestureDetector.OnGestureListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ViewFlipper;
import android.support.v4.app.NavUtils;

public class GestureActivity extends Activity implements OnGestureListener, OnDoubleTapListener {

	private Button bn1, bn2, bn3;
	private ViewFlipper mViewFlipper;
	private GestureDetector mGestureDetector;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mViewFlipper = (ViewFlipper)findViewById(R.id.mViewFlipper);
        bn1 = (Button)findViewById(R.id.flipper_bn1);
        bn1.setOnClickListener(clickListener);
        bn2 = (Button)findViewById(R.id.flipper_bn2);
        bn2.setOnClickListener(clickListener);
        bn3 = (Button)findViewById(R.id.flipper_bn3);
        bn3.setOnClickListener(clickListener);
        mGestureDetector = new GestureDetector(this, this);
        
    }

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



	private OnClickListener clickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			mViewFlipper.showNext();
		}
	};
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

	@Override
	public boolean onDoubleTap(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onDoubleTap---->处理双击事件");
		if (mViewFlipper.isFlipping()) {
			mViewFlipper.stopFlipping();
		}else {
			mViewFlipper.startFlipping();
		}
		return true;
	}

	@Override
	public boolean onDoubleTapEvent(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onDoubleTapEvent----->双击事件中的事件响应");
		return true;
	}

	@Override
	public boolean onSingleTapConfirmed(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onSingleTapConfirmed----->双击事件过长变成单击事件");
		return true;
	}

	@Override
	public boolean onDown(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAg", "onDown------>onGestureDetector对应的事件处理");
		return true;
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onFling----->onGestureDetector对应的滑动事件");
		if (e1.getX() > e2.getX()) {
			mViewFlipper.showNext();
		}else if (e2.getX() > e1.getX()) {
			mViewFlipper.setInAnimation(this, R.anim.right_push_in);
			mViewFlipper.setOutAnimation(this, R.anim.right_push_out);
			mViewFlipper.showPrevious();
			mViewFlipper.setInAnimation(this, R.anim.left_push_in);
			mViewFlipper.setOutAnimation(this, R.anim.left_push_out);
		}else {
			return false;
		}
		return true;
	}

	@Override
	public void onLongPress(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onLongPress---->onGestureDetector");
		
		
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onScroll------>onGestureDetector");
		return true;
	}

	@Override
	public void onShowPress(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onShowPress-------->onGestureDetector");
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onSingleTapUp------->onGestureDetector");
		return true;
	}

    
}

通过手势移动屏幕
上面是通过屏幕上的按钮来在屏幕间切换的,这看起来多少有点不符合OPhone的风格,如果要是能通过手势的左右滑动来实现屏幕的切换就比较优雅了。
通过android.view.GestureDetector类可以检测各种手势事件,该类有两个回调接口分别用来通知具体的事件:
 
GestureDetector.OnDoubleTapListener:用来通知DoubleTap事件,类似于鼠标的双击事件,该接口有如下三个回调函数:
 
1.   onDoubleTap(MotionEvent e):通知DoubleTap手势,
2.   onDoubleTapEvent(MotionEvent e):通知DoubleTap手势中的事件,包含down、up和move事件(这里指的是在双击之间发生的事件,例如在同一个地方双击会产生DoubleTap手势,而在DoubleTap手势里面还会发生down和up事件,这两个事件由该函数通知);
3.   onSingleTapConfirmed(MotionEvent e):用来判定该次点击是SingleTap而不是DoubleTap,如果连续点击两次就是DoubleTap手势,如果只点击一次,OPhone系统等待一段时间后没有收到第二次点击则判定该次点击为SingleTap而不是DoubleTap,然后触发SingleTapConfirmed事件。
GestureDetector.OnGestureListener:用来通知普通的手势事件,该接口有如下六个回调函数:
1.   onDown(MotionEvent e):down事件;
2.   onSingleTapUp(MotionEvent e):一次点击up事件;
3.   onShowPress(MotionEvent e):down事件发生而move或则up还没发生前触发该事件;
4.   onLongPress(MotionEvent e):长按事件;
5.   onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY):滑动手势事件;
6.   onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY):在屏幕上拖动事件。
 
这些事件有些定义的不太容易理解,在示例项目中实现了所有的回调函数,在每个函数中输出相关的日志,对这些事件不理解的可以运行项目,通过不同的操作来触发事件,然后观看logcat输出日志可有助于对这些事件的理解。
 
在上述事件中,如果在程序中处理的该事件就返回true否则返回false,在GestureDetector中也定义了一个SimpleOnGestureListener类,这是个助手类,实现了上述的所有函数并且都返回false。如果在项目中只需要监听某个事件继承这个类可以少些几个空回调函数。
 
要走上面的程序中添加滑动手势来实现屏幕切换的话,首先需要定义一个GestureDetector:
private GestureDetector mGestureDetector;
 
并在onCreate函数中初始化:
mGestureDetector = new GestureDetector(this);
 
参数是OnGestureListener,然后让GestureActivity实现 OnGestureListener 和OnDoubleTapListener接口:

 然后在onFling中实现指甲滑动的处理,实现图片随着滑动切换

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onFling----->onGestureDetector对应的滑动事件");
		if (e1.getX() > e2.getX()) {
			mViewFlipper.showNext();
		}else if (e2.getX() > e1.getX()) {
			mViewFlipper.setInAnimation(this, R.anim.right_push_in);
			mViewFlipper.setOutAnimation(this, R.anim.right_push_out);
			mViewFlipper.showPrevious();
			mViewFlipper.setInAnimation(this, R.anim.left_push_in);
			mViewFlipper.setOutAnimation(this, R.anim.left_push_out);
		}else {
			return false;
		}
		return true;
	}

然后在onDoubleTap中实现双击事件的处理

public boolean onDoubleTap(MotionEvent e) {
		// TODO Auto-generated method stub
		Log.i("TAG", "onDoubleTap---->处理双击事件");
		if (mViewFlipper.isFlipping()) {
			mViewFlipper.stopFlipping();
		}else {
			mViewFlipper.startFlipping();
		}
		return true;
	}

在完成回调函数的设置之后,要保证在Activity中能够处理手势对应的事件,要复写GestureActivity中的onTouchEvent函数,调用GestureDetector的onTouchEvent函数。

public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
    	mGestureDetector.onTouchEvent(event);
		return true;
	}
到这里手势代码就完成了,现在可以通过左右滑动切换View并且双击可以自动切换View。细心的读者这里可能会发现一个问题,上面在创建mGestureDetector 的时候使用的是如下代码:
mGestureDetector = new GestureDetector(this);
 
这里的参数为OnGestureListener,而且GestureDetector有个函数setOnDoubleTapListener来设置OnDoubleTapListener,在上面的代码中并没有设置OnDoubleTapListener,那么onDoubleTap事件是如何调用的呢?这里的玄机就要去探探 GestureDetector(OnGestureListener l)这个构造函数的源代码了:
 
public GestureDetector(OnGestureListener listener) {    
        this(null, listener, null);    
}   

调用了另外一个构造函数:
public GestureDetector(Context context, OnGestureListener listener, Handler handler) {    
       if (handler != null) {    
           mHandler = new GestureHandler(handler);    
       } else {    
           mHandler = new GestureHandler();    
       }    
       mListener = listener;    
       if (listener instanceof OnDoubleTapListener) {    
           setOnDoubleTapListener((OnDoubleTapListener) listener);    
       }    
       init(context);    
注意到listener instanceof OnDoubleTapListener没有?现在明白了吧。

抱歉!评论已关闭.