炫酷的环形调节器控件 : RegulatorView@慕课网原创_慕课网

又画了一个圆，但这次这个带了个触摸，由于最近在搞智能家居类应用，所以可想而知有很多东西需要自定义如遥控器，调节器，还有一些带动画效果的View，毕竟叫智能产品嘛，不能就是开和关两个选项加一些图片吧，所以还是要自定义一些控件的，今天这个是一个环形调节期，可以适应于空调或者热水器的远程调节控件，我们主要是用于设备的调档。

上次的写的一个控件炫酷的空气净化器控件 : AirPurgeLayoutView

1.主要功能

背光灯渐变

背光灯调色

控制环的颜色

控制环形的度数

平滑实现调节

里面所以参数都可以微调

2.背光灯效果

这里说的背光灯效果是第二个圆环的阴影背景这里实现还是非常简单的，但需要主要一下记得关闭硬件加速,要不然就没有效果了。

setLayerType(LAYER_TYPE_SOFTWARE, null); //要关闭硬件加速
mPaint.setShadowLayer(mCurShadowRadius, 0, 0, mSecondCircleShadowColor); //设置圆环阴影
实现动画效果

private void onStartBacklightAnim() {
        if (mBacklightAnim != null && mBacklightAnim.isRunning()) {
            return;
        }
        mBacklightAnim = ObjectAnimator.ofFloat(this,"curShadowRadius",0,mSecondCircleShadowRadius);
        mBacklightAnim.setDuration(mBacklightAnimDurtion);
        mBacklightAnim.setRepeatCount(ValueAnimator.INFINITE);
        mBacklightAnim.setRepeatMode(ValueAnimator.REVERSE);
        mBacklightAnim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mCurShadowRadius = mSecondCircleShadowRadius;
            }
        });
        mBacklightAnim.start();
    }

3.实现外圆环环形渐变

这个实现也挺简单的如果你知道android自定义view有三种常用渐变方法这个一看就知道(1. LinearGradient 线性渐变 2.RadialGradient 辐射渐变 3.SweepGradient 环形渐变)其实还有一些但这三个比较常用不知道的google一下或者看下官网就ok了，这里用到的是SweepGradient 但有一个问题就是他是360°的颜色从0度开始到最后不能调节颜色开始角度，所以使用时最好在首位加多加一位颜色。

//绘制颜色
if (mColors != null && mColors.length != 0) {
        canvas.save();
        canvas.rotate(90, mCenterX, mCenterY);
        if (mColors.length == 1) {
             mPaint.setColor(mColors[0]);
        } else if (mColors.length>1) {
             SweepGradient sweepGradient = new SweepGradient(mCenterX, mCenterY, mColors, null);
             mPaint.setShader(sweepGradient);
       ![sweep.gif](http://upload-images.jianshu.io/upload_images/2646598-5d1fbd181e0411b6.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
}
      canvas.drawArc(rectF, (360 - mThreeRingAngle) / 2, mThreeRingAngle, false, mPaint);
      mPaint.setShader(null);
      canvas.restore();
}

4. 滑动控制

实现滑动控制主要是监听下view的onTouchEvent方法，这里主要控件的逻辑大致是，当用户手指按下这个控件时会判断是否单机控件的第三个控制圆环，如果有出发控制，如果没有不处理触摸。


    @Override
    public boolean onTouchEvent(MotionEvent event) {

        if (isForbidSlide) return false;

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                onStopAutoFlingAnim();  //有动画立刻停止
                boolean isTakeOver = isTakeOverTouch(event.getX(),event.getY()); //第一次单机在圆环上才接管触摸
                if (isTakeOver) {
                    mPreX = (int) event.getX();
                    mPreY = (int) event.getY();
                    refreshAngle(mPreX,mPreY,true);
                    return true;
                } else {
                    return false;
                }
            case MotionEvent.ACTION_MOVE:
                refreshAngle((int) event.getX(),(int) event.getY(),false);
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true; //consumption
    }

      /**
      * 判断是否接管触摸 两种情况
      */
    private boolean isTakeOverTouch(float downX,float downY) {

        //加个0.5防止有些人眼神或手不好点不到圆弧上
        float minRadius = mThreeCircleRadius - mThreeCircleWidth/2f - 0.5f;
        float maxRadius = mThreeCircleRadius + mThreeCircleWidth/2f + 0.5f;

        //到按下点到圆心的距离
        float distanceCircle = (float) Math.abs(Math.sqrt((downX-mCenterX)*(downX-mCenterX)+(downY-mCenterY)*(downY-mCenterY)));
        if (distanceCircle >= minRadius && distanceCircle <= maxRadius) {
            if (mThreeRingAngle > 180 && downY > mCenterY) {
                float angle = (float) (Math.atan(Math.abs(downX-mCenterX)/Math.abs(downY-mCenterY))*180/Math.PI);
                if ((360-mThreeRingAngle)/2f > angle) {
                    return false;
                }
            } else if (mThreeRingAngle <= 180) {
                if (downY>mCenterY) {
                    return false;
                } else {
                    float angle = (float) (Math.atan(Math.abs(downX-mCenterX)/Math.abs(downY-mCenterY))*180/Math.PI);
                    if (angle > (360-mThreeRingAngle)/2f) {
                        return false;
                    }
                }
            }
            return true;
        }
        return false;
    }

5.实现代码滑动

这个也很简单主要是现实根据进度实现动画性的改变进度，但需要注意的是当触摸时立刻停止动画，如果动画在运行的。

private ValueAnimator mAutoFlingAnim;
    public void setCurAngle(float progress,boolean isWantAnim) {
        if (isWantAnim) {
            if (mAutoFlingAnim != null && mAutoFlingAnim.isRunning()) {
                mAutoFlingAnim.cancel();
                mAutoFlingAnim.removeAllUpdateListeners();
                mAutoFlingAnim = null;
            }
            mAutoFlingAnim = new ValueAnimator();
            float curProgress = ((mCurAngle+90+mThreeRingAngle/2f)%360)/mThreeRingAngle;
            mAutoFlingAnim.setFloatValues(curProgress,progress);
            mAutoFlingAnim.setDuration((long) (Math.abs(progress-curProgress)*2000));
            mAutoFlingAnim.setInterpolator(new LinearInterpolator());
            mAutoFlingAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    float value = (float) valueAnimator.getAnimatedValue();
                    int angle = (int) (value*mThreeRingAngle + (360-mThreeRingAngle)/2f+90)%360;
                    if (mCurAngle != angle) {
                        mCurAngle = angle;
                        invalidate();
                    }
                }
            });
            mAutoFlingAnim.start();
        } else {
            this.mCurAngle = (int) (progress*mThreeRingAngle + (360-mThreeRingAngle)/2f+90)%360;
            invalidate();
        }
    }

6.感想

最近开发智能家居产品，需要时不时定义一些view，但如果你完整的看完过android view的api时，你会发现其实真的不难，很多google都给你封装好了，像什么渐变啊，贝塞尔曲线，图片剪切，动画，触摸滑动，布局填充等，你只要学会拼接就可以，所以如果项目需要大量使用自定义控件的可以去系统的看一遍view的api。

7. RegulatorView的源码地址 8. 空气净化器控件 : AirPurgeLayoutView

炫酷的环形调节器控件 : RegulatorView原创