安卓触摸手势翻页制作电子相册

在学习触摸监听以及手势检测后，可以制作一个简单的电子相册。实际是一个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);
    }
}