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

希望本文對您有所幫助！