仿新版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);
    }

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