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

左右滑动跳转页面好像不是很常见,不知道是习惯问题还是什么原因。但是在使用一些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了,整个实现过程还是很优雅的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,264评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,549评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,389评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,616评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,461评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,351评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,776评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,414评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,722评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,381评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,787评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2 336