Android手势识别ViewFlipper触摸动画

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

Android View

首先来看看我们的layout，如下所示：

<linearlayout androidandroid: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。

ViewFlipper中的四个layout很简单，我们就放置一张图片，如下所示：

<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。具体的代码如下所示，代码中都有相应的注释，这里就不再详述。

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 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);  
    }  
}  
 

希望本文对您有所帮助！

【编辑推荐】

1. 在Android开发中使用Gallery实现“多级联动”
2. 在Android中实现service动态更新UI界面
3. Android数据库事务浅析
4. Android的UI设计与后台线程交互
5. Android触屏textview及listview对比验证