<p>最近项目中用到渐变圆环进度条，自己也写了一下，用到一些知识，以前没有用过，使用过程中有一些问题，在此做一下笔记。</p>    <p>渐变颜色其实用到的是颜色数组，然后根据数组计算来的，当然计算是Android系统进行的，不需要我们手动计算，我们只需要设置颜色数组和颜色值对应位置即可。画圆形渐变用到一个属性：SweepGradient，他的父类是一个Shader，</p>    <p>由官方文档看到他有两个构造函数：</p>    <pre>  <code class="language-java">SweepGradient(float cx, float cy, int color0, int color1)  SweepGradient(float cx, float cy, int colors[], float positions[])  </code></pre>    <ul>     <li>cx:要画的圆环的中心点x坐标；</li>     <li>cy:要画的圆环的中心点y坐标；</li>     <li>color0:起始颜色值；</li>     <li>color1:结束颜色值；</li>     <li>colors[]:颜色数组；</li>     <li>positions[]:对应颜色值的位置，与颜色值数组个数相等，里面的值均为（0–1）的数字。</li>    </ul>    <p>先看一张效果图（图一）：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5a944f913f59ebd0fffadab6b6274c0f.png"></p>    <p>这就是一张渐变圆环图，上面的箭头和数字后面解释。</p>    <p>我们主要研究第二个构造函数，颜色数组和颜色位置的使用方法。</p>    <p>首先看一个例子：</p>    <pre>  <code class="language-java">/**   * 圆形渐变进度条   * 相关知识:   * <p>   * Created by yuchuan on 16/9/29.   */    public class CircleGradientProgressbar extends View {        private final static int DURATION = 3000;      private int mWidth;      private int mHeight;      private int mDiam;        private int mColorGreen;      private int mColorYellow;      private int mColorRed;        private final float mMaxProgress = 100f;      //默认进度      private int mProgress = 80;        private int mCurrentProgress = 100;      //进图条圆环宽度      private int mProgressStrokeWidth = 10;      //进度条背景画笔      private Paint mCirclePaint;      //进度条画笔      private Paint mProgressPaint;      private Shader mProgressShader;        //画圆所在的距形区域      private RectF mProgressOval;        private ValueAnimator mAnimator;        public CircleGradientProgressbar(Context context) {          this(context, null);      }        public CircleGradientProgressbar(Context context, AttributeSet attrs) {          super(context, attrs);          init();      }        private void init() {            mColorGreen = getResources().getColor(R.color.mx_circle_progressbar_green);          mColorYellow = getResources().getColor(R.color.mx_circle_progressbar_orange);          mColorRed = getResources().getColor(R.color.mx_circle_progressbar_red);            mProgressOval = new RectF();            mCirclePaint = new Paint();          mCirclePaint.setAntiAlias(true);          mCirclePaint.setColor(Color.GRAY);            mProgressPaint = new Paint();          //设置抗锯齿          mProgressPaint.setAntiAlias(true);          //设置笔为圆角  //        mProgressPaint.setStrokeCap(Paint.Cap.ROUND);          mProgressPaint.setStyle(Paint.Style.STROKE);            mAnimator = ValueAnimator.ofFloat(0, 1f);            mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {              @Override              public void onAnimationUpdate(ValueAnimator animation) {                  float percent = (float) animation.getAnimatedValue();                  if (percent > 0) {                      mCurrentProgress = (int) (mProgress * percent);                      postInvalidate();                  }              }          });        }        @Override      protected void onDraw(Canvas canvas) {          super.onDraw(canvas);          mWidth = getWidth();          mHeight = getHeight();          mDiam = Math.min(mWidth, mHeight);          mProgressStrokeWidth = mDiam / 6;          drawCircle(canvas);          drawSweepProgressBar(canvas, mWidth / 2, mHeight / 2);      }        private void drawCircle(Canvas canvas) {          canvas.drawArc(mProgressOval, 0, 360, false, mCirclePaint);      }        /**       * 画渐变圆环:       * colorSweep[]: 渐变颜色数组       * position[]:   每个颜色值的相对位置,个数与颜色数组个数相等       * 注:位置与渐变颜色值的设置教程见博客:       *       * @param canvas 画布       * @param cx     圆环中心X坐标       * @param cy     圆环中心Y坐标       */      private void drawSweepProgressBar(Canvas canvas, int cx, float cy) {            //设置圆环的大小          mProgressOval.top = cy - mDiam / 4;          mProgressOval.left = cx - mDiam / 4;          mProgressOval.bottom = cy + mDiam / 4;          mProgressOval.right = cx + mDiam / 4;            //画渐变颜色          int colorSweep[] = {mColorGreen, mColorYellow, mColorRed};          float position[] = {0f,0.5f,0.7f};                    mProgressShader = new SweepGradient(cx, cy, colorSweep, position);          mProgressPaint.setShader(mProgressShader);          mProgressPaint.setStrokeWidth(mProgressStrokeWidth);          canvas.drawArc(mProgressOval, 0, ((float) mCurrentProgress / mMaxProgress) * 360, false, mProgressPaint); // 绘制进度圆弧，这里是蓝色        }        public void setProgress(int progress) {          this.mProgress = progress;          if (mAnimator != null && progress > 0) {              if (mAnimator.isRunning()) {                  return;              }              mAnimator.setDuration((long) (DURATION / mMaxProgress * progress));              mAnimator.start();          }      }  }  </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cc8c0afde1e63376fff4a891f9c6c953.png"></p>    <p>此时的颜色数组和位置参数为：</p>    <pre>  <code class="language-java">int colorSweep[] = {mColorGreen, mColorYellow, mColorRed};  float position[] = {0f,0.5f,0.7f};  </code></pre>    <p>下面我们更改一下颜色值的位置：</p>    <pre>  <code class="language-java">int colorSweep[] = {mColorGreen, mColorYellow, mColorRed};  float position[] = {0.25f,0.5f,0.75f};  </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/83cc4e1eb4376a6becc260244102bfde.png"></p>    <p>对比上面两个图片我们看到随着第一个位置的值的增大，第一个颜色值的渐变色开始位置也在向后移动。此时我们画圆环是从0度开始的，也就是3点钟的位置开始，顺时针开始画圆环。第一个颜色绿色也是从这个位置开始的。那么我们看看如果我改变开始画的位置，有什么变化吗？</p>    <p>我用上面第二组的数据，然后只改变画圆环的初始位置：</p>    <pre>  <code class="language-java">int colorSweep[] = {mColorGreen, mColorYellow, mColorRed};  float position[] = {0.25f,0.5f,0.75f};  canvas.drawArc(mProgressOval, 0, ((float) mCurrentProgress / mMaxProgress) * 360, false, mProgressPaint);  </code></pre>    <p>效果图如下：</p>    <p><img src="https://simg.open-open.com/show/1c49a79fb7b820144a1d1548a2fa2bd4.png" alt="自定义View之—渐变进度条" width="480" height="484"></p>    <p>显示效果和上面一个是一样的，只是运行时你会发现，圆环是从（图一）0.75那个位置开始顺时针画的，并且开始画的颜色是红色的，由此判断，第一个颜色值是用（图一）0的那个位置顺时针开始计算的，那么如果我想从0.75那个位置开始画并且颜色从绿的开始怎么画，那你需要将开始画的角度改为：-90，然后更改颜色数组和颜色位置数组：</p>    <pre>  <code class="language-java">int colorSweep[] = {mColorGreen, mColorGreen, mColorYellow, mColorRed, mColorGreen, mColorGreen};  float position[] = {0.1f, 0.25f, 0.5f, 0.751f, 0.75f, 1f};  canvas.drawArc(mProgressOval, -90, ((float) mCurrentProgress / mMaxProgress) * 360, false, mProgressPaint);  </code></pre>    <p>效果图如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1d2c19e2eedccdaf64981a23c653dc9a.png"></p>    <p>此时我们看到，绿色是从（图一）0.75位置开始的，并且圆环也是从这个位置开始画的，但是此时我的颜色值和位置增加了，主要是后面部分，倒数第二个颜色值是绿色，对应位置是0.75，也是就分段设置颜色值，0.75的位置为绿色，最后一个也是绿色，则说明从0.75之后到1的位置都是绿色，然后0后面的颜色根据位置数组第一个参数开始计算，如果角度不是0就要按照这个计算进行调整。</p>    <p>另外，最后一个例子中相同颜色设置了多个，这个是调节渐变和纯色位置的，也就是相同颜色位置间的颜色是纯色的，不同颜色值中间的颜色是过度的，自己可以调节一下掌握以下技巧。</p>    <p> </p>    <p> </p>