这是 JsonChao 的第 320 期分享
这个效果之前有后台问我怎么实现，终于等到有人分享，开心~~
之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。
先上个效果图吧
实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。
备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。
自定义属性
其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。
属性 | 说明 |
bigIconSrc | 大图标资源 |
smallIconSrc | 小图标资源 |
iconWidth | 图标宽度 |
iconHeight | 图标高度 |
range | 可拖动范围 |
主要的拖动代码
这里先得到X轴拖动的距离deltaX和Y轴拖动的距离deltaY，大图标对应小半径，小图标对应大半径。然后看moveEvent方法：
方法很简单，注释结合这张图就一目了然了，主要是注意在抬起时图标复位就好了。
简单看一下初始化
由于图标下面一般会带文字，因此直接继承了LinearLayout，并且默认设置成了垂直排列。
在init方法中进行了布局文件的绑定，并且让该view水平居中。
这里值得注意的是onMeasure方法。由于图标可以往外拖动，所以要给ImageView一个默认的padding，不然拖动时最外面部分会消失。
然后就没啥好说了，直接看源码吧。
如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~
源码地址：
https://github.com/XingdongYu/QQNaviView
欢迎star，rua~
END
往期推荐
【尊享版】如何从零到一掌控习惯？
【尊享版】那两年沉淀的时间增值心法
Android 往事 —— 暗夜的搏杀
为什么各大厂自研的内存泄漏检测框架都要参考 LeakCanary？因为它是真强啊！
Flutter 与 Android 的你来我往
点击下方卡片关注 JsonChao，为你构建一套
大厂青睐的 T 型人才系统
▲ 点击上方卡片关注 JsonChao，构建一套
大厂青睐的 T 型人才知识体系
欢迎把文章分享到朋友圈
很感谢您阅读这篇文章，希望您能将它分享给您的朋友或技术群，这对我意义重大。
你若喜欢，为 JsonChao 点个在看哦