android手势识别ViewFlipper触摸动画

今天给大家介绍一下如何实现androd主页面的左右拖动效果。实现起来很简单，就是使用ViewFlipper来将您要来回拖动的View装在一起，然 后与GestureDetector手势识别类来联动，确定要显示哪个View，加上一点点动画效果即可。比如当手指向左快速滑动时跳转到上一个 View，手指向右快速滑动时跳转到下一个View，本例中使用图片作为各个View的页面，实现左右快速滑动显示不同的图片。
转自 http://www.ideasandroid.com/archives/414

 

layout

<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
	<viewflipper android:id="@+id/flipper" android:layout_below="@+id/CockpitLayout" android:layout_height="fill_parent" android:layout_width="fill_parent">
		<include android:id="@+id/firstlayout" layout="@layout/first"></include>
		<include android:id="@+id/secondlayout" layout="@layout/second"></include>
		<include android:id="@+id/thirdlayout" layout="@layout/third"></include>
		<include android:id="@+id/fourthlayout" layout="@layout/fourth"></include>
         </viewflipper>
</linearlayout>

 

ViewFlipper

<linearlayout android:gravity="center_vertical" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
    <imageview android:layout_height="wrap_content"  android:layout_width="wrap_content" android:src="@drawable/v1">
    </imageview>
</linearlayout>

 

我们的Activity需要实现两个接口OnGestureListener,OnTouchListener。

package com.ideasandroid.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnTouchListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ViewFlipper;
public class ViewFlipperDemo extends Activity implements OnGestureListener,OnTouchListener{
	private ViewFlipper mFlipper;
	GestureDetector mGestureDetector;
	private int mCurrentLayoutState;
	private static final int FLING_MIN_DISTANCE = 100;
	private static final int FLING_MIN_VELOCITY = 200;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mFlipper = (ViewFlipper) findViewById(R.id.flipper);
		//注册一个用于手势识别的类
		mGestureDetector = new GestureDetector(this);
		//给mFlipper设置一个listener
		mFlipper.setOnTouchListener(this);
		mCurrentLayoutState = 0;
		//允许长按住ViewFlipper,这样才能识别拖动等手势
		mFlipper.setLongClickable(true);
	}

	/**
	 * 此方法在本例中未用到，可以指定跳转到某个页面
	 * @param switchTo
	 */
	public void switchLayoutStateTo(int switchTo) {
		while (mCurrentLayoutState != switchTo) {
			if (mCurrentLayoutState > switchTo) {
				mCurrentLayoutState--;
				mFlipper.setInAnimation(inFromLeftAnimation());
				mFlipper.setOutAnimation(outToRightAnimation());
				mFlipper.showPrevious();
			} else {
				mCurrentLayoutState++;
				mFlipper.setInAnimation(inFromRightAnimation());
				mFlipper.setOutAnimation(outToLeftAnimation());
				mFlipper.showNext();
			}

		}
		;
	}

	/**
	 * 定义从右侧进入的动画效果
	 * @return
	 */
	protected Animation inFromRightAnimation() {
		Animation inFromRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromRight.setDuration(500);
		inFromRight.setInterpolator(new AccelerateInterpolator());
		return inFromRight;
	}

	/**
	 * 定义从左侧退出的动画效果
	 * @return
	 */
	protected Animation outToLeftAnimation() {
		Animation outtoLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		outtoLeft.setDuration(500);
		outtoLeft.setInterpolator(new AccelerateInterpolator());
		return outtoLeft;
	}

	/**
	 * 定义从左侧进入的动画效果
	 * @return
	 */
	protected Animation inFromLeftAnimation() {
		Animation inFromLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromLeft.setDuration(500);
		inFromLeft.setInterpolator(new AccelerateInterpolator());
		return inFromLeft;
	}

	/**
	 * 定义从右侧退出时的动画效果
	 * @return
	 */
	protected Animation outToRightAnimation() {
		Animation outtoRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		outtoRight.setDuration(500);
		outtoRight.setInterpolator(new AccelerateInterpolator());
		return outtoRight;
	}

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

	/*
	 * 用户按下触摸屏、快速移动后松开即触发这个事件
	 * e1：第1个ACTION_DOWN MotionEvent
	 * e2：最后一个ACTION_MOVE MotionEvent
	 * velocityX：X轴上的移动速度，像素/秒
	 * velocityY：Y轴上的移动速度，像素/秒
	 * 触发条件 ：
	 * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒
	 */
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
	            && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
	        // 当像左侧滑动的时候
			//设置View进入屏幕时候使用的动画
			mFlipper.setInAnimation(inFromRightAnimation());
			//设置View退出屏幕时候使用的动画
			mFlipper.setOutAnimation(outToLeftAnimation());
			mFlipper.showNext();
	    } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
	            && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
	    	// 当像右侧滑动的时候
			mFlipper.setInAnimation(inFromLeftAnimation());
			mFlipper.setOutAnimation(outToRightAnimation());
			mFlipper.showPrevious();
	    }
		return false;
	}

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

	}

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

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

	}

	public boolean onSingleTapUp(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}
	public boolean onTouch(View v, MotionEvent event) {
		// 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）
		return mGestureDetector.onTouchEvent(event);
	}
}