Android ViewFlipper触摸动画

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