Android使用手势实现翻页效果

本程序的手势检测思路就是把activity的touchevent交给gesturedetector处理，本程序使用了一个viewflipper组件，viewflipper可使用动画控制多个组件之间的切换效果。

本实例程序通过gesturedetector来检测用户的手势动作，并根据手势动作来控制viewflipper包含的view组件的切换，从而实现翻页效果。

activity_main.xml布局界面代码：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <!-- 定义viewflipper组件 -->
  <viewflipper
    android:id="@+id/flipper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</linearlayout>

mainactivity.java逻辑代码：

package com.fukaimei.gestureflip;

import android.support.v7.app.appcompatactivity;
import android.os.bundle;
import android.view.gesturedetector;
import android.view.motionevent;
import android.view.view;
import android.view.animation.animation;
import android.view.animation.animationutils;
import android.widget.imageview;
import android.widget.viewflipper;

public class mainactivity extends appcompatactivity implements gesturedetector.ongesturelistener {

  // viewflipper实例
  viewflipper flipper;
  // 定义手势检测实例
  gesturedetector detector;
  // 定义一个动画数组，用于为viewflipper指定切换动画效果
  animation[] animations = new animation[4];
  // 定义手势动作亮点之间的最小距离
  final int flip_distance = 50;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    // 创建手势检测器
    detector = new gesturedetector(this, this);
    // 获得viewflipper实例
    flipper = (viewflipper) this.findviewbyid(r.id.flipper);
    // 为viewflipper添加8个imageview组件
    flipper.addview(addimageview(r.drawable.img01));
    flipper.addview(addimageview(r.drawable.img02));
    flipper.addview(addimageview(r.drawable.img03));
    flipper.addview(addimageview(r.drawable.img04));
    flipper.addview(addimageview(r.drawable.img05));
    flipper.addview(addimageview(r.drawable.img06));
    flipper.addview(addimageview(r.drawable.img07));
    flipper.addview(addimageview(r.drawable.img08));
    // 初始化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);
  }

  // 定义添加imageview的工具方法
  private view addimageview(int resid) {
    imageview imageview = new imageview(this);
    imageview.setimageresource(resid);
    imageview.setscaletype(imageview.scaletype.center);
    return imageview;
  }

  @override
  public boolean ontouchevent(motionevent event) {
    // 将该activity上的触碰事件交给gesturedetector处理
    return detector.ontouchevent(event);
  }

  @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) {
    // 如果第一个触点事件的x坐标大于第二个触点事件的x坐标超过flip_distance
    // 也就是手势从右向左滑
    if (e1.getx() - e2.getx() > flip_distance) {
      // 为flipper设置切换的动画效果
      flipper.setinanimation(animations[0]);
      flipper.setoutanimation(animations[1]);
      flipper.showprevious();
      return true;
    }
    // 如果第二个触点事件的x坐标大于第一个触点事件的x坐标超过flip_distance
    // 也就是手势从右向左滑
    else if (e2.getx() - e1.getx() > flip_distance) {
      // 为flipper设置切换的动画效果
      flipper.setinanimation(animations[2]);
      flipper.setoutanimation(animations[3]);
      flipper.shownext();
      return true;
    }
    return false;
  }
}

anim/left_in.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromxdelta="100%p"
    android:toxdelta="0" />
  <alpha
    android:duration="500"
    android:fromalpha="0.1"
    android:toalpha="1.0" />
</set>  

anim/left_out.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromxdelta="0"
    android:toxdelta="-100%p" />
  <alpha
    android:duration="500"
    android:fromalpha="0.1"
    android:toalpha="1.0" />
</set> 

anim/right_in.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromxdelta="-100%p"
    android:toxdelta="0" />
  <alpha
    android:duration="500"
    android:fromalpha="0.1"
    android:toalpha="1.0" />
</set>

anim/right_out.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:duration="500"
    android:fromxdelta="0"
    android:toxdelta="100%p" />
  <alpha
    android:duration="500"
    android:fromalpha="0.1"
    android:toalpha="1.0" />
</set> 

上面的mainactivity.java逻辑代码只是实现了gesturedetector.ongesturelistener的onfling()方法，上面的程序的代码负责实现：当e1.getx() - e2.getx()的距离大于特定距离时，即可判断用户手势为从右向左滑动，此时设置viewflipper采用动画方式切换为上一个view；当e2.getx() - e2.getx()的距离大于特定距离时，即可判断用户手势为从左向右滑动，此时设置viewflipper采用动画方式切换为下一个view——这样就实现了所谓的“翻页”效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。