Android侧滑原来可以这么优雅

57次阅读

共计 8321 个字符，预计需要花费 21 分钟才能阅读完成。

侧滑手势在 Android App 应用得非常广泛，常见的使用场景包括：滑动抽屉、侧滑删除、侧滑返回、下拉刷新以及侧滑封面等。由于这些使用场景实在是太通用了，各路大神们八仙过海各显神通，每种侧滑场景都开源出了很多非常实用的框架，让我们的业务开发便利了很多。

目前，我们需要为每种场景引入不同的侧滑框架，由于 App 中的侧滑场景很多，我们项目中也就需要引入多个侧滑框架，而每个框架的使用方式各有不同，需要单独学习，团队的学习成本较高。

那么问题来了，有没有一种框架能解决所有侧滑需求呢？

在刚开始学习面向对象编程概念的时候我们就知道一个道理：解决一个软件问题，首先要将它抽象出来。

针对侧滑这个手势，我们能不能将它的概念抽象一下，到底侧滑指的是什么呢？

狭义侧滑：从屏幕的某侧的边缘开始向着远离该边缘的方向滑动
广义侧滑：手指在屏幕上按下之后向着某一侧方向滑动

我的理解是，广义侧滑包含狭义侧滑，只不过是触发区域是否在屏幕边缘的区别罢了。

于是，侧滑的概念就这样被清晰地抽象出来了。

从这个抽象概念可以看出：侧滑手势同一时间只处理上下左右 4 个方向中的一个方向

如果我们将这个抽象概念封装出来，将手势事件的识别、拦截及数据加工在框架内部处理好，并向外实时地输出侧滑方向、距离及相关的回调，理论上我们就可以实现 所有的侧滑需求 了。

至于具体的侧滑效果，学过策略模式的都知道：每一种具体的侧滑效果实现都可以看做是一种侧滑策略。

胸抬，憋急！磨刀不误砍柴工，站在巨人的肩膀上你就有可能比巨人高那么一点点。

Google 在 android support 库中为侧滑菜单的需求提供了 SlidingPaneLayout 和 DrawerLayout 两种实现，看源码会发现两者都是基于 ViewDragHelper 来实现的，那么 ViewDragHelper 又是何方神圣呢？

ViewDragHelper 是 android support 库中的一个工具类。它可以帮助我们处理控件的拖拽，它的使用方式为：先创建一个自定义 ViewGroup，将被拖动的控件添加到这个自定义 ViewGroup 中，并用 ViewDragHelper 来处理控件的拖拽，可以通过 Callback 来指定拖拽区域及捕获子控件的逻辑。

通过阅读 ViewDragHelper 的源码发现，它对 view 在父容器中的拖拽行为进行了封装，通过拦截父容器控件的手势事件，捕获需要拖拽的子控件，并实时根据手指的移动改变它的坐标，从而实现拖拽效果。

ViewDragHelper 封装的很优雅，也很强大，
有些开源侧滑框架也是基于 ViewDragHelper 来实现的, 例如：
ikew0ng/SwipeBackLayout / daimajia/AndroidSwipeLayout

不过，ViewDragHelper 封装的是子控件的拖拽，而不是侧滑，它计算距离的基准是控件的 top 和 left 坐标，虽然可以将其中一个方向（横向或纵向）的拖动范围设置为 0 来模拟侧滑手势，但它不符合我们侧滑手势的抽象定义，无法解决侧滑时不是控件移动的效果。

例如：MIUI 系统侧滑返回效果及小米公司出品的 App 普遍使用的弹性拉伸效果等

既然侧滑已经被清晰地抽象出来了，同样是对触摸滑动事件的处理，我们完全可以借鉴 ViewDragHelper 的思想：将它对子控件的捕获和拖动，改成对侧滑方向的捕获和侧滑距离的计算，并将它的 Callback 改造成侧滑距离的消费者(具体的侧滑效果就看消费者用哪种方式来消费掉这个侧滑距离)。

侧滑行为的 2 个核心要素：

侧滑方向、侧滑距离

根据这个思路，我封装了一个智能的侧滑框架：SmartSwipe，可以解决你所 (chui) 有(niu)的 (bi) 侧滑需求。请大声说出它的 slogan！

当然，这是吹牛逼的！

