自定义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();
    //绘制path
    canvas.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() {
        @Override
        public 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() {
        @Override
        public void run() {
            animDrawable.stop();
            imageView.clearAnimation();
            mWindowManager.removeViewImmediate(imageView);
            //爆炸动画之后复位 为了多次演示 实际项目中下面两行代码需要注释掉
            mIsOutUp = false;
            updateDragCenterXY(mFixedPoint.x,mFixedPoint.y);
        }
    },duration);
}

7. 项目源代码下载

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

8. 联系方式

QQ:1509815887