左右滑动跳转页面的优雅实现

左右滑动跳转页面好像不是很常见，不知道是习惯问题还是什么原因。但是在使用一些App的时候，发现都有这个左右滑动，使用起来确实方便。不用去点击一些里手指老远的按钮。可能是习惯的问题，就是想不起来去用它，奇怪。

大概长这个样子，很清新很简洁

slide.gif

一、直接但复杂的方式

直接重写onTouchEvent方法，根据用户的点击事件，不断的获取位置，进而判断是否是滑动事件？左滑还是右滑？当然整个过程都是需要自己定义变量来存储当前的和其他位置数据，以及一些计算操作。还是有些稍显复杂的。

这里就不介绍这种方式，why？因为我们追求的是优雅的实现。好吧，其实是因为懒[滑稽笑]。

二、优雅的实现

左滑右滑属于手势操作，那么这里有一个类专门用于检测的手势操作的。那就是GestureDetector。

GestureDetector（手势检测）
用于检测用户的单击、滑动、长按、双击点事件

借助这个类我们可以很容易的实现滑动效果。

1.准备了三个Activity

MainActivity和要滑动过去的两个Activity。
我们主要操作的是MainActivity，其他两个是什么样子都很随意撒。

2.MainActivity

public class MainActivity extends AppCompatActivity{

    GestureDetector mGestureDetector;  //手势检测对象
    private static final String TAG = "MainActivity";
    private   static   final   int  FLING_MIN_DISTANCE =  50 ;//滑动最小的距离
    private   static   final   int  FLING_MIN_VELOCITY =  0 ;//滑动最小的速度
    
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mGestureDetector = new  GestureDetector(this,new MyGestureListener());
     
    }
    
     @Override
    public boolean onTouchEvent(MotionEvent event) {
        return mGestureDetector.onTouchEvent(event);
    }
}

可以看到MainActivity里的内容是很简单的。
主要做了两件事：

（1）在onCreate方法里实例化对象

mGestureDetector = new  GestureDetector(this,new MyGestureListener());

可以看到方法参数里有实例化了一个MyGestureListener对象，MyGestureListener是干什么的呢？这个就是监测手势是否滑动的实现，后面会详细说这个。

（2）重写onTouchEvent方法

点击事键的处理转移到手势检测的事件中

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

3.MyGestureListener

这里就是实现监听手势操作的具体实现了

（1）首先让它继承GestureDetector里的SimpleOnGestureListener类。

class  MyGestureListener extends  GestureDetector.SimpleOnGestureListener{

}

这个SimpleOnGestureListener里面有一些手势操作的方法,比如单击、长按等，其中onFiling是我们这里要关注的点。我们的滑动检测就需要重写这个方法。先看看这个类的实现。

  public static class SimpleOnGestureListener implements OnGestureListener, OnDoubleTapListener,OnContextClickListener {
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        public void onLongPress(MotionEvent e) {
        }

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

        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            return false;
        }

        public void onShowPress(MotionEvent e) {
        }

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

（2）重点就是如何检测滑动手势了

我们需要重写onFling方法，这个方法里有四个参数，

前两个参数表示你滑动开始和滑动结束时的事件对象，
后两个参数表示你滑动开始和滑动结束时的速度对象

之后通过前两个参数可以获取滑动开始和结束时所在的位置并通过这个位置计算得到滑动距离，然后和你定义的最短滑动距离一比较来确定是否是一次滑动。

还可以通过后两个参数获取滑动的速度和你定义的最小滑动速度比较，判断是否是一次成功的滑动。

当然也可以通过滑动前的位置和滑动后的位置之差来确定是向左还是向右滑动。完整代码如下：

class  MyGestureListener extends  GestureDetector.SimpleOnGestureListener{
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (e1.getX()-e2.getX()>FLING_MIN_DISTANCE&&Math.abs(velocityX)>FLING_MIN_VELOCITY){
            Toast.makeText(MainActivity.this, "向左手势", Toast.LENGTH_SHORT).show();
            Intent leftIntent=new Intent(MainActivity.this,LeftActivity.class);
            startActivity(leftIntent);
            //滑动动画
            overridePendingTransition(R.anim.in_from_right,
                    R.anim.out_to_left);
        }else if(e2.getX()-e1.getX()>FLING_MIN_DISTANCE&&Math.abs(velocityX)>FLING_MIN_VELOCITY){
            Toast.makeText(MainActivity.this, "向右手势", Toast.LENGTH_SHORT).show();
            Intent rightIntent=new Intent(MainActivity.this,RightActivity.class);
            startActivity(rightIntent);
              //滑动动画
            overridePendingTransition(R.anim.in_from_left,
                    R.anim.out_to_right);
        }
        return false;
    }
}

（3）在代码里跳转活动的时候我加个滑动动画，让滑动看起来更人性化。

动画实现如下：

 overridePendingTransition(R.anim.in_from_right,
                    R.anim.out_to_left);

anim.jpg

in_from_left.xml 从左边进入

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    >
   <translate
       android:duration="1000"
       android:fromXDelta="-100%p"
       android:toXDelta="0%p"
       />
</set>

in_from_right.xml 从右边进入

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
   <translate
       android:duration="1000"
       android:fromXDelta="100%p"
       android:toXDelta="0%p"
       />
</set>

out_to_left.xml 从左边出去

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
   <translate
       android:duration="1000"
       android:fromXDelta="0%p"
       android:toXDelta="-100%p"
       />
</set>

out_ro_right 从右边出去

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator">
    <translate
        android:duration="1000"
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        />
</set>

这样我们就实现了通过左右滑动来跳转Activity了，整个实现过程还是很优雅的。