自定义View实战之仿QQ小红点实现

本文主要是介绍自定义View实战之仿QQ小红点实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图预览

1. 分析

1. QQ拖拽小红点实现这个主要是用到的二阶贝塞尔曲线
2. 在可拖拽范围内实现小红点的拖拽回弹动画处理
3. 如果超出了最大拖拽范围 松手时也在拖拽范围之外，则做松手动画处理
4. 如果超出了最大拖拽范围 松手时在拖拽范围之内，则把小红点复位

2. 实现原理

1. 二阶贝塞尔曲线可以用path相关方法实现，然后用canvas.drawPath
2. 分别需要绘制拖拽圆和固定圆 在一开始 两个圆的圆心和半径大小一样大
3. 在onTouchEvent中处理拖拽事件，动态更新拖拽圆的圆心坐标
4. 回弹动画和拖拽范围外帧动画处理

3. 初始化一些东西 初始化一般我放在onSizeChanged方法中

//固定的圆圆心坐标和半径
private PointF mFixedPoint;
private float mFixedRadius;
//拖拽的圆圆心坐标和半径
private PointF mDragPoint;
private float mDragRadius;
//拖拽范围最大圆的圆心坐标和半径 最大拖拽范围
private float mMaxDragRange;
private float mDragMaxRadius;
private PointF mDragMaxPoint;
//控制点的坐标
private PointF mControlPoint;
//固定圆和拖拽圆切点坐标
private PointF[] mFixedTangentPoint;
private PointF[] mDragTangentPoint;
//触摸拖拽移动范围大小
private float mDragMoveRange;
//是否超出了范围
private boolean mIsOutRange = false;
//是否在超出范围外松手
private boolean mIsOutUp = false;
//动画中固定圆的最小半径
private float mMinFixedRadius;private Path mPath;
private WindowManager.LayoutParams mParams;
private WindowManager mWindowManager;@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);this.mViewWidth = w;this.mViewHeight = h;//初始化各个坐标点float mCenterX = dip2px(180);float mCenterY = dip2px(260);mFixedPoint = new PointF(mCenterX,mCenterY);mDragPoint = new PointF(mCenterX,mCenterY);mDragMaxPoint = new PointF(mCenterX,mCenterY);mControlPoint = new PointF();mFixedTangentPoint = new PointF[2];mDragTangentPoint = new PointF[2];//初始化各个半径mFixedRadius = dip2px(12);mDragRadius = dip2px(14);mMinFixedRadius = dip2px(8);mDragMaxRadius = dip2px(100);mMaxDragRange = mDragMaxRadius;//初始化 WindowManager和mParams  用于添加范围外爆炸图片 做动画处理mWindowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);mParams = new WindowManager.LayoutParams();mParams.format = PixelFormat.TRANSLUCENT;mParams.width = WindowManager.LayoutParams.WRAP_CONTENT;mParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
}

4. 绘制贝瑟尔曲线

贝塞尔曲线分一阶贝塞尔曲线 ,通过path对象
path.lineTo连接线段
二阶贝塞尔曲线
path.quadTo需要一个起点，一个终点和一个控制点
三阶贝塞尔曲线
path.cubicTo需要一个起点，一个终点，两个控制点
一些数学知识 ：
两平行线的斜率相等
两条线垂直相交 则斜率的乘积=-1
斜率计算公式k=(y0-y1) / (x0-x1) 当 x0-x1不等于0的时候
path.moveTo是移动到某一个点
path.lineTo是连接某一个点构成一条直线
path.close()闭合曲线

//画贝塞尔曲线
private void drawBezier(Canvas canvas){//计算拖拽过程中固定圆的半径float mFixedRadius = updateFixedCircleRadius();//控制点设置为两圆心点连线的中心坐标mControlPoint.set((mFixedPoint.x + mDragPoint.x) / 2,(mFixedPoint.y + mDragPoint.y) / 2);//计算斜率 和 切点坐标float dy = mDragPoint.y - mFixedPoint.y;float dx = mDragPoint.x - mFixedPoint.x;//k1 * k2 = -1 斜率k = (y0 - y1)/(x0 - x1)if(dx == 0){mFixedTangentPoint = GeometryUtil.getIntersectionPoints(mFixedPoint,mFixedRadius,0f);mDragTangentPoint = GeometryUtil.getIntersectionPoints(mDragPoint, mDragRadius,0f);}else{float k1 = dy / dx;float k2 = -1 / k1;mFixedTangentPoint = GeometryUtil.getIntersectionPoints(mFixedPoint,mFixedRadius,k2);mDragTangentPoint = GeometryUtil.getIntersectionPoints(mDragPoint, mDragRadius,k2);}//需要重置 否则线会重叠mPath.reset();//移动起点到固定圆的外切点mPath.moveTo(mFixedTangentPoint[0].x,mFixedTangentPoint[0].y);//绘制二阶贝塞尔曲线 需要一个控制点 和终点（拖拽圆的一个切点）mPath.quadTo(mControlPoint.x,mControlPoint.y, mDragTangentPoint[0].x, mDragTangentPoint[0].y);//连接拖拽圆的另一个外切点mPath.lineTo(mDragTangentPoint[1].x, mDragTangentPoint[1].y);//再次绘制二阶贝塞尔曲线 需要一个控制点 和终点（固定圆的另外一个切点）mPath.quadTo(mControlPoint.x,mControlPoint.y,mFixedTangentPoint[1].x,mFixedTangentPoint[1].y);//闭合曲线mPath.close();//绘制pathcanvas.drawPath(mPath,mPaint);
}

