Android侧滑原来可以这么优雅

前言

侧滑手势在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中内置了十多种常见侧滑效果,有动图为证:

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

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

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

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

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

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

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

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

抽屉显示在主view之下

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

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

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

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

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

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

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

手势识别

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

没错,这还是一个专为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侧滑返回

  • 全局只需一行代码即可搞定所有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);
样式效果图
drawerModedrawerMode
behindModebehindMode
scaleModescaleMode
translateModetranslateMode

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

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

这就需要自定义SwipeConsumer了,步骤如下:

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

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

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

代码如下:

public class StretchConsumer extends SwipeConsumer {@Overridepublic void onDetachFromWrapper() {super.onDetachFromWrapper();View contentView = mWrapper.getContentView();if (contentView != null) {contentView.setScaleX(1);contentView.setScaleY(1);contentView.setTranslationX(0);contentView.setTranslationY(0);}}@Overridepublic 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侧滑更简单!


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/518268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TortoiseGit状态图标不能正常显示的解决办法

文章目录一. 运行环境一、方案11.1. 右键点击桌面空白处&#xff0c;打开TortoiseGit的Settings1.2. 修改Icon Overlays的Status cache1.3. 重启电脑&#xff0c;你就会发现你的小乌龟箭头出来了。二、方案2一. 运行环境 版本说明Windows 10 64bit操作系统TortoiseGit-2.12.0.…

平头哥广发英雄帖,公开首款CPU“玄铁”仿真代码

“在自研芯片的路上&#xff0c;阿里走出了万里长征的第一步。” 7月25日&#xff0c;阿里云峰会上海站&#xff0c;压轴出场的平头哥&#xff0c;交出了时隔10月的首份答卷&#xff1a;玄铁910&#xff08;XuanTie910&#xff09;&#xff0c;目前业界性能最强的RISC-V处理器…

JavaScript-操作BOM对象

BOM&#xff08;Browser Object Model&#xff09;: 浏览器对象模型 浏览器介绍 JavaScript 和 浏览器关系&#xff1f; JavaScript 诞生就是为了能够让他在浏览器中运行&#xff01; 内核&#xff1a; IE 6~11ChromeSafariFireFox 第三方浏览器&#xff08;可以换上面的内核…

一文带你认识keepalived,再带你通关LVS+Keepalived!

来源 | 故事凌责编 | Carol封图 | CSDN 下载于视觉中国昨天我们讲到《那些你不知道的 LVS 秘密》&#xff0c;今天我们就继续一起来进行 LVS 更深的探索&#xff0c;来一起通关 LVSKeepalived吧&#xff01;keepalivedkeepalive的学习参考网站&#xff1a;https://www.keepali…

手把手教你D2C,走向前端智能化

这几年来 AI 来势汹汹&#xff0c;在部分领域应用也逐渐成熟。前端发展至今&#xff0c;我们也有许多成熟的前端解决方案代码&#xff0c;有大量的设计稿&#xff0c;我们是否能够结合智能化的能力将一个 Design 变成一个 Code &#xff08;设计转代码&#xff0c;简称 D2C&…

TortoiseGit 冲突和解决方案_入门试炼_07

文章目录一、张三操作1. 张三新增hello.java2. 提交本地仓库3. 更新项目4. 将本地仓库变动文件提交远程二、李四操作2.1. 编辑Hello.java2.2. 提交三、张三操作23.1. 在hello.java中添加内容3.2. 提交本地仓库3.3. 更新项目至最新版本3.4. 更新最版本异常&#xff08;冲突&…

如何低成本实现Flutter富文本,看这一篇就够了!

作者&#xff1a;闲鱼技术-玄川 背景 闲鱼是国内最早使用Flutter 的团队&#xff0c;作为一个电商App商品详情页是非常重要场景&#xff0c;其中最主要的技术能力是文字混排。 我们面对文本类的需求是复杂而且多变&#xff0c;然而Flutter历史的几个版本&#xff0c;Text只能…

赋能零售成长型企业营销增长,云徙「数盈·新营销中台」发布

巨石崩裂时&#xff0c;有人看见了恐惧&#xff0c;有人看见了光。 因为有光&#xff0c;万物生长。 疫情给每个企业的影响都是巨大的。但在疫情冲击之下&#xff0c;由中台技术推动企业数字化转型&#xff0c;又给企业带来了希望。 从2016年创业至今&#xff0c;云徙科技的每…

TortoiseGit 下载、安装、配置_入门试炼_01

TortoiseGit 简介: TortoiseGit 简称 tgit&#xff0c; 中文名海龟Git。TortoiseGit是一个开放的GIT版本控制系统的源客户端。 文章目录一、软件下载1.1. 下载安装Git1.2. Tortoisegit二、安装流程2.1. 双击安装程序2.2. 直接点击下一步(Next)2.3. Next2.4. 选择安装目录2.5. 点…

ArchSummit分享 | 高德地图App架构演化与实践

讲师介绍 郝仁杰&#xff0c;高德地图无线开发专家。在7月13日落幕的2019年ArchSummit峰会上就高德地图近几年的App架构演化和实践进行了分享。 背景概述 高德是国内领先的数字地图内容、导航和位置服务解决方案提供商&#xff0c;端上分手机和车机两条主线。近年来&#xf…

工程师的灵魂拷问:你的密钥安全吗?

阿里妹导读&#xff1a;密钥管理是密码学应用的核心问题之一。任何涉及加密/签名的应用&#xff0c;无论算法本身机制多么安全&#xff0c;最终都会受到灵魂拷问&#xff1a;你密钥存在哪儿&#xff1f;本文实现了一种安全的密钥管理方案&#xff0c;基于安全多方计算技术&…

优化算法2D可视化的补充

4. 分析上图&#xff0c;说明原理&#xff08;选做&#xff09; 1、为什么SGD会走“之字形”&#xff1f;其它算法为什么会比较平滑&#xff1f; 之所以会走"之字形"&#xff0c;是因为它在每次更新参数时只考虑当前的样本梯度。这导致参数更新非常不稳定&#xff0c…

TortoiseGit 本地仓库和远程仓库建立联系_入门试炼_02

TortoiseGit 简介: TortoiseGit 简称 tgit&#xff0c; 中文名海龟Git。TortoiseGit是一个开放的GIT版本控制系统的源客户端。 文章目录一、前提准备1.1. 生成秘钥和公钥1.2. 把 SSH Key 填到Git 服务器的配置中一、前提准备 声明&#xff1a;此处介绍通过SSH URL方式传输&…

来自 Spring Cloud 官方的消息,Spring Cloud Alibaba 即将毕业

2019 年 7 月 24 日晚&#xff0c;Spring Cloud 官方发布公告&#xff1a; 仓库迁移是官方决定Spring Cloud Alibaba 即将毕业 根据官方最新的发版规则&#xff0c;我们会把孵化器中的 Spring Cloud Alibaba 仓库迁移回 Alibaba 官方仓库&#xff0c;进行正式的毕业发布&#…

TortoiseGit 克隆_入门试炼_03

文章目录一、 Git克隆1.1. 右击选择Git克隆1.2. 输入URL1.3. 提示输入密码一、 Git克隆 1.1. 右击选择Git克隆 在本地文件夹的空白位置处&#xff0c;右击鼠标&#xff0c;在菜单中选择【Git克隆】&#xff1a; 1.2. 输入URL 标签说明URL是git项目地址&#xff0c;简言之后…

5分钟在PAI算法市场发布自定义算法

概述 在人工智能领域存在这样的现象&#xff0c;很多用户有人工智能的需求&#xff0c;但是没有相关的技术能力。另外有一些人工智能专家空有一身武艺&#xff0c;但是找不到需求方。这意味着在需求和技术之间需要一种连接作为纽带。 今天PAI正式对外发布了“AI市场”以及“PA…

Gartner:阿里云蝉联全球第三、亚太第一

4月23日消息&#xff0c;国际研究机构Gartner发布最新云计算市场追踪数据&#xff0c;阿里云亚太市场排名第一&#xff0c;全球市场排名第三。阿里云亚太市场份额从26%上涨至28%&#xff0c;接近亚马逊和微软总和&#xff1b;全球市场份额从7.7%上涨至9.1%&#xff0c;进一步拉…

消息点击率翻倍,原来这就是闲鱼背后的神器

阿里妹导读&#xff1a;IFTTT是一个被称为 “网络自动化神器” 的创新型互联网服务理念&#xff0c;它既实用&#xff0c;概念又简单&#xff0c;可以通过标准化协议满足用户的强需求&#xff0c;让各种互联网产品为用户服务&#xff0c;2010年刚推出&#xff0c;就拥有了极高的…

TortoiseGit 将工作区变动文件提交本地仓库_入门试炼_04

文章目录一、将工作区代码提交到本地仓库1.1. 新增/改动文件1.2. 将变动文件提交本地仓库1.3. 填写提交注释说明一、将工作区代码提交到本地仓库 Git的使用类似TFS、SVN等源代码或者文件管理器&#xff0c;惯例的流程&#xff1a; 1.1. 新增/改动文件 改动/修改本地项目中的…

MongoDB Sharding 请勿复用已删除的 namespace

SERVER-17397: Dropping a Database or Collection in a Sharded Cluster may not fully succeed 是 MongoDB 里老大难的问题&#xff0c;库或集合删除操作如果没有完全执行成功&#xff0c;再新建相同名字的集合&#xff0c;可能导致读到老版本数据的问题。 集合分片原理 Mon…