框架只是封装了侧滑行为事件的捕获、分发及多点交替滑动的处理，具体的侧滑效果（消费侧滑距离的策略）需要你自己来实现。。。哎。。。等等，胸抬，先别走啊！还没说完呢，SmartSwipe 中内置了十多种常见侧滑效果，有动图为证：

// 仿 iOS 的弹性留白效果：// 侧滑时表现为弹性留白效果，结束后自动恢复
SmartSwipe.wrap(view)
    .addConsumer(new SpaceConsumer())
    .enableVertical(); // 工作方向：纵向

// 仿 MIUI 的弹性拉伸效果：// 侧滑时表现为弹性拉伸效果，结束后自动恢复
SmartSwipe.wrap(view)
    .addConsumer(new StretchConsumer())
    .enableVertical(); // 工作方向：纵向

抽屉显示在主 view 之上，类似于 DrawerLayout

SmartSwipe.wrap(view)
    .addConsumer(new DrawerConsumer())    // 抽屉效果
    // 可以设置横向 (左右两侧) 的抽屉为同一个 view
    // 也可以为不同方向分别设置不同的 view
    .setHorizontalDrawerView(menuLayout) 
    .setScrimColor(0x2F000000) // 设置遮罩的颜色
    .setShadowColor(0x80000000)    // 设置边缘的阴影颜色
    ;

抽屉显示在主 view 之下

SmartSwipe.wrap(view)
    .addConsumer(new SlidingConsumer())
    .setHorizontalDrawerView(textView)
    .setScrimColor(0x2F000000)
    // 设置联动系数
    //  0: 不联动，视觉效果为：主体移动后显示下方的抽屉
    //  0~1: 半联动，视觉效果为：抽屉视图按照联动系数与主体之间存在相对移动效果
    //  1: 全联动，视觉效果为：抽屉跟随主体一起移动(pixel by pixel)
    .setRelativeMoveFactor(0.5F) 
    ;

侧滑透明效果，侧滑后可显示被其遮挡的 view，可用作侧滑删除，也可以用来制作封面效果

// 侧滑删除
SmartSwipe.wrap(view)
    .addConsumer(new TranslucentSlidingConsumer())
    .enableHorizontal() // 启用左右两侧侧滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            // 侧滑打开时，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作从 recyclerView 中移除该项
        }
    })
    ;

侧滑时，主 view 保持不动，手指释放时，识别滑动方向及速率，以确定是否执行对应的侧滑逻辑。

//demo：用 StayConsumer 来做 activity 侧滑返回
SmartSwipe.wrap(this)
    .addConsumer(new StayConsumer())
    .enableAllDirections()
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {finish();
        }
    })
    ;

侧滑时主 view 像百叶窗一样打开，透明显示下层的视图。

可用来制作封面、轮播图等

// 用 ShuttersConsumer 实现百叶窗侧滑删除
SmartSwipe.wrap(view)
    .addConsumer(new ShuttersConsumer())
    .enableHorizontal() // 启用左右两侧侧滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            // 侧滑打开时，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作从 recyclerView 中移除该项
        }
    })
    ;

侧滑时，主 view 像开门一样从中间向两边 (上下或左右) 分开，透明显示它下层的视图

可用来制作封面、轮播图等

// 用 DoorConsumer 实现百叶窗侧滑删除
SmartSwipe.wrap(view)
    .addConsumer(new DoorConsumer())
    .enableHorizontal() // 启用左右两侧侧滑
    .addListener(new SimpleSwipeListener(){
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {
            // 侧滑打开时，移除
            ViewParent parent = wrapper.getParent();
            if (parent instanceof ViewGroup) {((ViewGroup) parent).removeView(wrapper);
            }
            //adapter.removeItem(getAdapterPosition());// 也可用作从 recyclerView 中移除该项
        }
    })
    ;

侧滑时，在控件侧滑的边缘显示一个贝塞尔曲线的返回效果

可用于 activity 返回、fragment 返回，也可用于 webview 的返回 / 前进

//activity 侧滑返回
SmartSwipe.wrap(this)
    .addConsumer(new BezierBackConsumer())
    .enableAllDirections()
    .addListener(new SimpleSwipeListener() {
        @Override
        public void onSwipeOpened(SmartSwipeWrapper wrapper, SwipeConsumer consumer, int direction) {finish();
        }
    })
    ;

没错，专为 activity 侧滑返回而作的一种效果，带联动功能

