Android 自定义View UC下拉刷新效果(三)

这是山寨UC浏览器的下拉刷新效果的的结尾篇了,到这里,基本是实现了UC浏览器首页的效果了!还没有看之前的小伙伴记得出门左转先看看哟(Android 自定义View UC下拉刷新效果(一)Android 自定义View UC下拉刷新效果(二))。期间也有不小的改动,主要集中在那个小圆球拖拽时的绘制方式上,可以看到,最后的圆球效果比之前的顺畅漂亮了很多!!

pull.png

back.png

loading.png

PullRefreshfinal.gif

经过前面的两篇文章,分别从小球动画和下拉刷新两个方面介绍了相关的内容,最后还剩首页显示过渡列表展示的内容了!效果说明:

  • 1、向上滑动,背景和tab有个渐变效果
  • 2、向下滑动,有一个放大和圆弧出现

功能拆分

  • 1、展开关闭top默认值
    因为这里有两种状态,一种是展开的,一种是首页的关闭状态,展开的默认top是TabLayout的对应高度加上自身的top值,而关闭时,默认top值是上面的CurveView的高度加上自身的top值。
  • 2、实现拖拽滑动效果
    首先想到的就是ViewDragHelper,使用它来控制相关的拖拽。
  • 3、拖拽背景渐变效果
    这个就是设置拖拽过程中相关的回调。另外就是在首页的状态,ViewPager是没法左右滑动的。
  • 4、绘制下拉的弧度
    这个就得使用到drawPath()绘制贝塞尔曲线了。

相关对象介绍

父布局是一个CurveLayout,里面包含三个对象:

sheet就是我们的拖拽目标ViewViewDragHelper拖拽辅助类,写好对应的事件处理和Callback就可以实现拖拽功能了!这里不详细介绍。ViewOffsetHelper,对于它的介绍,可以看看下面的截图:

ViewOffsetHelper.png

因为我们这里只涉及上下的移动,所以介绍以下主要方法:

展开、关闭的默认top值

在addView()的方法中我们确定对应的Target,然后为其设置一个OnLayoutChangeListener

接下来看看OnLayoutChangeListener里面的相关逻辑:

初始化sheetExpandedTop,currentTop等字段,并且调用上面提到的onViewLayout(),同步ViewOffsetHelper的值。

拖拽滑动实现

ViewDragHelper就不多说了,Android自带的辅助类,添加一个Callback,然后处理相关回调方法就可以了!
判断是否拦截处理事件:

这里获取的这个currentX是为了在下拉出现那个弧度的顶点。在接下来的回调中会使用。

可以看到,在onViewPositionChanged()的方法中会去调用resyncOffsets()的方法同步ViewOffsetHelper的对应值。
onViewReleased()的方法中调用了animateSettle()的方法,两种情况,一种是展开,一种是关闭(首页的状态),所以这里有一个expand的变量来标识,如果展开,就展开到sheetExpandedTop的高度,关闭的话,那么就是到dismissOffset的高度。

animateSettle()方法最终执行以下方法逻辑:

这里有一个settleAnim的属性动画,传入的是ViewOffsetHelper里面的OFFSET_Y,在OFFSET_Yset()方法中,调用setTopAndBottomOffset()的方法去修改对应的top值,从而实现了松手后展开或者关闭的动画效果。

拖拽背景渐变效果

说到背景的渐变效果,那么肯定就是要讲相关的回调了!Callbacks用来处理对应的回调,提供了三个方法:onSheetNarrowed(),onSheetExpanded(),onSheetPositionChanged(),分别对应的时候关闭了,展开了,和改变了三种情况。

onSheetPositionChanged(int sheetTop, float currentX, int dy, boolean userInteracted)的方法中,有四个参数,分别是当前的top值,当前touch的x值,竖直方向的改变值,以及是否是由开到关或者由关到开的情况。

在具体是实现中是这样的:

可以看到,在onSheetPositionChanged()的方法中,首先是进行了一些值的初始化,然后根据reverse来判断,如果不是由开到关或者由关到开的状态改变,那么就开始背景的移动或者背景的放大及画出对应的弧形。另外在onSheetNarrowed()或者onSheetExpanded()中就是对View做的一些初始化或者重置操作!

绘制下拉的弧度

当是下拉的时候,需要绘制出弧形,这里使用到了CurveView以及它的onDispatch()方法!

其实很简单,就是使用当前的X值的坐标和dy的值来进行drawPath()的操作。当然这里有一个上限的限制。

到这里,实现拖拽展开及关闭的逻辑就实现完成了,总结起来就是使用ViewDragHelper来辅助实现拖拽功能,在松手的时候调用ViewOffsetHelper来实现展开或者关闭的渐变动画效果,期间调用Callbacks回调对应的状态(展开了、关闭了、位置变化了)。

圆球绘制逻辑改动

之前的第一篇文章中介绍的圆球拉伸绘制时采用的是drawArc()和drawPath结合的方法,所以看着总觉得有点儿怪,然后查了相关的资料,这里使用了新的方式,请看图:

网上拷的

意思就是一个圆形,可以理解为是采用了drawPath()画了四段弧。每段弧就是使用path.cubicTo()绘制的贝塞尔曲线。

根据网上的资料,这里的m的值就是半径R*0.551915024494f。在竖直方向拖拽的过程中,其实就是改变这12个点的坐标,从而绘制出想要的弧形。

项目下载:https://github.com/lovejjfg/UCPullRefresh

喜欢就请点个Start呗。。

参考资料

1、Plaid项目
2、三次贝塞尔曲线练习之弹性的圆

—- Edit By Joe —-

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:joe

90后程序猿。。 个人主页 · 我的文章 · 3 ·      

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部