自定义彩色进度条效果

自定义彩色进度条效果

效果如下：颜色可以随意设置

View代码

  1 package angus.wsj.com.circularprogressview;
  2 
  3 import android.content.Context;
  4 import android.util.AttributeSet;
  5 import android.view.View;
  6 import android.animation.Animator;
  7 import android.animation.AnimatorListenerAdapter;
  8 import android.animation.AnimatorSet;
  9 import android.animation.ValueAnimator;
 10 import android.content.res.Resources;
 11 import android.content.res.TypedArray;
 12 import android.graphics.Canvas;
 13 import android.graphics.Color;
 14 import android.graphics.LinearGradient;
 15 import android.graphics.Paint;
 16 import android.graphics.RectF;
 17 import android.graphics.Shader;
 18 import android.os.Build;
 19 import android.util.TypedValue;
 20 import android.view.animation.DecelerateInterpolator;
 21 import android.view.animation.LinearInterpolator;
 22 
 23 /**
 24  * Created by Angus
 25  * Angus on 2018/1/20 20:46
 26  */
 27 
 28 public class CircularProgressView extends View {
 29 
 30     private static final float INDETERMINANT_MIN_SWEEP = 15f;
 31 
 32     private Paint paint;
 33     private int size = 0;
 34     private RectF bounds;
 35 
 36     private boolean isIndeterminate, autostartAnimation;
 37     private float currentProgress, maxProgress, indeterminateSweep, indeterminateRotateOffset;
 38     private int thickness, color, animDuration, animSwoopDuration, animSyncDuration, animSteps;
 39 
 40 
 41     // Animation related stuff
 42     private float startAngle;
 43     private float actualProgress;
 44     private ValueAnimator startAngleRotate;
 45     private ValueAnimator progressAnimator;
 46     private AnimatorSet indeterminateAnimator;
 47     private float initialStartAngle;
 48     private int[] mColors;//渐变色数组
 49 
 50     public CircularProgressView(Context context) {
 51         super(context);
 52         init(null, 0);
 53     }
 54 
 55     public CircularProgressView(Context context, AttributeSet attrs) {
 56         super(context, attrs);
 57         init(attrs, 0);
 58     }
 59 
 60     public CircularProgressView(Context context, AttributeSet attrs, int defStyle) {
 61         super(context, attrs, defStyle);
 62         init(attrs, defStyle);
 63     }
 64 
 65     protected void init(AttributeSet attrs, int defStyle) {
 66 
 67         //设置渐变颜色
 68         Shader s = new LinearGradient(0, 0, 100, 100,
 69                 new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,
 70                         Color.LTGRAY }, null, Shader.TileMode.REPEAT);
 71         initAttributes(attrs, defStyle);
 72 
 73         paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 74         paint.setStyle(Paint.Style.STROKE);
 75         paint.setStrokeWidth(thickness);
 76         paint.setStrokeCap(Paint.Cap.BUTT);
 77         paint.setShader(s);
 78 
 79         bounds = new RectF();
 80     }
 81 
 82     private void initAttributes(AttributeSet attrs, int defStyle)
 83     {
 84         final TypedArray a = getContext().obtainStyledAttributes(
 85                 attrs, R.styleable.CircularProgressView, defStyle, 0);
 86 
 87         Resources resources = getResources();
 88 
 89         // 初始化属性
 90         currentProgress = a.getFloat(R.styleable.CircularProgressView_cpv_progress,
 91                 resources.getInteger(R.integer.cpv_default_progress));
 92         maxProgress = a.getFloat(R.styleable.CircularProgressView_cpv_maxProgress,
 93                 resources.getInteger(R.integer.cpv_default_max_progress));
 94         thickness = a.getDimensionPixelSize(R.styleable.CircularProgressView_cpv_thickness,
 95                 resources.getDimensionPixelSize(R.dimen.cpv_default_thickness));
 96         isIndeterminate = a.getBoolean(R.styleable.CircularProgressView_cpv_indeterminate,
 97                 resources.getBoolean(R.bool.cpv_default_is_indeterminate));
 98         autostartAnimation = a.getBoolean(R.styleable.CircularProgressView_cpv_animAutostart,
 99                 resources.getBoolean(R.bool.cpv_default_anim_autostart));
100         initialStartAngle = a.getFloat(R.styleable.CircularProgressView_cpv_startAngle,
101                 resources.getInteger(R.integer.cpv_default_start_angle));
102         startAngle = initialStartAngle;
103 
104         int accentColor = getContext().getResources().getIdentifier("colorAccent", "attr", getContext().getPackageName());
105 
106         // If color explicitly provided
107         if (a.hasValue(R.styleable.CircularProgressView_cpv_color)) {
108             color = a.getColor(R.styleable.CircularProgressView_cpv_color, resources.getColor(R.color.cpv_default_color));
109         }
110         // If using support library v7 accentColor
111         else if(accentColor != 0) {
112             TypedValue t = new TypedValue();
113             getContext().getTheme().resolveAttribute(accentColor, t, true);
114             color = t.data;
115         }
116         // If using native accentColor (SDK >21)
117         else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
118             TypedArray t = getContext().obtainStyledAttributes(new int[] { android.R.attr.colorAccent });
119             color = t.getColor(0, resources.getColor(R.color.cpv_default_color));
120         }
121         else {
122             //Use default color
123             color = resources.getColor(R.color.cpv_default_color);
124         }
125 
126         animDuration = a.getInteger(R.styleable.CircularProgressView_cpv_animDuration,
127                 resources.getInteger(R.integer.cpv_default_anim_duration));
128         animSwoopDuration = a.getInteger(R.styleable.CircularProgressView_cpv_animSwoopDuration,
129                 resources.getInteger(R.integer.cpv_default_anim_swoop_duration));
130         animSyncDuration = a.getInteger(R.styleable.CircularProgressView_cpv_animSyncDuration,
131                 resources.getInteger(R.integer.cpv_default_anim_sync_duration));
132         animSteps = a.getInteger(R.styleable.CircularProgressView_cpv_animSteps,
133                 resources.getInteger(R.integer.cpv_default_anim_steps));
134         a.recycle();
135     }
136 
137     @Override
138     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
139         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
140         int xPad = getPaddingLeft() + getPaddingRight();
141         int yPad = getPaddingTop() + getPaddingBottom();
142         int width = getMeasuredWidth() - xPad;
143         int height = getMeasuredHeight() - yPad;
144         size = (width < height) ? width : height;
145         setMeasuredDimension(size + xPad, size + yPad);
146 
147     }
148 
149     @Override
150     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
151         super.onSizeChanged(w, h, oldw, oldh);
152         size = (w < h) ? w : h;
153         updateBounds();
154     }
155 
156     private void updateBounds()
157     {
158         int paddingLeft = getPaddingLeft();
159         int paddingTop = getPaddingTop();
160         bounds.set(paddingLeft + thickness, paddingTop + thickness, size - paddingLeft - thickness, size - paddingTop - thickness);
161     }
162 
163 
164 
165     @Override
166     protected void onDraw(Canvas canvas) {
167         super.onDraw(canvas);
168 
169         // Draw the arc
170         float sweepAngle = (isInEditMode()) ? currentProgress/maxProgress*360 : actualProgress/maxProgress*360;
171         if(!isIndeterminate)
172             canvas.drawArc(bounds, startAngle, sweepAngle, false, paint);
173         else
174             canvas.drawArc(bounds, startAngle + indeterminateRotateOffset, indeterminateSweep, false, paint);
175     }
176 
177 
178 
179     /**
180      * Get the thickness of the progress bar arc.
181      * @return the thickness of the progress bar arc
182      */
183     public int getThickness() {
184         return thickness;
185     }
186 
187     /**
188      * Sets the thickness of the progress bar arc.
189      * @param thickness the thickness of the progress bar arc
190      */
191     public void setThickness(int thickness) {
192         this.thickness = thickness;
193         updateBounds();
194         invalidate();
195     }
196 
197     /**
198      * Gets the progress value considered to be 100% of the progress bar.
199      * @return the maximum progress
200      */
201     public float getMaxProgress() {
202         return maxProgress;
203     }
204 
205     /**
206      * Sets the progress value considered to be 100% of the progress bar.
207      * @param maxProgress the maximum progress
208      */
209     public void setMaxProgress(float maxProgress) {
210         this.maxProgress = maxProgress;
211         invalidate();
212     }
213 
214     /**
215      * @return current progress
216      */
217     public float getProgress() {
218         return currentProgress;
219     }
220 
221     /**
222      * Sets the progress of the progress bar.
223      *
224      * @param currentProgress the new progress.
225      */
226     public void setProgress(final float currentProgress) {
227         this.currentProgress = currentProgress;
228         // Reset the determinate animation to approach the new currentProgress
229         if (!isIndeterminate) {
230             if (progressAnimator != null && progressAnimator.isRunning())
231                 progressAnimator.cancel();
232             progressAnimator = ValueAnimator.ofFloat(actualProgress, currentProgress);
233             progressAnimator.setDuration(animSyncDuration);
234             progressAnimator.setInterpolator(new LinearInterpolator());
235             progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
236                 @Override
237                 public void onAnimationUpdate(ValueAnimator animation) {
238                     actualProgress = (Float) animation.getAnimatedValue();
239                     invalidate();
240                 }
241             });
242 
243 
244             progressAnimator.start();
245         }
246         invalidate();
247 
248     }
249 
250 
251 
252     /**
253      * Starts the progress bar animation.
254      * (This is an alias of resetAnimation() so it does the same thing.)
255      */
256     public void startAnimation() {
257         resetAnimation();
258     }
259 
260     /**
261      * Resets the animation.
262      */
263     public void resetAnimation() {
264         // Cancel all the old animators
265         if(startAngleRotate != null && startAngleRotate.isRunning())
266             startAngleRotate.cancel();
267         if(progressAnimator != null && progressAnimator.isRunning())
268             progressAnimator.cancel();
269         if(indeterminateAnimator != null && indeterminateAnimator.isRunning())
270             indeterminateAnimator.cancel();
271 
272         // Determinate animation
273         if(!isIndeterminate)
274         {
275             // The cool 360 swoop animation at the start of the animation
276             startAngle = initialStartAngle;
277             startAngleRotate = ValueAnimator.ofFloat(startAngle, startAngle + 360);
278             startAngleRotate.setDuration(animSwoopDuration);
279             startAngleRotate.setInterpolator(new DecelerateInterpolator(2));
280             startAngleRotate.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
281                 @Override
282                 public void onAnimationUpdate(ValueAnimator animation) {
283                     startAngle = (Float) animation.getAnimatedValue();
284                     invalidate();
285                 }
286             });
287             startAngleRotate.start();
288 
289             // The linear animation shown when progress is updated
290             actualProgress = 0f;
291             progressAnimator = ValueAnimator.ofFloat(actualProgress, currentProgress);
292             progressAnimator.setDuration(animSyncDuration);
293             progressAnimator.setInterpolator(new LinearInterpolator());
294             progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
295                 @Override
296                 public void onAnimationUpdate(ValueAnimator animation) {
297                     actualProgress = (Float) animation.getAnimatedValue();
298                     invalidate();
299                 }
300             });
301             progressAnimator.start();
302         }
303         // Indeterminate animation
304         else
305         {
306             indeterminateSweep = INDETERMINANT_MIN_SWEEP;
307             // Build the whole AnimatorSet
308             indeterminateAnimator = new AnimatorSet();
309             AnimatorSet prevSet = null, nextSet;
310             for(int k=0;k<animSteps;k++)
311             {
312                 nextSet = createIndeterminateAnimator(k);
313                 AnimatorSet.Builder builder = indeterminateAnimator.play(nextSet);
314                 if(prevSet != null)
315                     builder.after(prevSet);
316                 prevSet = nextSet;
317             }
318 
319             // Listen to end of animation so we can infinitely loop
320             indeterminateAnimator.addListener(new AnimatorListenerAdapter() {
321                 boolean wasCancelled = false;
322                 @Override
323                 public void onAnimationCancel(Animator animation) {
324                     wasCancelled = true;
325                 }
326 
327                 @Override
328                 public void onAnimationEnd(Animator animation) {
329                     if(!wasCancelled)
330                         resetAnimation();
331                 }
332             });
333             indeterminateAnimator.start();
334 
335         }
336 
337 
338     }
339 
340     /**
341      * Stops the animation
342      */
343 
344     public void stopAnimation() {
345         if(startAngleRotate != null) {
346             startAngleRotate.cancel();
347             startAngleRotate = null;
348         }
349         if(progressAnimator != null) {
350             progressAnimator.cancel();
351             progressAnimator = null;
352         }
353         if(indeterminateAnimator != null) {
354             indeterminateAnimator.cancel();
355             indeterminateAnimator = null;
356         }
357     }
358 
359     // Creates the animators for one step of the animation
360     private AnimatorSet createIndeterminateAnimator(float step)
361     {
362         final float maxSweep = 360f*(animSteps-1)/animSteps + INDETERMINANT_MIN_SWEEP;
363         final float start = -90f + step*(maxSweep-INDETERMINANT_MIN_SWEEP);
364 
365         // Extending the front of the arc
366         ValueAnimator frontEndExtend = ValueAnimator.ofFloat(INDETERMINANT_MIN_SWEEP, maxSweep);
367         frontEndExtend.setDuration(animDuration/animSteps/2);
368         frontEndExtend.setInterpolator(new DecelerateInterpolator(1));
369         frontEndExtend.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
370             @Override
371             public void onAnimationUpdate(ValueAnimator animation) {
372                 indeterminateSweep = (Float) animation.getAnimatedValue();
373                 invalidate();
374             }
375         });
376 
377         // Overall rotation
378         ValueAnimator rotateAnimator1 = ValueAnimator.ofFloat(step*720f/animSteps, (step+.5f)*720f/animSteps);
379         rotateAnimator1.setDuration(animDuration/animSteps/2);
380         rotateAnimator1.setInterpolator(new LinearInterpolator());
381         rotateAnimator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
382             @Override
383             public void onAnimationUpdate(ValueAnimator animation) {
384                 indeterminateRotateOffset = (Float) animation.getAnimatedValue();
385             }
386         });
387 
388         // Followed by...
389 
390         // Retracting the back end of the arc
391         ValueAnimator backEndRetract = ValueAnimator.ofFloat(start, start+maxSweep-INDETERMINANT_MIN_SWEEP);
392         backEndRetract.setDuration(animDuration/animSteps/2);
393         backEndRetract.setInterpolator(new DecelerateInterpolator(1));
394         backEndRetract.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
395             @Override
396             public void onAnimationUpdate(ValueAnimator animation) {
397                 startAngle = (Float) animation.getAnimatedValue();
398                 indeterminateSweep = maxSweep - startAngle + start;
399                 invalidate();
400             }
401         });
402 
403         // More overall rotation
404         ValueAnimator rotateAnimator2 = ValueAnimator.ofFloat((step + .5f) * 720f / animSteps, (step + 1) * 720f / animSteps);
405         rotateAnimator2.setDuration(animDuration / animSteps / 2);
406         rotateAnimator2.setInterpolator(new LinearInterpolator());
407         rotateAnimator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
408             @Override
409             public void onAnimationUpdate(ValueAnimator animation) {
410                 indeterminateRotateOffset = (Float) animation.getAnimatedValue();
411             }
412         });
413 
414         AnimatorSet set = new AnimatorSet();
415         set.play(frontEndExtend).with(rotateAnimator1);
416         set.play(backEndRetract).with(rotateAnimator2).after(rotateAnimator1);
417         return set;
418     }
419 
420     @Override
421     protected void onAttachedToWindow() {
422         super.onAttachedToWindow();
423         if(autostartAnimation)
424             startAnimation();
425     }
426 
427     @Override
428     protected void onDetachedFromWindow() {
429         super.onDetachedFromWindow();
430         stopAnimation();
431     }
432 
433     @Override
434     public void setVisibility(int visibility) {
435         int currentVisibility = getVisibility();
436         super.setVisibility(visibility);
437         if (visibility != currentVisibility) {
438             if (visibility == View.VISIBLE){
439                 resetAnimation();
440             } else if (visibility == View.GONE || visibility == View.INVISIBLE) {
441                 stopAnimation();
442             }
443         }
444     }
445 }

