Android手势识别ViewFlipper触摸动画

推荐安卓开发神器（里面有各种UI特效和android代码库实例）

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

Java代码：

<linearlayout android android:layout_height="fill_parent"
android:layout_width="fill_parent" 
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"> 

<viewflipper 
androidandroid: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 android:id="@+id/secondlayout" layout="@layout/second"> 
<include android:id="@+id/thirdlayout" layout="@layout/third"> 
<include android:id="@+id/fourthlayout" layout="@layout/fourth"> 
</include>

</include>

</include>

</include>

</viewflipper> 

</linearlayout>

                在ViewFlipper中放置多个layout（接下来会在不同的layout中来回滑动），ViewFlipper在同一个页面就显示其中一个layout。

Java代码：

<linearlayout 
androidandroid:gravity="center_vertical"
android:layout_height="fill_parent" 
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"> 

<imageview 
androidandroid:layout_height="wrap_content"
android:layout_width="wrap_content" 
android:src="@drawable/v1"> 
</imageview>

</linearlayout>

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

Java代码：

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 implementsOnGestureListener,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, floatvelocityX, 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, floatdistanceX, 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); 
} 
}