5. 触摸事件onTouchEvent方法处理

手指触摸事件，如果手指触摸拖动就更新拖拽圆的x,y坐标，如果拖动的范围已经超出了最大的
拖拽范围就不再绘制连接部分和固定圆

//拖拽出了范围后将不再绘制连接部分和固定圆
if( !mIsOutRange) {//画固定圆float mFixedRadius = updateFixedCircleRadius();canvas.drawCircle(mFixedPoint.x, mFixedPoint.y, mFixedRadius, mPaint);drawBezier(canvas);
}

手指抬起事件，如果手指移动抬起的时候一直都在拖拽最大范围内，则做回弹动画处理，
如果拖拽出了最大范围，手指松手时候又在拖拽范围内，那么拖拽圆回归固定圆的位置，
如果拖拽出了最大范围，手指松手时候也在最大范围外，则做爆炸（帧）动画处理。

/*** 手指松手事件处理*/
private void touchUp(){//拖拽已经超出了最大范围if(mIsOutRange){//手指抬起/松手时是否停留在最大范围内//松手在范围外if(mDragMoveRange > mMaxDragRange){mIsOutUp = true;outRangePlayAnimation();invalidate();}else{mIsOutUp = false;//松手在范围内 因为要回到原位置 所以拖拽圆的圆心坐标用固定圆的圆心坐标代替updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);}}else{//拖拽一直在范围内resilienceAnimation();}
}

详细代码如下

@Override
public boolean onTouchEvent(MotionEvent event) {switch (event.getAction()){case MotionEvent.ACTION_DOWN:mIsOutRange = false;float startX = event.getX();float startY = event.getY();updateDragCenterXY(startX,startY);break;case MotionEvent.ACTION_MOVE:float moveX = event.getX();float moveY = event.getY();mDragMoveRange = drawDistance();//超出了拖拽的最大范围if(mDragMoveRange > mMaxDragRange){mIsOutRange = true;}else{//mIsOutRange=false  因为移出一次后就算它移出过了mIsOutUp = false;}updateDragCenterXY(moveX,moveY);break;case MotionEvent.ACTION_UP://防止误操作mDragMoveRange = drawDistance();touchUp();break;}return true;
}/*** 手指松手事件处理*/
private void touchUp(){//拖拽已经超出了最大范围if(mIsOutRange){//手指抬起/松手时是否停留在最大范围内//松手在范围外if(mDragMoveRange > mMaxDragRange){mIsOutUp = true;outRangePlayAnimation();invalidate();}else{mIsOutUp = false;//松手在范围内 因为要回到原位置 所以拖拽圆的圆心坐标用固定圆的圆心坐标代替updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);}}else{//拖拽一直在范围内resilienceAnimation();}
}/*** 更新拖拽圆的圆心坐标* @param x* @param y*/
private void updateDragCenterXY(float x, float y){mDragPoint.set(x,y);invalidate();
}

6. 动画处理

1. 回弹动画处理/***  移动的时候一直在范围内，最后在范围内做松手回弹动画处理*/
private void resilienceAnimation() {final PointF startPoint = new PointF(mDragPoint.x,mDragPoint.y);final PointF endPoint = new PointF(mFixedPoint.x,mFixedPoint.y);ValueAnimator animator = ValueAnimator.ofFloat(1.0f);animator.setInterpolator(new OvershootInterpolator(4.0f));animator.setDuration(500);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float fraction = animation.getAnimatedFraction();PointF byPercent = GeometryUtil.getPointByPercent(startPoint, endPoint, fraction);updateDragCenterXY(byPercent.x, byPercent.y);}});animator.start();
}2. 帧动画处理 这里需要注意的是通过windowManager.addView把图片添加进来 
然后做动画处理，动画执行完，调用remove方法移除imageView对象/*** 超出范围 松手动画处理*/
private void outRangePlayAnimation(){final  ImageView imageView = new ImageView(getContext());imageView.setImageResource(R.drawable.out_anim);final AnimationDrawable animDrawable = (AnimationDrawable) imageView.getDrawable();// 这里得到的是其真实的大小，因为此时还得不到其测量值final int imgWidth = imageView.getDrawable().getIntrinsicWidth();final int imgHeight = imageView.getDrawable().getIntrinsicHeight();mParams.gravity = Gravity.TOP | Gravity.LEFT;mParams.x= (int) mDragPoint.x - imgWidth / 2;mParams.y= (int) mDragPoint.y - imgHeight / 2;if(imageView.getParent() == null) {mWindowManager.addView(imageView, mParams);}else{Log.e(TAG,"已经有小姐姐了，你还想要几个啊，?！");}if(!animDrawable.isRunning()) {animDrawable.start();}else{animDrawable.stop();animDrawable.start();}long duration = getAnimationDuration(animDrawable);imageView.postDelayed(new Runnable() {@Overridepublic void run() {animDrawable.stop();imageView.clearAnimation();mWindowManager.removeViewImmediate(imageView);//爆炸动画之后复位 为了多次演示 实际项目中下面两行代码需要注释掉mIsOutUp = false;updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);}},duration);
}

7. 项目源代码下载

后面统一提供代码下载地址

8. 联系方式

QQ:1509815887

这篇关于自定义View实战之仿QQ小红点实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---