ItemTouchHelper 实现交互动画
目录介绍
- 01.拖拽需要实现功能
- 02.几个重要的方法说明
- 03.简单实现思路
- 04.拖拽效果上优化
- 05.完整代码展示
好消息
- 博客笔记大汇总【16年3月到至今】,包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也在工作之余收集了大量的面试题,长期更新维护并且修正,持续完善……开源的文件是markdown格式的!同时也开源了生活博客,从12年起,积累共计N篇[近100万字,陆续搬到网上],转载请注明出处,谢谢!
- 链接地址:https://github.com/yangchong211/YCBlogs
- 如果觉得好,可以star一下,谢谢!当然也欢迎提出建议,万事起于忽微,量变引起质变!
01.拖拽需要实现功能
- 需要实现拖拽的功能如下所示
- 长按item后拖动,与其他item交换位置
- 按住item右面的图标后拖动,与其他item交换位置
- 左滑item变透明并缩小,超出屏幕后,其他item补上
- 右滑item变透明并缩小,超出屏幕后,其他item补上
02.几个重要的方法说明
- 几个重要的方法说明
- 需要自定义类实现ItemTouchHelper.Callback类,并重写其中几个方法
03.简单实现思路
- 几个方法中代码思路
- 要想达到上面功能需求,在getMovementFlags方法中,当用户拖拽或者滑动Item的时候需要我们告诉系统滑动或者拖拽的方向,那我们知道支持拖拽和滑动删除的无非就是LinearLayoutManager和GridLayoutManager了,所以可以根据布局管理器的不同做了响应的区分。
- 在onMove方法中处理拖拽的回调逻辑,那么什么时候被调用?当Item被拖拽排序移动到另一个Item的位置的时候被调用。在onSwiped方法[当Item被滑动删除到不见]中处理被删除后的逻辑。为了降低代码耦合度,可以通过接口listener回调的方式交给外部处理。
- 上下拖动时与其他item进行位置交换
- ItemTouchHelper.Callback本身不具备将两个item互换位置的功能,但RecyclerView可以,我们可以在item拖动的时候把当前item与另一个item的数据位置交换,再调用RecyclerView的notifyItemMoved()方法刷新布局,同时,因为RecyclerView自带item动画,就可以完成上面的交互效果。
- 左右滑出屏幕时其他item补上
- 只要在item滑出屏幕时,将对应的数据删掉,再调用RecyclerView的notifyItemRemoved()方法刷新布局即可。
04.拖拽效果上优化
- 拖拽效果优化
- 在item被拖拽或侧滑时修改背景色,当动作结束后将背景色恢复回来,而ItemTouchHelper.Callback中正好有对应这两个状态的方法,分别是:onSelectedChanged()、clearView()。那么优化处理其实可以放到这两个方法中处理。
- 左右滑动使item透明度变浅且缩小该如何实现呢?让item执行了两种属性动画而已,在ItemTouchHelper.Callback中有一个方法可以拿到item被拖拽或滑动时的位移变化,那就是onChildDraw()方法,在该方法中设置item渐变和缩放属性动画。
- 出现问题,按照上面做法会出现删除后有空白item留出来,那么为什么会出现这种情况呢?并不是多出了两条空白数据,它们是正常的数据,只是看不到了,这是因为RecyclerView条目(itemView)覆用导致的,前面在onChildDraw()方法中对itemView设置了透明和缩小,而一个列表中固定只有几个itemView而已,当那两个透明缩小的itemView被再次使用时,之前设置的透明度和高度比例已经是0,所以就出现了这种情况,解决方法也很简单,只要在item被移除后,将itemView的透明度和高度比例设置回来即可
05.完整代码展示
- 代码的GitHub地址:https://github.com/yangchong211/YCRefreshView
- 完整代码如下所示
- 如何使用,代码如下所示
开源库地址[融合大多数recyclerView使用案例,可以直接下载demo]:https://github.com/yangchong211/YCRefreshView
- 00.RecyclerView复杂封装库
- 几乎融合了该系列博客中绝大部分的知识点,欢迎一遍看博客一遍实践,一步步从简单实现功能强大的库
- 01.RecyclerView
- RecycleView的结构,RecyclerView简单用法介绍
- 02.Adapter
- RecyclerView.Adapter扮演的角色,一般常用的重写方法说明,数据变更通知之观察者模式,查看.notifyChanged();源码
- 03.ViewHolder
- ViewHolder的作用,如何理解对于ViewHolder对象的数量“够用”之后就停止调用onCreateViewHolder方法,ViewHolder简单封装
- 04.LayoutManager
- LayoutManager作用是什么?setLayoutManager源码分析
- 05.SnapHelper
- SnapHelper作用,什么是Fling操作 ,SnapHelper类重要的方法,
- 06.ItemTouchHelper
- 07.SpanSizeLookup
- SpanSizeLookup如何使用,同时包含列表,2列的网格,3列的网格如何优雅实现?
- 08.ItemDecoration
- ItemDecoration的用途,addItemDecoration()源码分析
- 09.RecycledViewPool
- RecyclerViewPool用于多个RecyclerView之间共享View。
- 11.RecyclerView上拉加载
- 添加recyclerView的滑动事件,上拉加载分页数据,设置上拉加载的底部footer布局,显示和隐藏footer布局
- 12.RecyclerView缓存原理
- RecyclerView做性能优化要说复杂也复杂,比如说布局优化,缓存,预加载,复用池,刷新数据等等
- 13.SnapHelper源码分析
- SnapHelper旨在支持RecyclerView的对齐方式,也就是通过计算对齐RecyclerView中TargetView 的指定点或者容器中的任何像素点。
- 16.自定义SnapHelper
- 自定义SnapHelper
- 19.自定义ItemDecoration分割线
- 需要自定义类实现RecyclerView.ItemDecoration类,并选择重写合适方法
- 22.RecyclerView问题汇总
- getLayoutPosition()和getAdapterPosition()的区别
- 23.RecyclerView滑动冲突
- 01.如何判断RecyclerView控件滑动到顶部和底部
- 02.RecyclerView嵌套RecyclerView 条目自动上滚的Bug
- 03.ScrollView嵌套RecyclerView滑动冲突
- 04.ViewPager嵌套水平RecyclerView横向滑动到底后不滑动ViewPager
- 05.RecyclerView嵌套RecyclerView的滑动冲突问题
- 06.RecyclerView使用Glide加载图片导致图片错乱问题解决
- 24.ScrollView嵌套RecyclerView问题
- 要实现在NestedScrollView中嵌入一个或多个RecyclerView,会出现滑动冲突,焦点抢占,显示不全等。如何处理?
其他介绍
01.关于博客汇总链接
02.关于我的博客
- 我的个人站点:www.yczbj.org,www.ycbjie.cn
- github:https://github.com/yangchong211
- 知乎:https://www.zhihu.com/people/yczbj/activities
- 简书:http://www.jianshu.com/u/b7b2c6ed9284
- csdn:http://my.csdn.net/m0_37700275
- 喜马拉雅听书:http://www.ximalaya.com/zhubo/71989305/
- 开源中国:https://my.oschina.net/zbj1618/blog
- 泡在网上的日子:http://www.jcodecraeer.com/member/content_list.php?channelid=1
- 邮箱:yangchong211@163.com
- 阿里云博客:https://yq.aliyun.com/users/article?spm=5176.100- 239.headeruserinfo.3.dT4bcV
- segmentfault头条:https://segmentfault.com/u/xiangjianyu/articles
- 掘金:https://juejin.im/user/5939433efe88c2006afa0c6e
代码案例:https://github.com/yangchong211/YCRefreshView
ItemTouchHelper 实现交互动画的更多相关文章
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- [转]收集android上开源的酷炫的交互动画和视觉效果:Interactive-animation
原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...
- Android拼图游戏的设计逻辑,从切图到交互动画,从关卡到倒计时,实例提高!
Android拼图游戏的设计逻辑,从切图到交互动画,从关卡到倒计时,实例提高! 群英传的最后一章,我大致的看了一下这个例子,发现鸿洋大神也做过,就参考两个人的设计逻辑,感觉都差不多,就这样实现起来了 ...
- h5交互动画如何制作
最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- Android github上开源项目、酷炫的交互动画和视觉效果地址集合
Android上开源的酷炫的交互动画和视觉效果:http://blog.csdn.net/u013278099/article/details/50323689 Awesome-android-ui: ...
- [转]收集android上开源的酷炫的交互动画和视觉效果
原文链接:http://www.open-open.com/lib/view/open1411443332703.html 描述:收集android上开源的酷炫的交互动画和视觉效果. 1.交互篇 2. ...
- SVG交互动画制作
前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画), ...
- h5课件是什么?h5(html5)怎样实现交互动画开发?-----浅谈h5交互动画课件的优势
目前很多交互课件,尤其幼儿类的交互课件以动画和交互相结合的类型居多,越来越多的教育机构发现了这种课件对于幼儿的吸引力远大于其他类型的课件,随着flash逐渐被市场淘汰,动画和交互相结合的html5跨平 ...
- iOS 自己定义页面的切换动画与交互动画 By Swift
在iOS7之前,开发人员为了寻求自己定义Navigation Controller的Push/Pop动画,仅仅能受限于子类化一个UINavigationController,或是用自己定义的动画去覆盖 ...
随机推荐
- .NET Core开发实战(第31课:APIController:定义API的最佳实践)--学习笔记
31 | APIController:定义API的最佳实践 首先看一个传统意义上三层架构定义的 Controller [HttpPost] public Task<long> Create ...
- 五一不休息,每天都学习,从零教你手写节流throttle
壹 ❀ 引 我在 从零教你手写实现一个防抖debounce方法 一文中详细的介绍了防抖概念,以及如何手写一个防抖.既然聊到防抖那自然避不开同等重要的节流throttle,老规矩,我们先阐述节流的概念, ...
- JS Leetcode 80. 删除有序数组中的重复项 II题解,常规解法与快慢双指针做法
壹 ❀ 引 今天的题目来自LeetCode80. 删除有序数组中的重复项 II,是一道难度中等,但实际挺简单的一道题,题目描述如下: 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每 ...
- 从零开始的react入门教程(六),一篇文章理解react组件生命周期
壹 ❀ 引 学习任何一门框架,无论是vue.react亦或是angular,我们除了需要熟练掌握框架语法外,了解框架自身的生命周期也是至关重要的.一方面生命周期在面试中多多少少总是会提及,其次了解框架 ...
- NC24263 USACO 2018 Feb G]Directory Traversal
题目链接 题目 题目描述 奶牛Bessie令人惊讶地精通计算机.她在牛棚的电脑里用一组文件夹储存了她所有珍贵的文件,比如: bessie/ folder1/ file1 folder2/ file2 ...
- springboot项目使用外置tomcat7部署项目
Springboot使用外置tomcat7部署运行 1.pom修改 2.tomcat底下config下catalina.properties 3.在tomcat的lib文件夹下添加 javax.el- ...
- 使用docker stack方式部署web集群
如何部署swarm集群,请参考: https://blog.csdn.net/IndexMan/article/details/102713777 创建文件夹 mkdir -p /opt/docker ...
- JavaScript 的新数组分组方法
对数组中的项目进行分组,你可能已经做过很多次了.每次都会手动编写一个分组函数,或者使用 lodash 的 groupBy 函数. 好消息是,JavaScript 现在有了分组方法,所以你再也不必这样做 ...
- Flutter——安装依赖包时,出现Waiting for another flutter command to release the startup lock
问题描述 运行 flutter packages get 时 出现 Waiting for another flutter command to release the startup lock 解决 ...
- [golang] 变量声明和初始化 var, :=, new() 和 make()
[golang] 变量声明和初始化 var, :=, new() 和 make() 说明 go语言中,提供了多种变量声明和初始化的方法.这里着重一一说明.并提供一个简单的指南. 指南 使用make() ...