黏性控件的使用

在qq上面用一个红色的黏性控件来表示消息已读或未读。可拖动。今天就来分享一下如何实现这个功能。我们需要的jar包是nineoldandroids-2.4.0.jar，还需要一个开源的几何工具类GeometryUtil.java。

应用场景: 未读提醒的清除

1.画静态图

//1.画固定圆canvas.drawCircle(mStickCenter.x,mStickCenter.y,mStickRadious, mPaint);//2.画拖拽圆    canvas.drawCircle(mDragCenter.x,mDragCenter.y,mDragRadius, mPaint);

2.把静态的数值变成变量(计算得到真实的变量)

// 3. 获取控制点坐标        mControlPoint = GeometryUtil.getMiddlePoint(mDragCenter, mStickCenter);    // 保存画布状态    canvas.save();    canvas.translate(0, -statusBarHeight);        // 画出最大范围(参考用)        mPaint.setStyle(Style.STROKE);        canvas.drawCircle(mStickCenter.x, mStickCenter.y, farestDistance, mPaint);        mPaint.setStyle(Style.FILL);

3.不断地修改变量, 重绘界面, 动起来了.

// 计算连接点值, 控制点, 固定圆半径        // 1. 获取固定圆半径(根据两圆圆心距离)        float tempStickRadius = getTempStickRadius();        // 2. 获取直线与圆的交点        float yOffset = mStickCenter.y - mDragCenter.y;        float xOffset = mStickCenter.x - mDragCenter.x;        Double lineK = null;        if(xOffset != 0){            lineK = (double) (yOffset / xOffset);        }        // 通过几何图形工具获取交点坐标        mDragPoints = GeometryUtil.getIntersectionPoints(mDragCenter, mDragRadius, lineK);        mStickPoints = GeometryUtil.getIntersectionPoints(mStickCenter, tempStickRadius, lineK);

4.功能分析:

a. 拖拽超出范围,断开, 松手, 消失
b. 拖拽超出范围,断开,放回去了,恢复
c. 拖拽没超出范围, 松手,弹回去

case MotionEvent.ACTION_UP:            if(isOutofRange){                float d = GeometryUtil.getDistanceBetween2Points(mDragCenter, mStickCenter);                if(d > farestDistance){                    // a. 拖拽超出范围,断开, 松手, 消失                    isDisappear = true;                    invalidate();                }else {                    //b. 拖拽超出范围,断开,放回去了,恢复                    updateDragCenter(mStickCenter.x, mStickCenter.y);                }            }else {//              c. 拖拽没超出范围, 松手,弹回去                      final PointF tempDragCenter = new PointF(mDragCenter.x, mDragCenter.y);                ValueAnimator mAnim = ValueAnimator.ofFloat(1.0f);                mAnim.addUpdateListener(new AnimatorUpdateListener() {                    @Override                    public void onAnimationUpdate(ValueAnimator mAnim) {                        // 0.0 -> 1.0f                        float percent = mAnim.getAnimatedFraction();                        PointF p = GeometryUtil.getPointByPercent(tempDragCenter, mStickCenter, percent);                        updateDragCenter(p.x, p.y);                    }                });                mAnim.setInterpolator(new OvershootInterpolator(4));                mAnim.setDuration(500);                mAnim.start();            }            break;