高仿Android版手机QQ可拖拽未读数小气泡源码 [附件下载]

前言

手机QQ首页上的“消息”界面上，消息未读数小红点的可拖拽效果确实很赞，体验不错，交互效果见下图：



本文分享的源码高仿了手机QQ的这个效果，希望可以为有相同需求的IM开发者同行节省点撸码时间。

高仿效果截图

技术实现原理

1绘制贝塞尔曲线

主要是当在一定范围内拖拽时算出固定圆和拖拽圆的外切直线以及对应的切点，就可以通过path.quadTo()来绘制二阶贝塞尔曲线了。

2整体思路

• 当小红点静止时：什么都不做，只需要给自定义小红点QQBezierView(extends TextView)添加一个.9文件当背景即可；
• 当拖拽时：通过getRootView()获得顶级根View，然后new一个DragView ( extends View ) 来绘制各种状态时的小红点，并且通过getRootView().addView()的方式把DragView 加进去，这样DragView 就可以实现全屏滑动了。
  

主要实现代码

自定义QQBezierView ( extends TextView ) 并复写onTouchEvent来处理各种情况，代码如下：

@Override
public boolean onTouchEvent(MotionEvent event) {
    //获得根View
    View rootView = getRootView();
    //获得触摸位置在全屏所在位置
    float mRawX = event.getRawX();
    float mRawY = event.getRawY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            //请求父View不拦截
            getParent().requestDisallowInterceptTouchEvent(true);
            //获得当前View在屏幕上的位置
            int[] cLocation = new int[2];
            getLocationOnScreen(cLocation);
            if (rootView instanceof ViewGroup) {
                //初始化拖拽时显示的View
                dragView = new DragView(getContext());
                //设置固定圆的圆心坐标
                dragView.setStickyPoint(cLocation[0] + mWidth / 2, cLocation[1] + mHeight / 2, mRawX, mRawY);
                //获得缓存的bitmap，滑动时直接通过drawBitmap绘制出来
                setDrawingCacheEnabled(true);
                Bitmap bitmap = getDrawingCache();
                if (bitmap != null) {
                    dragView.setCacheBitmap(bitmap);
                    //将DragView添加到RootView中，这样就可以全屏滑动了
                    ((ViewGroup) rootView).addView(dragView);
                    setVisibility(INVISIBLE);
                }
            }
            break;
        case MotionEvent.ACTION_MOVE:
            //请求父View不拦截
            getParent().requestDisallowInterceptTouchEvent(true);
            if (dragView != null) {
                //更新DragView的位置
                dragView.setDragViewLocation(mRawX, mRawY);
            }
            break;
        case MotionEvent.ACTION_UP:
            getParent().requestDisallowInterceptTouchEvent(false);
            if (dragView != null) {
                //手抬起时来判断各种情况
                dragView.setDragUp();
            }
            break;
    }
    return true;
}

上面代码注释已经很详细了，总结一下就是通过内部拦截法来请求父View是否拦截分发事件，并通过event.getRawX()和event.getRawY()来不断更新DragView的位置，那么DragView都做了哪些事呢，接下来就看一下DragView。

DragView是QQBezierView 的一个内部View类：

private int mState;//当前红点的状态
 private static final int STATE_INIT = 0;//默认静止状态
 private static final int STATE_DRAG = 1;//拖拽状态
 private static final int STATE_MOVE = 2;//移动状态
 private static final int STATE_DISMISS = 3;//消失状态

首先声明了小红点的四种状态，静止状态，拖拽状态，移动状态和消失状态。

在QQBezierView 的onTouchEvent的DOWN事件中调用了setStickyPoint()方法：

/**
 * 设置固定圆的圆心和半径
 * @param stickyX 固定圆的X坐标
 * @param stickyY 固定圆的Y坐标
 */
 public void setStickyPoint(float stickyX, float stickyY, float touchX, float touchY) {
     //分别设置固定圆和拖拽圆的坐标
     stickyPointF.set(stickyX, stickyY);
     dragPointF.set(touchX, touchY);
     //通过两个圆点算出圆心距，也是拖拽的距离
     dragDistance = MathUtil.getTwoPointDistance(dragPointF, stickyPointF);
     if (dragDistance <= maxDistance) {
         //如果拖拽距离小于规定最大距离，则固定的圆应该越来越小，这样看着才符合实际
         stickRadius = (int) (defaultRadius - dragDistance / 10) < 10 ? 10 : (int) (defaultRadius - dragDistance / 10);
         mState = STATE_DRAG;
     } else {
         mState = STATE_INIT;
     }
 }

接着，在QQBezierView 的onTouchEvent的MOVE事件中调用了setDragViewLocation()方法：

