Android侧滑粘稠效果的实现

Android侧滑粘稠效果的实现


今日科技快讯

近日,有网友反映,Bilibili(即B站)平台上大量海外剧、海外电影资源被下架,内容涵盖日剧、日影、美剧、英剧等。昨日,B站回应大批影视剧下架称,正对内容进行审查,不符合规范的影视剧将被下架处理,符合规范的影视剧将逐步恢复上线。

作者简介

每天一篇文章,一周就这么快又过去了。明天就是周末啦,提前祝大家周末愉快!

本篇是 陈添 的投稿, 分享了Android侧滑粘稠效果的实现,效果不错,希望大家喜欢。

陈添 的博客地址:

http://www.jianshu.com/u/f7fa41541bf9

前言

之前在 UI 中国上看到一个侧滑效果,觉得还不错,于是就想实现一下。UI 效果是这样的:

Android侧滑粘稠效果的实现

我自己实现的效果是这样的:

Android侧滑粘稠效果的实现

效果并没有完全一致,UI 效果里当两部分重合后有一种像水滴重合一样的效果,我并不知道用代码如何实现(如果大家知道请告诉我。。。),所以我这里只是简单的做了一个慢慢出现的效果。

好了,那我们就来看看这个效果是怎么实现的。

正文

这是一个自定义 View。

效果分为两个部分,一个是背景的红色,一个是白色的叉叉。

背景的红色

当看到红色的效果的时候,我就想到了贝塞尔曲线。贝塞尔曲线是个神奇的东西,几乎所有神奇的曲线效果都可以用贝塞尔曲线来做。为了让这篇文章保持简洁,所以我就不介绍贝塞尔曲线了,如果有不了解的人,可以去这里看看。

http://www.gcssloop.com/customview/Path_Bezier

到这里,我就假设你们都已经知道怎么画贝塞尔曲线啦。
我想你们也猜到了,红色效果其实就是用的三阶贝塞尔曲线。

Android侧滑粘稠效果的实现

这个图画的就是红色效果的示意图(为了介绍所以将图画成了半圆,实际效果里,圆是扁扁的)。为了便于计算我将它设置为了一个正方形,图中的 x2 , x3 , x5 , x6 都是中点。我们用Path.cubicTo() 方法将 x1 到 x7 这七个点连起来之后就可以得一个半圆形了。 我们整个效果,其实就是控制这几个点而已。

  • 背景红色的运动过程

在这里,我会直接给出代码来讲解。

为了便于计算,我们先将控件的宽高设为相等,让它变成一个正方形:

Android侧滑粘稠效果的实现

然后就是绘制背景红色了,其实这个红色有上下两个,但是两个其实是一样的,所以我就只介绍上半部分。

Android侧滑粘稠效果的实现

这里的过程就是从 x1 点开始连接一直连接到 x7,最后在连到 x1。其中 x2 表示 x2 点的x坐标,y26 表示 x2 点和 x6 点的y坐标,其余类同(取名字真的好累)。 radius表示圆的半径,也就是正方形边长的一半。 代码里,x3 点和 x5 点的横坐标被我设置为和 x1 , x7 一样,这样可以让圆扁一点。 我们需要变化的点,其实就是x2,x6,y26,y345这四个点而已。 y345,y26 需要上下移动,来达到变小变大的效果。 至于x2,x6则是需要向外扩大,不然最后 y345 就算捅穿地表也不能把两边填满。 现在我们知道了需要变化的点的轨迹,那我们怎么控制它们呢? 我在 View 里写了一个方法:

Android侧滑粘稠效果的实现

这个方法接收两个参数,第一个是当前值,第二个是最大的值。通过 当前值/最大值 我们就可以获取一个百分比的进度值。通过这个进度值我们就可以计算出当前点的位置:

Android侧滑粘稠效果的实现

现在这个我用了一个 seekBar,等到将其放进真的比如 RecyclerView 的侧滑删除时,只要将滑动距离作为 progress 参数传进去,滑动最大值作为 max 传进去就可以了。

白色叉叉

Android侧滑粘稠效果的实现

叉叉就简单多了,图上的每个点都是中点。叉叉也是分上半部和下半部,我们这里就只讲讲上半部分,下半部分一样的。

Android侧滑粘稠效果的实现

这里radius表示半径,halfRadius表示半径的一半。 

  • chaY1 等于(radius*3)/4 

  • chaY2 等于 radius/2 

  • chaY1 表示 x1 ,x3, x5 点的 y 坐标,

  • chaY2 表示 x2 , x4 点的 y 坐标。 

我们需要改变的就是 chaY1 和 chaY2 的值,来达到一种叉叉慢慢出现的感觉。代码如下:

Android侧滑粘稠效果的实现

我们的叉叉是在上下两个红色接触在一起的时候才绘制的,也就是进度为一半的时候。

这样就把这个 View 说完了,View 的代码也不是很长,我就直接贴出来吧:

Android侧滑粘稠效果的实现Android侧滑粘稠效果的实现Android侧滑粘稠效果的实现

在RecycleView中的使用

Android侧滑粘稠效果的实现

因为这篇文章主要也不是讲RecyclerView的侧滑实现的,所以这方面的知识大家可以去这里看看。在RecyclerView应用的代码也参考自这里。

http://blog.****.net/tyk0910/article/details/51669205

结尾

好了,本篇文章结束了。还有很多不完善的地方,也和UI中国的效果有出入,需要调整。才疏学浅,如有错误,欢迎大家批评指正。

本篇文章的代码:

https://github.com/ChenTianSaber/CeHuaView

最后的最后,感谢我可爱的女朋友。
更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

Android侧滑粘稠效果的实现

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

Android侧滑粘稠效果的实现