//activity 侧滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivitySlidingBackConsumer(this))
    // 设置联动系数
    .setRelativeMoveFactor(0.5F)
    // 指定可侧滑返回的方向，如：enableLeft() 仅左侧可侧滑返回
    .enableAllDirections() 
    ;

没错，也是专为 activity 侧滑返回而作的一种效果，透明显示前一个 activity

//activity 侧滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivityShuttersBackConsumer(this))
    .setScrimColor(0x7F000000)
    .enableAllDirections()
    ;

没错，这还是一个专为 activity 侧滑返回而作的效果，透明显示前一个 activity

//activity 侧滑返回
SmartSwipe.wrap(this)
    .addConsumer(new ActivitySlidingBackConsumer(this))
    .setRelativeMoveFactor(0.5F)
    .enableAllDirections()
    ;

SmartSwipe 中绝大多数的使用都可以通过链式编程在一行代码内完成，API 的设计风格如下：

SmartSwipe.wrap(...)         //view or Activity
    .addConsumer(...)         // 添加 consumer
    .enableDirection(...)     // 指定 consumer 接收哪个方向的侧滑事件
    .setXxx(...)             //[可选]一些其它设置项
    .addListener(...);         //[可选]给 consumer 添加监听

除了基础的侧滑效果外，为了方便开发者使用，还封装了工具类：SmartSwipeBack 和 SmartSwipeRefresh

全局只需一行代码即可搞定所有 Activity 侧滑返回
可选样式：开门、百叶窗、仿微信、仿 QQ 及仿 MIUI 贝塞尔曲线
无需透明主题
无需继承某个特定的 Activity
不需要侵入 xml 布局文件
也不需要侵入 BaseActivity
支持全屏侧滑和 (/ 或) 边缘侧滑返回
支持上 / 下 / 左 / 右 4 个方向侧滑返回

// 仿手机 QQ 的手势滑动返回
SmartSwipeBack.activityStayBack(application, null);        
// 仿微信带联动效果的透明侧滑返回
SmartSwipeBack.activitySlidingBack(application, null);    
// 侧滑开门样式关闭 activity
SmartSwipeBack.activityDoorBack(application, null);        
// 侧滑百叶窗样式关闭 activity
SmartSwipeBack.activityShuttersBack(application, null);    
// 仿小米 MIUI 系统的贝塞尔曲线返回效果
SmartSwipeBack.activityBezierBack(application, null);

可用于任意 view

//xxxMode 第二个参数为 false，表示工作方向为纵向：下拉刷新 & 上拉加载更多
// 如果第二个参数设置为 true，则表示工作方向为横向：右拉刷新 & 左拉加载更多
SmartSwipeRefresh.drawerMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.behindMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.scaleMode(view, false).setDataLoader(loader);
SmartSwipeRefresh.translateMode(view, false).setDataLoader(loader);

样式	效果图
drawerMode
behindMode
scaleMode
translateMode

header 和 footer 可使用第三方炫酷的自定义 view，如：基于 Ifxcyr/ArrowDrawable 的 ArrowHeader，效果图如下：

这就需要自定义 SwipeConsumer 了，步骤如下：

新建一个类，继承 SwipeConsumer
[可选]在构造方法中进行一些初始化（需要 context 对象才能初始化的属性，可以放在 onAttachToWrapper 方法中初始化）
[可选]如果有额外的捕获逻辑，可以重写父类的 tryAcceptMoving 和tryAcceptSettling方法
[可选]重写 onSwipeAccepted 方法，由于此时已经确定捕获了侧滑事件，并确定好了侧滑的方向(mDirection)，可以为本次侧滑事件做一些初始化工作
[可选]重写 clampDistanceHorizontal 及clampDistanceHorizontal方法，可在满足一定条件下才真正执行侧滑
重写 onDisplayDistanceChanged 方法，执行具体的侧滑的 UI 效果呈现
[可选]如果 UI 呈现效果中包含布局控件的移动，需要重写 onLayout 方法，在此方法中也要按照侧滑后的逻辑进行控件布局定位
重写 onDetachFromWrapper 方法，还原现场，移除当前 consumer 的所有改动痕迹

以框架内置弹性拉伸效果 StretchConsumer 为例

根据侧滑距离，对 contentView 进行缩放和平移，从而实现弹性拉伸效果

代码如下：