/**
  * 设置拖拽的坐标位置
  *
  * @param touchX 拖拽时的X坐标
  * @param touchY 拖拽时的Y坐标
  */
 public void setDragViewLocation(float touchX, float touchY) {
     dragPointF.set(touchX, touchY);
     //随时更改圆心距
     dragDistance = MathUtil.getTwoPointDistance(dragPointF, stickyPointF);
     if (mState == STATE_DRAG) {
        if (isInsideRange()) {
             stickRadius = (int) (defaultRadius - dragDistance / 10) < 10 ? 10 : (int) (defaultRadius - dragDistance / 10);
         } else {
             mState = STATE_MOVE;
             if (onDragListener != null) {
                 onDragListener.onMove();
             }
         }
     }
     invalidate();
 }

最后在QQBezierView 的onTouchEvent的UP事件中调用了setDragUp()方法：

public void setDragUp() {
   if (mState == STATE_DRAG && isInsideRange()) {
       //拖拽状态且在范围之内
        startResetAnimator();
     } else if (mState == STATE_MOVE) {
         if (isInsideRange()) {
            //在范围之内 需要RESET
            startResetAnimator();
        } else {
           //在范围之外 消失动画
            mState = STATE_DISMISS;
            startExplodeAnim();
        }
    }
}

最后来看下DragView的onDraw方法，拖拽时的贝塞尔曲线以及拖拽滑动时的状态都是通过onDraw实现的：

 @Override
 protected void onDraw(Canvas canvas) {
     if (isInsideRange() && mState == STATE_DRAG) {
         mPaint.setColor(Color.RED);
         //绘制固定的小圆
         canvas.drawCircle(stickyPointF.x, stickyPointF.y, stickRadius, mPaint);
         //首先获得两圆心之间的斜率
         Float linK = MathUtil.getLineSlope(dragPointF, stickyPointF);
         //然后通过两个圆心和半径、斜率来获得外切线的切点
         PointF[] stickyPoints = MathUtil.getIntersectionPoints(stickyPointF, stickRadius, linK);
         dragRadius = (int) Math.min(mWidth, mHeight) / 2;
         PointF[] dragPoints = MathUtil.getIntersectionPoints(dragPointF, dragRadius, linK);
         mPaint.setColor(Color.RED);
         //二阶贝塞尔曲线的控制点取得两圆心的中点
         controlPoint = MathUtil.getMiddlePoint(dragPointF, stickyPointF);
         //绘制贝塞尔曲线
         mPath.reset();
         mPath.moveTo(stickyPoints[0].x, stickyPoints[0].y);
         mPath.quadTo(controlPoint.x, controlPoint.y, dragPoints[0].x, dragPoints[0].y);
         mPath.lineTo(dragPoints[1].x, dragPoints[1].y);
         mPath.quadTo(controlPoint.x, controlPoint.y, stickyPoints[1].x, stickyPoints[1].y);
         mPath.lineTo(stickyPoints[0].x, stickyPoints[0].y);
         canvas.drawPath(mPath, mPaint);
     }
     if (mCacheBitmap != null && mState != STATE_DISMISS) {
         //绘制缓存的Bitmap
         canvas.drawBitmap(mCacheBitmap, dragPointF.x - mWidth / 2,
                        dragPointF.y - mHeight / 2, mPaint);
     }
     if (mState == STATE_DISMISS && explodeIndex < explode_res.length) {
         //绘制小红点消失时的爆炸动画
         canvas.drawBitmap(bitmaps[explodeIndex], dragPointF.x - mWidth / 2, dragPointF.y - mHeight / 2, mPaint);
     }
 }

PS：最开始使用的是 android:clipChildren="false" 这个属性，如果父View只是一个普通的ViewGroup(如LinearLayout、RelativeLayout等)，此时在父View中设置android:clipChildren="false"后，子View就可以超出自己的范围，在ViewGroup中也可以滑动了，此时也没问题；但是当是RecycleView时，只要ItemView设置了background属性，滑动时的DragView就会显示在background的下面了，好蛋疼~如有知其原因的还望不吝赐教。

相关参考资料

http://blog.csdn.net/qq_31715429/article/details/54386934
http://blog.csdn.net/harvic880925/article/details/51615221

Demo下载安装

用手机扫描下面的二维码安装：


或者下载APK自行安装：
android_market_yingyongbao_201707161729_v1.1_release.apk (2.22 MB , 下载次数: 15 )

6 年前 上传

请点击文件名下载附件！

源码附件下载

高仿Android版手机QQ可拖拽未读数小气泡源码.zip (10.08 MB , 下载次数: 75 , 售价: 3 金币)

6 年前 上传

请点击文件名下载附件！

（本源码来自简书博客_小马快跑_，感谢原作者分享）

附录：全站精品资源下载

