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

xiaoxiao2021-02-28  76

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

转载请注明原文地址: https://www.6miu.com/read-73719.html

最新回复(0)