android 自定义环形进度条，渐变色

什么也不说先上图

做一个类似qq记步的j进度条，直接上代码

首先在onmeasure方法中测量View的宽高

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int defaultWidth = Integer.MAX_VALUE;
        int width;
        int height;
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        //  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //  int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.EXACTLY || widthMode == MeasureSpec.AT_MOST) {

        //在这两种测量模式下，宽的取值
            width = widthSize;
        } else {
            width = defaultWidth;
        }
        int defaultHeight = (int) (width * 1.f / mRatio);//高取宽的一定比列
        height = defaultHeight;
        setMeasuredDimension(width, height);
        Log.i("TAG", "width:" + width + "| height:" + height);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;

        mArcCenterX = (int) (mWidth / 2.f);
        mArcCenterY = (int) (160.f / 525.f * mHeight);
        mArcRect = new RectF();//这里为外切矩形设置显示比列
        mArcRect.left = mArcCenterX - 125.f / 450.f * mWidth;
        mArcRect.top = mArcCenterY - 125.f / 525.f * mHeight;
        mArcRect.right = mArcCenterX + 125.f / 450.f * mWidth;
        mArcRect.bottom = mArcCenterY + 125.f / 525.f * mHeight;

        mArcWidth = 20.f / 450.f * mWidth;
//        mBarWidth = 16.f / 450.f * mWidth;

        //画笔的宽度一定要在这里设置才能自适应
        allPaint.setStrokeWidth(mArcWidth);
        progressPaint.setStrokeWidth(mArcWidth);
//        mBarPaint.setStrokeWidth(mBarWidth);
    }

说一下  在onMeasure()方法中的测量值会在onSizeChanged（）被应用，在测量的方法中主要判断了测量模式不同时，即（

widthMode == MeasureSpec.EXACTLY || widthMode == MeasureSpec.AT_MOST）宽和高的取值，高取宽的(width * 1.f / mRatio)倍，

一些值的初始化 ，赋值，一般放到onSizeChanged（）方法中。

 onSizeChanged（），很重要，它决定了这个View是按照怎样的比列进行绘制的，这样的话，无论该View的大小是多少，view的内容还是一样。

     下面来说一下ondraw()方法，

 @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);

        float right =  getWidth()/2;
        float left =  getWidth()/2;

        //此处设置渐变色
        Shader mShader = new SweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null);
        Matrix matrix = new Matrix();
        matrix.setRotate(130, right, left);//很重要
        mShader.setLocalMatrix(matrix);
        progressPaint.setShader(mShader);

        //画整个圆弧
        canvas.drawArc(mArcRect,135,270,false,allPaint);

        if(isDraw){
            //画进度
            canvas.drawArc(mArcRect,135, 270-currceProgress,false,progressPaint);
        }

        /**
         * 测量后的
         */
        //4.绘制圆弧里面的文字
        xPos = mArcCenterX;
        yPos = (int) (mArcCenterY - 40.f / 525.f * mHeight);
        hintPaint.setTextAlign(Paint.Align.CENTER);
        hintPaint.setTextSize(15.f / 450.f * mWidth);
        canvas.drawText("截至22:50分已走", xPos, yPos, hintPaint);
        vTextPaint.setTextAlign(Paint.Align.CENTER);
        vTextPaint.setTextSize(42.f / 450.f * mWidth);
//        vTextPaint.setColor(mThemeColor);
        canvas.drawText( "50", mArcCenterX, mArcCenterY, vTextPaint);
        yPos = (int) (mArcCenterY + 50.f / 525.f * mHeight);
        curSpeedPaint.setColor(Color.parseColor("#C1C1C1"));
        curSpeedPaint.setTextSize(13.f / 450.f * mWidth);
        canvas.drawText("好友平均5620步", mArcCenterX, yPos, curSpeedPaint);


    }
此处注意，画的圆弧的位置由mArcRect决定（外切矩形），这里附上一张图

由于矩形的坐标是按view宽高比列设置的，所以，View在设置不同的dp的时候才不会变形。

再说一下渐变色的原理，

 Shader mShader = new SweepGradient(right,left,new int[]{Color.parseColor("#ff2b00"), Color.parseColor("#ffd200"), Color.parseColor("#61f09a"), Color.parseColor("#61f09a")},null);
        Matrix matrix = new Matrix();
        matrix.setRotate(130, right, left);//很重要
        mShader.setLocalMatrix(matrix);
        progressPaint.setShader(mShader);
Shader
有四个子类，都是用于颜色渐变的，我们用的SweepGradient是梯度渐变，结合矩阵，形成镜像。做成渐变。