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是梯度渐变，结合矩阵，形成镜像。做成渐变。