public class StretchConsumer extends SwipeConsumer {
    @Override
    public void onDetachFromWrapper() {super.onDetachFromWrapper();
        View contentView = mWrapper.getContentView();
        if (contentView != null) {contentView.setScaleX(1);
            contentView.setScaleY(1);
            contentView.setTranslationX(0);
            contentView.setTranslationY(0);
        }
    }

    @Override
    public void onDisplayDistanceChanged(int distanceXToDisplay, int distanceYToDisplay, int dx, int dy) {View contentView = mWrapper.getContentView();
        if (contentView != null) {if (distanceXToDisplay >= 0 && isLeftEnable() || distanceXToDisplay <= 0 && isRightEnable()) {contentView.setScaleX(1 + Math.abs((float) distanceXToDisplay) / mWidth);
                contentView.setTranslationX(distanceXToDisplay / 2F);
            }
            if (distanceYToDisplay >= 0 && isTopEnable() || distanceYToDisplay <= 0 && isBottomEnable()) {contentView.setScaleY(1 + Math.abs((float) distanceYToDisplay) / mHeight);
                contentView.setTranslationY(distanceYToDisplay / 2F);
            }
        }
    }
}

以上就是实现弹性拉伸效果的全部代码，很简单，不是吗？

能实现所有侧滑效果只存在于理论上，肯定还需要不断地完善，开源出来也是希望能利用开源社区的力量来完善它，让 android 侧滑更简单！

最后，奉上相关链接地址:

源码：https://github.com/luckybilly/SmartSwipe

文档：https://luckybilly.github.io/SmartSwipe-tutorial/ (采用 gitbook 形式精心编写而成)

Demo 下载: https://github.com/luckybilly/SmartSwipe/raw/master/app-release.apk

本文作者：luckybilly

阅读原文

本文为云栖社区原创内容，未经允许不得转载。

正文完

activity android

发表至： java

2019-07-31

0

Java中数组的内存分配

数据结构与算法——单链表练习

关于java:Spring-Boot事务支持

Java™ 教程（原子变量）

阿里云ecssslnginx-实现https访问

Android侧滑原来可以这么优雅

前言

一个框架解决所有侧滑需求？你确定不是在开玩笑？

说的那么玄乎，到底咋弄？

别扯那些没用的，赶紧讲侧滑

关于侧滑，有这一个就够了

1. 一行代码让页面动起来

2. 一行代码让页面具有弹性

3. 一行代码添加滑动抽屉

4. 一行代码添加带联动效果的滑动抽屉

5. 一行代码添加滑动透明效果

6. 一行代码添加侧滑手势识别功能

7. 一行代码添加百叶窗效果

8. 一行代码添加开门效果

9. 一行代码添加贝塞尔曲线返回效果

10. 一行代码添加仿微信 Activity 联动侧滑返回效果

11. 一行代码添加 Activity 百叶窗侧滑返回效果

12. 一行代码添加 Activity 开门侧滑返回效果

怎么都是一行代码？还敢不敢再来点？

一行代码实现全局 Activity 侧滑返回

一行代码添加下拉刷新功能

看起来是蛮 diao 的，可是我要的侧滑效果你这里没有啊

这样看来，也许还真能实现所有侧滑效果诶？

Just My Socks（注册教程内含优惠码）

Android侧滑原来可以这么优雅

前言

一个框架解决所有侧滑需求？你确定不是在开玩笑？

说的那么玄乎，到底咋弄？

别扯那些没用的，赶紧讲侧滑

关于侧滑，有这一个就够了

1. 一行代码让页面动起来

2. 一行代码让页面具有弹性

3. 一行代码添加滑动抽屉

4. 一行代码添加带联动效果的滑动抽屉

5. 一行代码添加滑动透明效果

6. 一行代码添加侧滑手势识别功能

7. 一行代码添加百叶窗效果

8. 一行代码添加开门效果

9. 一行代码添加贝塞尔曲线返回效果

10. 一行代码添加仿微信 Activity 联动侧滑返回效果

11. 一行代码添加 Activity 百叶窗侧滑返回效果

12. 一行代码添加 Activity 开门侧滑返回效果

怎么都是一行代码？还敢不敢再来点？

一行代码实现全局 Activity 侧滑返回

一行代码添加下拉刷新功能

看起来是蛮 diao 的，可是我要的侧滑效果你这里没有啊

这样看来，也许还真能实现所有侧滑效果诶？

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）