模仿手机 QQ 底部导航栏 Icon 拖拽效果

这个效果之前有后台问我怎么实现，终于等到有人分享，开心~~

之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。

先上个效果图吧

实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。

备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。

其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。

这里先得到X轴拖动的距离deltaX和Y轴拖动的距离deltaY，大图标对应小半径，小图标对应大半径。然后看moveEvent方法：

方法很简单，注释结合这张图就一目了然了，主要是注意在抬起时图标复位就好了。

由于图标下面一般会带文字，因此直接继承了LinearLayout，并且默认设置成了垂直排列。

在init方法中进行了布局文件的绑定，并且让该view水平居中。

这里值得注意的是onMeasure方法。由于图标可以往外拖动，所以要给ImageView一个默认的padding，不然拖动时最外面部分会消失。

然后就没啥好说了，直接看源码吧。

如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~

源码地址：

https://github.com/XingdongYu/QQNaviView 

欢迎star，rua~