MainActivity代码设置了下延时效果：

  1 package angus.wsj.com.circularprogressview;
  2 
  3 import android.os.Handler;
  4 import android.os.SystemClock;
  5 import android.support.v7.app.AppCompatActivity;
  6 import android.os.Bundle;
  7 
  8 /**
  9  * Created by Angus
 10  * Angus on 2018/1/20 20:46
 11  * 自定义彩色进度条
 12  */
 13 public class MainActivity extends AppCompatActivity {
 14     CircularProgressView progressView;
 15     Thread updateThread;
 16     @Override
 17     protected void onCreate(Bundle savedInstanceState) {
 18         super.onCreate(savedInstanceState);
 19         setContentView(R.layout.activity_main);
 20         progressView = findViewById(R.id.progress_view);
 21         startAnimationThreadStuff(1000);
 22     }
 23     private void startAnimationThreadStuff(long delay) {
 24         if (updateThread != null && updateThread.isAlive())
 25             updateThread.interrupt();
 26         // 开启延迟动画
 27         final Handler handler = new Handler();
 28         handler.postDelayed(new Runnable() {
 29             @Override
 30             public void run() {
 31 
 32                     progressView.setProgress(0f);
 33 
 34                     updateThread = new Thread(new Runnable() {
 35                         @Override
 36                         public void run() {
 37                             while (progressView.getProgress() < progressView.getMaxProgress() && !Thread.interrupted()) {
 38 
 39                                 handler.post(new Runnable() {
 40                                     @Override
 41                                     public void run() {
 42                                         progressView.setProgress(progressView.getProgress() + 10);
 43                                     }
 44                                 });
 45                                 SystemClock.sleep(250);
 46                             }
 47                         }
 48                     });
 49                     updateThread.start();
 50 
 51 
 52                 progressView.startAnimation();
 53             }
 54         }, delay);
 55     }
 56 }

Demo下载