在學習觸控監聽以及手勢檢測後，可以製作一個簡單的電子相簿。實際是一個ViewFlipper容器，裡面放了5張圖片，從右向左划動，看下一張圖片，從左向右划動，看上一張圖片。

目錄

知識要點：

Java程式碼方法步驟

activity_main程式碼

MainActivity.java程式碼

---

 

知識要點：

estureDetector//手勢檢測類
GestureDetector.OnGestureListener//監聽類

ViewFlipper元件//使用動畫切換多個元件的效果
showPrevious();顯示以前一張照片的方法
shuowNext();//顯示下一張圖片

 

Java程式碼方法步驟

第一步：讓MainActivity實現GestureOverlayView.OnGestureListener介面，並實現其所有方法。

第二步：定義一個全域性的手勢檢測器

第三步：將要顯示的圖片載入到ViewFlipper中，並且初始化動畫陣列。

第四步：在onFling()方法中通過觸控事件的X座標判斷是向左滑動還是向右滑動，並且為其設定動畫。

第五步：將Activity上的觸控事件交給GestureDetector處理。

位移動畫可參考http://www.cnblogs.com/bavariama/archive/2013/01/29/2881225.html

left_in.xml，圖片從右向左滑動時的動畫,View進入螢幕時候使用的動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
               android:duration="500"/>
    <alpha android:fromAlpha="0.1" android:toAlpha="1.0"
           android:duration="500"/>
    <scale android:fromXScale="0.01"
           android:toXScale="0.01"
           android:toYScale="1.0"
           android:duration="500"
           android:pivotX="50%"
           android:pivotY="50%"
           android:fillAfter="true"
    />


</set>

 

left_out.xmll，圖片從右向左滑動時的動畫,View退出螢幕時候使用的動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0" android:toXDelta="100%p"
           android:duration="500"/>
<alpha android:fromAlpha="0.1" android:toAlpha="1.0"
       android:duration="500"/>
<scale android:fromXScale="0.01"
       android:toXScale="0.01"
       android:toYScale="1.0"
       android:duration="500"
       android:pivotX="50%"
       android:pivotY="50%"
       android:fillAfter="true"
/>


</set>

還有righ_in和right_out和left相似可參考http://www.cnblogs.com/bavariama/archive/2013/01/29/2881225.html學習，在這裡就不寫了。

activity_main程式碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">


    <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    </ViewFlipper>


</LinearLayout>

MainActivity.java程式碼

package com.example.a13468.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;


//第一步：讓MainActivity實現GestureOverlayView.OnGestureListener介面，並實現其所有方法
public class MainActivity extends Activity implements GestureDetector.OnGestureListener {
    Animation[] animations = new Animation[4];//動畫切換
    final int distance = 50;//用於手勢記錄兩點之間的最小距離
    //圖片陣列
    private int[] images = new int[]{
            R.mipmap.photo1, R.mipmap.photo2, R.mipmap.photo3, R.mipmap.photo4,
            R.mipmap.photo5,
    };
    ViewFlipper flipper;//圖片切換元件

    //第二步：定義一個全域性的手勢檢測器
    GestureDetector detector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //對全域性手勢檢測器經行初始化
        detector = new GestureDetector(MainActivity.this, (GestureDetector.OnGestureListener) this);

        //第三步：將要顯示的圖片載入到ViewFlipper中，並且初始化動畫陣列

        flipper = findViewById(R.id.flipper);

        /**
         * 要載入的圖片顯示到ViewFlipper中
         */
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(images[i]);//指定顯示陣列中每一張照片
            flipper.addView(imageView);
        }
        //對圖片陣列初始化
        //初始化Animation陣列
        animations[0] = AnimationUtils.loadAnimation(this,R.anim.left_in);
        animations[1] = AnimationUtils.loadAnimation(this, R.anim.left_out);
        animations[2] = AnimationUtils.loadAnimation(this, R.anim.right_in);
        animations[3] = AnimationUtils.loadAnimation(this, R.anim.right_out);


    }
    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) {

    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }

    @Override
    public void onLongPress(MotionEvent e) {

    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        //第四步：在onFling()方法中通過觸控事件的X座標判斷是向左滑動還是向右滑動，並且為其設定動畫
        //從右向左
        if(e1.getX()-e2.getX()>distance){
            flipper.setInAnimation(animations[2]);
            flipper.setOutAnimation(animations[1]);
            flipper.showPrevious();//顯示前一張圖片
            return true;
        }else  if(e2.getX()-e1.getX()>distance){
            flipper.setInAnimation(animations[0]);//進入的動畫
            flipper.setOutAnimation(animations[3]);//淡出的動畫
            flipper.showNext();//顯示下一張圖片
            return  true;

        }
        return false;
    }
    //第五步：將Activity上的觸控事件交給GestureDetector處理


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return detector.onTouchEvent(event);
    }
}