高仿QQ未读消息气泡拖拽黏连效果

今日科技快讯

近日，搜狗CEO王小川在接受采访时对百度进行了猛批。他认为百度是一家没有战略的公司，而且自动驾驶也不是搜索公司该干的事。谈及到百度现在最重视的AI，王小川认为搜索本身就是AI，搜索引擎需要像人一样去思考，来帮用户选择出更好的页面，因此搜狗一直都是在做着AI领域的研究。

作者简介

本篇来自 猴菇先生 的投稿，分享了一个贝赛尔曲线的应用，希望能对大家有所帮助。

猴菇先生 的博客地址：

http://blog.csdn.net/qq_31715429

正文

了解了Android端的贝塞尔曲线，本篇就举个栗子练习一下，仿QQ未读消息气泡，是最经典的练习贝塞尔曲线的东东，效果如下：

大体思路就是：

• 画两个圆，一个黏连小球固定在一个点上，一个气泡小球跟随手指的滑动改变坐标。随着两个圆间距越来越大，黏连小球半径越来越小。

• 当间距小于一定值，松开手指气泡小球会恢复原来位置；

• 当间距超过一定值之后，黏连小球消失，气泡小球继续跟随手指移动，此时手指松开，气泡小球消失~

1. 首先老一套~新建attrs.xml文件，编写自定义属性，新建 DragBubbleView 继承View，重写构造方法，获取自定义属性值，初始化Paint、Path等东东，重写 onMeasure 计算宽高，这里不再啰嗦~

2. 在 onSizeChanged 方法中确定黏连小球和气泡小球的圆心坐标，这里我们取宽高的一半：

3. 经分析气泡小球有以下几个状态：默认、拖拽、移动、消失，我们这里定义一下，方便根据不同的状态分析不同情况：

4. 重写 onTouchEvent 方法，其中 d 代表两圆圆心间距，maxD 代表可拖拽的最大间距：

如果控件外面有嵌套 ListView、RecyclerView 等拦截焦点的控件，那就在 ACTION_DOWN 中请求父控件不拦截事件：

getParent().requestDisallowInterceptTouchEvent(true);

然后 ACTION_UP 再把事件还回去：

getParent().requestDisallowInterceptTouchEvent(false);

5. 在 onDraw 方法中画圆、画贝赛尔曲线、画消息个数文本：

其中计算 二阶贝塞尔曲线 做需要的起点、终点 和 控制点坐标，顺序是 moveTo A, quadTo B, lineTo C, quadTo D, close。先来张示意图：

手机可点击放大查看

再上代码：

6. 气泡复原的动画，使用估值器计算坐标

7. 顺便来个气泡状态的监听器，方便外部调用监听其状态：

8. 关于气泡爆炸的动画，思路就是放几张图片到 drawable 里，然后动态计数重绘，在 onDraw 中调用 canvas.drawBitmap() 方法，具体如下：

在构造方法中：

然后在手指抬起的时候使用如下动画：

最后在 onDraw 中：

9. 在布局文件中使用该控件，并使用自定义属性：

其中 android:clipChildren=”false” 这个属性可以使根布局下的子控件超出本身控件范围的大小，加上这个属性就可以满屏幕随意拖拽而不必拘泥于它本身的大小了，炒鸡方便~

还有如果觉得在属性中设置消息个数不方便，需要在代码中动态获取数据并设置的话，只要在 DragBubbleView 中添加一个方法即可

public void setText(String text){
    mText = text;
    invalidate();
}

10. 在MainActivity中：

总结

这次既练习了自定义View，还囊括了贝赛尔曲线，坐标的计算一定要画图，简单直观。

项目地址：

https://github.com/MonkeyMushroom/DragBubbleView

更多

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

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

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

如果觉得不错可以赞赏作者

赞赏

人赞赏