android手势识别ViewFlipper触摸动画-CSDN博客

本文介绍如何在Androd应用中实现主页面的左右拖动切换效果。通过使用ViewFlipper结合GestureDetector，可以轻松地为应用添加流畅的页面切换动画。文中提供了详细的代码示例。

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

代码片段(3)

[代码] layout

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

[代码] ViewFlipper

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

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

view source 
      
print?

 
       001 package com.ideasandroid.demo;
 
       002  
 
       003 import android.app.Activity;
 
       004 import android.os.Bundle;
 
       005 import android.view.GestureDetector;
 
       006 import android.view.MotionEvent;
 
       007 import android.view.View;
 
       008 import android.view.GestureDetector.OnGestureListener;
 
       009 import android.view.View.OnTouchListener;
 
       010 import android.view.animation.AccelerateInterpolator;
 
       011 import android.view.animation.Animation;
 
       012 import android.view.animation.TranslateAnimation;
 
       013 import android.widget.ViewFlipper;
 
       014 public class ViewFlipperDemo extends Activity implementsOnGestureListener,OnTouchListener{
 
       015     private ViewFlipper mFlipper;
 
       016     GestureDetector mGestureDetector;
 
       017     private int mCurrentLayoutState;
 
       018     private static final int FLING_MIN_DISTANCE = 100;
 
       019     private static final int FLING_MIN_VELOCITY = 200;
 
       020  
 
       021     @Override
 
       022     public void onCreate(Bundle savedInstanceState) {
 
       023         super.onCreate(savedInstanceState);
 
       024         setContentView(R.layout.main);
 
       025         mFlipper = (ViewFlipper) findViewById(R.id.flipper);
 
       026         //注册一个用于手势识别的类
 
       027         mGestureDetector = new GestureDetector(this);
 
       028         //给mFlipper设置一个listener
 
       029         mFlipper.setOnTouchListener(this);
 
       030         mCurrentLayoutState = 0;
 
       031         //允许长按住ViewFlipper,这样才能识别拖动等手势
 
       032         mFlipper.setLongClickable(true);
 
       033     }
 
       034  
 
       035     /**
 
       036      * 此方法在本例中未用到，可以指定跳转到某个页面
 
       037      * @param switchTo
 
       038      */
 
       039     public void switchLayoutStateTo(int switchTo) {
 
       040         while (mCurrentLayoutState != switchTo) {
 
       041             if (mCurrentLayoutState > switchTo) {
 
       042                 mCurrentLayoutState--;
 
       043                 mFlipper.setInAnimation(inFromLeftAnimation());
 
       044                 mFlipper.setOutAnimation(outToRightAnimation());
 
       045                 mFlipper.showPrevious();
 
       046             } else {
 
       047                 mCurrentLayoutState++;
 
       048                 mFlipper.setInAnimation(inFromRightAnimation());
 
       049                 mFlipper.setOutAnimation(outToLeftAnimation());
 
       050                 mFlipper.showNext();
 
       051             }
 
       052  
 
       053         }
 
       054         ;
 
       055     }
 
       056  
 
       057     /**
 
       058      * 定义从右侧进入的动画效果
 
       059      * @return
 
       060      */
 
       061     protected Animation inFromRightAnimation() {
 
       062         Animation inFromRight = new TranslateAnimation(
 
       063                 Animation.RELATIVE_TO_PARENT, +1.0f,
 
       064                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       065                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       066                 Animation.RELATIVE_TO_PARENT, 0.0f);
 
       067         inFromRight.setDuration(500);
 
       068         inFromRight.setInterpolator(new AccelerateInterpolator());
 
       069         return inFromRight;
 
       070     }
 
       071  
 
       072     /**
 
       073      * 定义从左侧退出的动画效果
 
       074      * @return
 
       075      */
 
       076     protected Animation outToLeftAnimation() {
 
       077         Animation outtoLeft = new TranslateAnimation(
 
       078                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       079                 Animation.RELATIVE_TO_PARENT, -1.0f,
 
       080                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       081                 Animation.RELATIVE_TO_PARENT, 0.0f);
 
       082         outtoLeft.setDuration(500);
 
       083         outtoLeft.setInterpolator(new AccelerateInterpolator());
 
       084         return outtoLeft;
 
       085     }
 
       086  
 
       087     /**
 
       088      * 定义从左侧进入的动画效果
 
       089      * @return
 
       090      */
 
       091     protected Animation inFromLeftAnimation() {
 
       092         Animation inFromLeft = new TranslateAnimation(
 
       093                 Animation.RELATIVE_TO_PARENT, -1.0f,
 
       094                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       095                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       096                 Animation.RELATIVE_TO_PARENT, 0.0f);
 
       097         inFromLeft.setDuration(500);
 
       098         inFromLeft.setInterpolator(new AccelerateInterpolator());
 
       099         return inFromLeft;
 
       100     }
 
       101  
 
       102     /**
 
       103      * 定义从右侧退出时的动画效果
 
       104      * @return
 
       105      */
 
       106     protected Animation outToRightAnimation() {
 
       107         Animation outtoRight = new TranslateAnimation(
 
       108                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       109                 Animation.RELATIVE_TO_PARENT, +1.0f,
 
       110                 Animation.RELATIVE_TO_PARENT, 0.0f,
 
       111                 Animation.RELATIVE_TO_PARENT, 0.0f);
 
       112         outtoRight.setDuration(500);
 
       113         outtoRight.setInterpolator(new AccelerateInterpolator());
 
       114         return outtoRight;
 
       115     }
 
       116  
 
       117     public boolean onDown(MotionEvent e) {
 
       118         // TODO Auto-generated method stub
 
       119         return false;
 
       120     }
 
       121  
 
       122     /*
 
       123      * 用户按下触摸屏、快速移动后松开即触发这个事件
 
       124      * e1：第1个ACTION_DOWN MotionEvent
 
       125      * e2：最后一个ACTION_MOVE MotionEvent
 
       126      * velocityX：X轴上的移动速度，像素/秒
 
       127      * velocityY：Y轴上的移动速度，像素/秒
 
       128      * 触发条件 ：
 
       129      * X轴的坐标位移大于FLING_MIN_DISTANCE，且移动速度大于FLING_MIN_VELOCITY个像素/秒
 
       130      */
 
       131     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
 
       132             float velocityY) {
 
       133         if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE
 
       134                 && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
 
       135             // 当像左侧滑动的时候
 
       136             //设置View进入屏幕时候使用的动画
 
       137             mFlipper.setInAnimation(inFromRightAnimation());
 
       138             //设置View退出屏幕时候使用的动画
 
       139             mFlipper.setOutAnimation(outToLeftAnimation());
 
       140             mFlipper.showNext();
 
       141         } else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE
 
       142                 && Math.abs(velocityX) > FLING_MIN_VELOCITY) {
 
       143             // 当像右侧滑动的时候
 
       144             mFlipper.setInAnimation(inFromLeftAnimation());
 
       145             mFlipper.setOutAnimation(outToRightAnimation());
 
       146             mFlipper.showPrevious();
 
       147         }
 
       148         return false;
 
       149     }
 
       150  
 
       151     public void onLongPress(MotionEvent e) {
 
       152         // TODO Auto-generated method stub
 
       153  
 
       154     }
 
       155  
 
       156     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
 
       157             float distanceY) {
 
       158         return false;
 
       159     }
 
       160  
 
       161     public void onShowPress(MotionEvent e) {
 
       162         // TODO Auto-generated method stub
 
       163  
 
       164     }
 
       165  
 
       166     public boolean onSingleTapUp(MotionEvent e) {
 
       167         // TODO Auto-generated method stub
 
       168         return false;
 
       169     }
 
       170     public boolean onTouch(View v, MotionEvent event) {
 
       171         // 一定要将触屏事件交给手势识别类去处理（自己处理会很麻烦的）
 
       172         return mGestureDetector.onTouchEvent(event);
 
       173     }
 
       174 }