[1] 精品源码下载：
《轻量级即时通讯框架MobileIMSDK的iOS源码（开源版）[附件下载]》
《开源IM工程“蘑菇街TeamTalk”2015年5月前未删减版完整代码 [附件下载]》
《微信本地数据库破解版(含iOS、Android)，仅供学习研究 [附件下载]》
《NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战 [附件下载]》
《NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战 [附件下载]》
《NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示 [附件下载]》
《NIO框架入门(一)：服务端基于Netty4的UDP双向通信Demo演示 [附件下载]》
《用于IM中图片压缩的Android工具类源码，效果可媲美微信 [附件下载]》
《高仿Android版手机QQ可拖拽未读数小气泡源码 [附件下载]》
《一个WebSocket实时聊天室Demo：基于node.js+socket.io [附件下载]》
《Android聊天界面源码：实现了聊天气泡、表情图标(可翻页) [附件下载]》
《高仿Android版手机QQ首页侧滑菜单源码 [附件下载]》
《开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]》
《分享java AMR音频文件合并源码，全网最全》
《微信团队原创Android资源混淆工具：AndResGuard [有源码]》
《一个基于MQTT通信协议的完整Android推送Demo [附件下载]》
《Android版高仿微信聊天界面源码 [附件下载]》
《仿微信的IM聊天时间显示格式(含iOS/Android/Web实现)[图文+源码]》

[2] 精品文档和工具下载：
《计算机网络通讯协议关系图（中文珍藏版）[附件下载]》
《史上最全即时通讯软件简史（精编大图版）[附件下载]》
《基于RTMP协议的流媒体技术的原理与应用（技术论文）[附件下载]》
《独家发布《TCP/IP详解 卷1：协议》CHM版 [附件下载]》
《良心分享：WebRTC 零基础开发者教程（中文）[附件下载]》
《MQTT协议手册（中文翻译版）[附件下载]》
《经典书籍《UNIX网络编程》最全下载(卷1+卷2、中文版+英文版)[附件下载]》
《音视频开发理论入门书籍之《视频技术手册(第5版)》[附件下载]》
《国际电联H.264视频编码标准官方技术手册（中文版）[附件下载]》
《Apache MINA2.0 开发指南（中文版）[附件下载]》
《网络通讯数据抓包和分析工具 Wireshark 使用教程(中文) [附件下载]》
《最新收集NAT穿越(p2p打洞)免费STUN服务器列表 [附件下载]》
《高性能网络编程经典：《The C10K problem(英文)》[附件下载]》
《即时通讯系统的原理、技术和应用（技术论文）[附件下载]》
《技术论文：微信对网络影响的技术试验及分析[附件下载]》
《华为内部3G网络资料： WCDMA系统原理培训手册[附件下载]》
《网络测试：Android版多路ping命令工具EnterprisePing[附件下载]》
《Android反编译利器APKDB：没有美工的日子里继续坚强的撸》
《一款用于P2P开发的NAT类型检测工具 [附件下载]》
《两款增强型Ping工具：持续统计、图形化展式网络状况 [附件下载]》

[3] 精选视频、演讲PPT下载：
《QQ空间移动端10亿级视频播放技术优化揭秘(视频+PPT)[附件下载]》
《RTC实时互联网2017年度大会精选演讲PPT [附件下载]》
《微信分享开源IM网络层组件库Mars的技术实现(视频+PPT)[附件下载]》
《微服务理念在微信海量用户后台架构中的实践(视频+PPT)[附件下载]》
《移动端IM开发和构建中的技术难点实践分享(视频+PPT)[附件下载]》
《网易云信的高品质即时通讯技术实践之路(视频+PPT)[附件下载]》
《腾讯音视频实验室：直面音视频质量评估之痛(视频+PPT)[附件下载]》
《腾讯QQ1.4亿在线用户的技术挑战和架构演进之路PPT[附件下载]》
《微信朋友圈海量技术之道PPT[附件下载]》
《手机淘宝消息推送系统的架构与实践(音频+PPT)[附件下载]》
《如何进行实时音视频的质量评估与监控(视频+PPT)[附件下载]》
《Go语言构建高并发消息推送系统实践PPT(来自360公司)[附件下载]》
《网易IM云千万级并发消息处理能力的架构设计与实践PPT [附件下载]》
《手机QQ的海量用户移动化实践分享(视频+PPT)[附件下载]》
《钉钉——基于IM技术的新一代企业OA平台的技术挑战(视频+PPT)[附件下载]》
《微信技术总监谈架构：微信之道——大道至简(PPT讲稿)[附件下载]》
《Netty的架构剖析及应用案例介绍(视频+PPT)[附件下载]》
《声网架构师谈实时音视频云的实现难点(视频采访)》
《滴滴打车架构演变及应用实践(PPT讲稿)[附件下载]》
《微信海量用户背后的后台系统存储架构(视频+PPT)[附件下载]》
《在线音视频直播室服务端架构最佳实践(视频+PPT)[附件下载]》
《从0到1：万人在线的实时音视频直播技术实践分享(视频+PPT)[附件下载]》
《微信移动端应对弱网络情况的探索和实践PPT[附件下载]》
《Android版微信从300KB到30MB的技术演进(PPT讲稿)[附件下载]》

刚注册，怎么弄金币呢

不错噢

又花金币了，赚的多不如花的快

感谢分享

这个功能很实用！

很不错,试试

这个功能很实用

very nice