[置顶] 仿新版QQ底部导航栏动态拖动按钮

首先要感谢这位大哥的分享：http://www.jianshu.com/p/fcbd86d2b73a。

新版QQ的底部按钮能拖动，跟随手势的位置做不同动画效果，很是有趣。

其实这种动画实现原理很简单，我们可以继承FrameLayout，添加1~2张图片，在onTouchEvent方法中移动。当然为了实现上述效果，两张图片移动的比例（或者阻尼值）是不同的，而且还要限制两张图片的移动范围。

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE: {
changeWhenMove(x, y);
return true;
}
case MotionEvent.ACTION_UP: {
//复位
restorePosition();
//判断手抬起时坐标是否在相应按钮内，是则触发点击事件
if (isContain(this, event.getRawX(), event.getRawY())) {
setHasClick(!hasClick);
if (OnMenuClickListener != null) {
OnMenuClickListener.onItemClick(this);
}
}
return true;
}
}
return true;
}

private boolean isContain(View view, float x, float y) {
int[] point = new int[2];
view.getLocationOnScreen(point);
return x >= point[0] && x <= (point[0] + view.getWidth()) && y >= point[1] && y <= (point[1] + view.getHeight());
}

private void changeWhenMove(float x, float y) {
//这个值可以调节来达到最理想的效果
if (y + centerY < -18 * centerY) {
y = -18 * centerY - centerY;
} else if (y - centerY > 18 * centerY) {
y = 18 * centerY + centerY;
}
if (x + centerX < -12 * centerX) {
x = -12 * centerX - centerX;
} else if (x - centerX > 12 * centerX) {
x = 12 * centerX + centerX;
}
childView1.setX(childView1X + (x - centerX) / 30);//外部动作小一点
childView1.setY(childView1Y + (y - centerY) / 60);
if (childView2 != null) {
childView2.setX(childView2X + (x - centerX) / 10);//内部动作可以大一点
childView2.setY(childView2Y + (y - centerY) / 30);
}

}

private void restorePosition() {
childView1.setX(childView1X);
childView1.setY(childView1Y);
childView2.setX(childView2X);
childView2.setY(childView2Y);
}

详细的过程，注释已经说的很清晰，大家可以下载源码看一看。