Android仿QQ侧滑菜单小红点的实现

作者


        本文由 mmmqqq 投稿,博客地址:http://www.apkbus.com/myspaceblog-720227.html


效果图

Android仿QQ侧滑菜单小红点的实现_第1张图片

        前一篇文章分析了QQ侧滑栏的实现,文章地址: http://www.apkbus.com/blog-720227-68097.html ,本篇继续来实现一下QQ小红点的功能。代码已上传至Github,点击“阅读原文“,可点击相应位置超链直达,如对您有帮助,欢迎star~感谢。


绘制贝塞尔曲线

Android仿QQ侧滑菜单小红点的实现_第2张图片

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

整体思路

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

实现过程

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

Android仿QQ侧滑菜单小红点的实现_第3张图片

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

Android仿QQ侧滑菜单小红点的实现_第4张图片

        首先声明了小红点的四种状态,静止状态,拖拽状态,移动状态和消失状态。
        在QQBezierView 的onTouchEvent的DOWN事件中调用了setStickyPoint()方法:

Android仿QQ侧滑菜单小红点的实现_第5张图片

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

Android仿QQ侧滑菜单小红点的实现_第6张图片

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

Android仿QQ侧滑菜单小红点的实现_第7张图片

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

Android仿QQ侧滑菜单小红点的实现_第8张图片

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


Android仿QQ侧滑菜单小红点的实现_第9张图片


Android仿QQ侧滑菜单小红点的实现_第10张图片


你可能感兴趣的:(Android仿QQ侧滑菜单小红点的实现)