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

来源:互联网 发布:租阿里云服务器 编辑:程序博客网 时间:2024/05/16 04:36

热文导读 | 点击标题阅读

成为 Android 大牛的10大独门秘籍

Android全面拥抱AI:Google推AI版的Android 8.1和Oreo Go版,附新特性详解

【实战】一个工具类搞定drawable下扎堆的selector

原文地址:http://www.apkbus.com/myspaceblog-720227.html


效果图




代码已上传至Github,点击“阅读原文“,可点击相应位置超链直达,如对您有帮助,欢迎star~感谢。


绘制贝塞尔曲线



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


整体思路


 1、当小红点静止时,什么都不做,只需要给自定义小红点QQBezierView(extends TextView)添加一个.9文件当背景即可

2、当滑动时,通过getRootView()获得顶级根View,然后new一个DragView ( extends View ) 来绘制各种状态时的小红点,并且通过getRootView().addView()的方式把DragView 加进去,这样DragView 就可以实现全屏滑动了


实现过程


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

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

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

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

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


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

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


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

Demo地址:https://github.com/crazyqiang/AndroidStudy/blob/master/app/src/main/java/org/ninetripods/mq/study/recycle/SwipeMenuActivity.java

你有好的文章想和大家分享欢迎投稿,直接向我投递文章链接即可


Java和Android架构


更多学习资料点击下面的“阅读原文”获取

原创粉丝点击