利用GestureDetector快速实现页面切换滑动效果

时间：2021-10-28 17:58:35

先前在写一个测试项目的时候用到了页面切换之间的效果，用的是GestureDetector手势识别器实现的，最后交由onTouchEvent方法来托管手势识别器实现页面的左右滑动，实现起来也很简单。
以下是实现步骤：
首先是两个活动的xml文件，这里仅作简单示例，因为两个文件几乎相同，所以贴上第一个的。

<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:background="#ff88EE" >

<TextView
 android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="我是第一个页面，快往左滑我到第二个页面" />

</LinearLayout>

第二个页面仅仅是背景颜色和文字不同。

接下来是第一个页面的实现代码：FirstActivity.java

package com.example.gestureslidingdemo;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.widget.Toast;

public class FirstActivity extends Activity {
// 手势识别器
private GestureDetector mDetector;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first);

        mDetector = new GestureDetector(this, new SimpleOnGestureListener() {

/**
 * 监听手势滑动事件:e1表示滑动的起点，e2表示滑动终点， velocityX表示水平速度， velocityY表示垂直速度
 */
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2,
float velocityX, float velocityY) {

// 判断纵向滑动是否过大，过大的话不允许切换界面
if (Math.abs(e2.getRawY() - e1.getRawY()) > 200) {
                    Toast.makeText(FirstActivity.this, "不能这样划哦",
                            Toast.LENGTH_SHORT).show();
return true;
                }

// 判断滑动是否龟速，如果速度过慢也不允许滑动到另一页
if (Math.abs(velocityX) < 100) {
                    Toast.makeText(FirstActivity.this, "滑动太龟速哦",
                            Toast.LENGTH_SHORT).show();
return true;
                }

// 向右滑动,上一页
if (e2.getRawX() - e1.getRawX() > 200) {
                    showPreviousPage();
return true;
                }
// 向左滑动,下一页
if (e1.getRawX() - e2.getRawX() > 200) {
                    showNextPage();
return true;
                }

return super.onFling(e1, e2, velocityX, velocityY);
            }
        });
    }

private void showPreviousPage() {
        Toast.makeText(this, "已经是第一页罗，不能再滑拉", Toast.LENGTH_SHORT).show();
    }

private void showNextPage() {
// 在这里跳到第二个页面
        Intent intent = new Intent(this, SecondActivity.class);
        startActivity(intent);
    }

@Override
public boolean onTouchEvent(MotionEvent event) {
// 委托手势识别器处理触摸事件
        mDetector.onTouchEvent(event);
return super.onTouchEvent(event);

    }

}

简单介绍一下里面的代码，具体的作用注释已经很清楚了。主要是实现GestureDetector中的onFling方法，通过判断滑动的起点和终点，以及滑动的速度来判断是否要滑动到下一页或者上一页。
当从第一页滑动到第二页时，是向左滑动，那么终点坐标在起点坐标的左侧（这里的getRawX和getRawY是相对于屏幕左上角作为起点），所以这里用e1-e2得到的是一个正数距离值，并且判断它如果滑动的距离大于200那么就滑动到下一页。如果是向右滑动，则e2在e1的右侧，e2的坐标值是大于e1的，就判断e2-e1的值是否大于200，大于的话则显示一个信息。这里对滑动速度做了限制，如果滑动太慢的话就不让滑动到下一页，是通过横坐标velocityX的速度来做限定的。然后也对滑动的方向做了限制，判断了滑动的时候竖着的方向滑动的距离是否过大，太大了也不允许滑动到下一页。
还有比较重要的一点，最后要重写onTouchEvent方法，表明我们是将GestureDetector的滑动事件直接交给onTouchEvent方法进行代理处理的。
第二个页面的代码和这个几乎一样，这里贴出不一样的点：SecondActivity.java

private void showNextPage() {
        Toast.makeText(this, "已经是第二页罗，滑动不下去了", Toast.LENGTH_SHORT).show();
    }

private void showPreviousPage() {
        Intent intent = new Intent(this, FirstActivity.class);
        startActivity(intent);
    }

这里说明一下：
第一：因为两者共同的代码很多，可以写一个基类，将共同的代码封装，然后把上一页下一页这两个方法抽象出来，交由第一个界面和第二个界面的活动来继承和实现具体的逻辑滑动。
第二：这两个页面的滑动效果太难看了，可以自定义滑动动画。这在下一篇博文中进行完善。

具体的代码可参考下篇博文优化过后的。由于不知道怎么上传动态效果，暂时没上传效果图。
标签：

相关文章