通过手势(GestureDetector)实现翻页效果

功能的实现思路其实不难,就是把Activity的TouchEvent交给GestureDetector处理。功能的实现是通过ViewFlipper组件,ViewFlipper可使用动画控制多个组件之间的切换效果。

下面就是实现的代码

1.activity

package com.example.androidioanddatastore.gesturedetector;

import com.example.androidioanddatastore.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector.OnGestureListener;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

/**
 * 通过手势实现翻页效果
 * @author Administrator
 *
 */
public class GestureFlipActivity extends Activity implements OnGestureListener {
	/**ViewFlipper实例*/
	private ViewFlipper mViewFlipper;
	/**定义手势检测器实例*/
	private GestureDetector mDetector;
	
	/**定义一个动画数组,用于为ViewFlipper指定切换动画效果*/
	private Animation[] mAnimations = new Animation[4];
	/**定义手势动作两点之间的最小距离*/
	final int FLIP_DISTANCE = 50;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_gesture_flip);
		//ViewFlipper实例
		mViewFlipper = (ViewFlipper) findViewById(R.id.flipper);
		//创建手势检测器
		mDetector = new GestureDetector(this, this);
		
		//为ViewFlipper组件添加5个ImageView组件
		mViewFlipper.addView(addImageView(R.drawable.ic_launcher));
		mViewFlipper.addView(addImageView(R.drawable.ic_menu_back));
		mViewFlipper.addView(addImageView(R.drawable.ic_menu_copy));
		mViewFlipper.addView(addImageView(R.drawable.ic_menu_copy_holo_light));
		
		//初始化Animation数组
		mAnimations[0] = AnimationUtils.loadAnimation(this, R.anim.left_in);
		mAnimations[1] = AnimationUtils.loadAnimation(this, R.anim.left_out);
		mAnimations[2] = AnimationUtils.loadAnimation(this, R.anim.right_in);
		mAnimations[3] = AnimationUtils.loadAnimation(this, R.anim.right_out);
	}
	
	/**
	 * 定义添加ImageView的方法
	 * @param resId
	 * @return
	 */
	private ImageView addImageView(int resId){
		ImageView imageView = new ImageView(this);
		imageView.setImageResource(resId);
		imageView.setScaleType(ImageView.ScaleType.CENTER);
		return imageView;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		//将activity上面的触碰事件交给GestureDetector处理
		return mDetector.onTouchEvent(event);
	}
	
	@Override
	public boolean onDown(MotionEvent e) {
		return false;
	}

	@Override
	public void onShowPress(MotionEvent e) {
	}

	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		return false;
	}

	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		return false;
	}

	@Override
	public void onLongPress(MotionEvent e) {
	}

	@Override
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		//如果第一个触点事件的X坐标减去第二个触点事件的X坐标大于FLIP_DISTANCE
		//也就是手势从右往左滑
		if(e1.getX() - e2.getX() > FLIP_DISTANCE){
			//为ViewFlipper设置切换的动画效果
			mViewFlipper.setInAnimation(mAnimations[0]);
			mViewFlipper.setOutAnimation(mAnimations[1]);
			mViewFlipper.showPrevious();
			return true;
		}
		//如果第二个触点事件的X坐标减去第一个触点事件的X坐标大于FLIP_DISTANCE
		//也就是手势从左往右滑
		else if(e2.getX() - e1.getX() > FLIP_DISTANCE){
			//为ViewFlipper设置切换的动画效果
			mViewFlipper.setInAnimation(mAnimations[2]);
			mViewFlipper.setOutAnimation(mAnimations[3]);
			mViewFlipper.showNext();
			return true;
		}
		return false;
	}

}
2.xml布局文件



    
    


里面因为用到了view组件相互之间的切换效果,所以这里有四个平移动画

1.left_in.xml



    

2.left_out.xml



    


3.right_in.xml



    

4.right_out.xml



    



这里的主要实现思路就是,当前一个触点的X坐标,跟后一个触点的X坐标对比,当大于特定值,及判断为从右往左,或者从左往右进行滑动。。。。

OK,代码也贴完了,也不早了,偶们就睡觉了!各位晚安。
















你可能感兴趣的:(Android)