欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android使用手势实现翻页效果

程序员文章站 2023-12-19 14:35:34
本程序的手势检测思路就是把activity的touchevent交给gesturedetector处理,本程序使用了一个viewflipper组件,viewflipper可...

本程序的手势检测思路就是把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——这样就实现了所谓的“翻页”效果。

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

上一篇:

下一篇: