仿支付宝首页下拉刷新
声明:转载请注明本文地址
DEMO相关
APK下载地址
https://fir.im/ckh1
Github源码,欢迎大家指正,以及star,谢谢
https://github.com/JmStefanAndroid/EasyBehavior
题外话
学习了Behavior之后,发现效果都可以通过Behavior来实现,包括支付宝首页的下拉刷新效果,其重点效果指标在于下滑上部分的布局,同样能够进行下拉刷新,其下拉刷新的布局展开的位置在中间部分,这篇文章将会讲讲如何实现这个效果的,目前这个效果还不是很完善,但相信通过不断的迭代和矫正能够达到完美,可以先看下效果吧。
PS:得益于各位在我的github上对EasyBehavior提出的指正,目前第一个demo的效果已经比较好用了,这个仿支付宝的效果也是放在EasyBehavior的项目里了,希望各位多多指正。
实现
在继续往下看之前,为了能够快速理解我的毫无整理的思路,我希望你能先看下我的第一个EasyBehavior效果的文章,地址:打造高逼格个人中心动效UI
直奔主题,原理请看上面的文章,这里主讲如何实现
1.初始化,mTargetView是啥?就是我们动画展开的布局,其tag为private static final String TAG = "refresh";
@Overridepublic boolean onLayoutChild(CoordinatorLayout parent, AppBarLayout abl, int layoutDirection) {// 需要在调用过super.onLayoutChild()方法之后获取if (mTargetView == null) {...mTargetView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {@Overridepublic boolean onPreDraw() {mTargetView.getViewTreeObserver().removeOnPreDrawListener(this);//初始化刷新时的高度以及控件高度TARGET_REFESH_HEIGHT = getCalHeight(mTargetView);mTargetViewHeight = TARGET_REFESH_HEIGHT;return false;}});...}...}
这里主要是初始化了刷新时以及控件的高度,留作后用,需要注意的是getCalHeight这个方法是遍历了子view进行了高度的累加,因为为了布局的效果,我将这个mTargetView的高度设为了0。
<LinearLayout
android:layout_width="match_parent"android:layout_height="0dp"android:gravity="center_horizontal"android:orientation="vertical"android:tag="refresh">
2.执行下拉动作
@Overridepublic boolean onStartNestedScroll(CoordinatorLayout parent, AppBarLayout child, View directTargetChild, View target, int nestedScrollAxes) {if (...) {//这里判断下拉的对象是否符合条件isAnimate = true;return true;} else {return ...;}}@Overridepublic void onNestedPreScroll(CoordinatorLayout coordinatorLayout, AppBarLayout child, View target, int dx, int dy, int[] consumed) {if (!isRecovering) {if (... && !isPining) {//isPining为true则表示正在刷新scale(child, dy, target);//执行下拉展开动画return;}}}
3.松手判断条件
@Overridepublic void onStopNestedScroll(CoordinatorLayout coordinatorLayout, AppBarLayout abl, View target) {if (checkPin()) {//检测是否达到刷新临界值startPin();//开始刷新动画} else {recovery(abl);}super.onStopNestedScroll(coordinatorLayout, abl, target);}
如代码所示,达到临界条件,就展示刷新动画,未达到,则恢复到原始状态。
4.执行刷新的说明
/*** 开始刷新*/public void startPin() {if (isPining) return;//正在刷新则不再进行刷新...//这个位置,很可能Target视图(即SmileView)的高度是大于刷新临界值的,因此需要先移动到我们刷新需要的位置,来,走一个animToRefreshHeihgt();if (onRefrehViewActionListener != null) {onRefrehViewActionListener.onRefresh();}}
这里,特别需要注意onRefrehViewActionListener进行了回调,刷新的执行是在Demo2Activity中,
myAppBarLayoutBehavoir.setOnRefrehViewActionListener(new CoAliRefreshBehavior.onRefrehViewActionListener() {@Overridepublic void onRefresh() {mSmileView.setDuration(2000);mSmileView.performAnim();mSmileView.postDelayed(new Runnable() {@Overridepublic void run() {Demo2Activity.this.runOnUiThread(new Runnable() {@Overridepublic void run() {//4s后关闭刷新myAppBarLayoutBehavoir.stopPin();mSmileView.cancelAnim();}});}}, 4000);}});
我使用了网上的一个仿支付宝控件http://blog.csdn.net/lhavoc/article/details/53381054,进行了一定的改造,这里也对该作者表示感谢。
这样实现的目的在于你可以轻松实现动画的切换,完全将动画与我们的behavior进行了解耦
好了,至此就撸完了这个效果,如果你仍然不清楚我说了什么,那就看下代码吧O(∩_∩)O~
(https://github.com/JmStefanAndroid/EasyBehavior)
https://github.com/JmStefanAndroid/EasyBehavior
仿支付宝首页下拉刷新相关推荐
- android支付宝动态更新,Android仿支付宝首页下拉刷新
题外话 学习了Behavior之后,发现效果都可以通过Behavior来实现,包括支付宝首页的下拉刷新效果,其重点效果指标在于下滑上部分的布局,同样能够进行下拉刷新,其下拉刷新的布局展开的位置在中间部 ...
- Android仿微信首页下拉显示小程序列表
花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...
- android微信下拉出现小程序,Android仿微信首页下拉显示小程序列表
花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...
- Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发鼻涕下拉粘连效果
前言 接着上一期 Android仿苹果版QQ下拉刷新实现(一) --打造简单平滑的通用下拉刷新控件 的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效 ...
- vue 仿B站下拉刷新上拉加载
vue 仿B站下拉刷新上拉加载 功能大部分都是跟B站一样的,还是有一些瑕疵和小bug的,φ(>ω<*) 先上demo连接和gitHub项目地址吧 demo展示 https://github ...
- Android仿苹果版QQ下拉刷新实现(三)
前言 第三篇下拉刷新的博客来的稍微有点晚,因为前两篇的博客访问量一直不是很高,所以博主花了点时间修改了整体的Demo效果,处理了很多极端下拉情况下的显示问题,给大家呈现一个完美的下拉刷新控件.因为本文 ...
- html js微信朋友圈下拉刷新效果,仿朋友圈下拉刷新动画(基础动画)
示意图: 2.0.gif demo地址:仿朋友圈下拉刷新动画 动画的起源源于好奇 因为刚开是学动画,恨不得把所有的都实现一遍,试了一下微信朋友圈的下拉刷新动画. 如果ViewController的第一 ...
- Android自定义控制(五)仿新浪微博的下拉刷新
网上有很多很有名的开源框架,这里就来拉拉PullToRefresh这个框架,也就是我们平时用的下拉刷新啦,当然你问我这个有什么用啊?别人已经写好了,这里主要是学习以及练习,练习的次数多了,一切就顺其自 ...
- html仿今日头条下拉刷新,小程序 仿今日头条 带滑动切换的文章列表
小程序 仿今日头条 带滑动切换的文章列表 发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
最新文章
- 算法基础知识科普:8大搜索算法之二叉搜索树(下)
- php 爬虫去重,浅谈动态爬虫与去重(续)
- 高斯过程及其家族往事
- 2019研究生新生大数据出炉!清华园迎来8900多名新主人
- linux中iso文件怎么安装系统文件,我有linux的iso文件,要怎么安装系统
- iOSCoreAnimation动画系列教程(一):CABasicAnimation【包会】
- 配置SSD-caffe测试时出现“Check failed: error == cudaSuccess (10 vs. 0) invalid device ordinal”解决
- java oss 批量传输_阿里云OSS对象存储,服务端签名后直传阿里云OSS
- SAP Spartacus里的injector
- oracle什么时候用in,Oracle Study之---Oracle IN和NOT IN的使用
- 深度优先搜索与广度优先搜索———模板
- Ubuntu 耳机和音响没有声音
- 腾讯云HiFlow场景连接器7月最受欢迎新应用模版推荐
- Tensorflow-- 第一天使用过程中的报错records
- linux查看所有文件
- 『实践』VirtualBox 5.1.18+Centos 6.8+hadoop 2.7.3搭建hadoop完全分布式集群及基于HDFS的网盘实现...
- 很简单的x2m格式转换为mp3方法
- Android源码分析 - Framework层的Binder(客户端篇)
- 权值衰减和 L2 正则化傻傻分不清楚?
- 工业RFID读写器|读卡器在装配线自动化改造升级中的应用与优势
热门文章
- windows98的含义
- python自学 适合新手的 python人机对战小游戏
- 机器学习前沿算法介绍
- ExpressGridPack 21,PivotGrid 控件
- 【数学建模笔记】【第十讲(2)】聚类模型之:系统(层次)聚类及spss实现
- 重写confirm,alert
- java游戏项目分享,适合的零基础java项目,提高你的代码能力
- 保存图片到图片库的方法
- 计算机思维在当今社会的意义,当今社会为什么需要独立思考
- 【项目自动发布】基于Docker/单节点Rancher/GitLab搭建简易的CI/CD流水线(备忘+补充完善)