Android侧滑粘稠效果的实现

今日科技快讯

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

作者简介

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

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

陈添 的博客地址：

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

前言

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

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

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

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

正文

这是一个自定义 View。

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

背景的红色

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

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

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

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

• 背景红色的运动过程

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

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

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

这里的过程就是从 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 里写了一个方法：

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

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

白色叉叉

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

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

• chaY1 等于（radius*3）/4 

• chaY2 等于 radius/2 

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

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

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

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

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

在RecycleView中的使用

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

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

结尾

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

本篇文章的代码：

https://github.com/ChenTianSaber/CeHuaView

最后的最后，感谢我可爱的女朋友。

更多

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

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

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