仿新版QQ底部导航栏动态拖动按钮

来源:互联网 发布:管家婆软件打印机关闭 编辑:程序博客网 时间:2024/05/18 21:07

首先要感谢这位大哥的分享: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);    }
详细的过程,注释已经说的很清晰,大家可以下载源码看一看。

原创粉丝点击