android实现圆形渐变进度条

1
2
3
4
5
6
7
8
9
<declare-styleable name="RoundProgress">
    <attr name="bgColor" format="color" />
    <attr name="roundWidth" format="dimension" />
    <attr name="textColor" format="color" />
    <attr name="textSize" format="dimension" />
    <attr name="maxProgress" format="integer" />
    <attr name="textIsDisplayable" format="boolean" />
    <attr name="lineColor" format="color" />
</declare-styleable>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
package com.blankj.progressring;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;

import org.jetbrains.annotations.Nullable;

/**
 * 类描述：渐变的圆形进度条
 *
 * @author：lusy
 * @date ：2018/10/17
 */
public class RoundProgress extends View {
  private static final String TAG = "roundProgress";
  /**
   * 背景圆环画笔
   */
  private Paint bgPaint;
  /**
   * 白色标记画笔
   */
  private Paint iconPaint;
  /**
   * 进度画笔
   */
  private Paint progressPaint;
  /**
   * 进度文本画笔
   */
  private Paint textPaint;
  /**
   * 背景圆环的颜色
   */
  private int bgColor;
  /**
   * 线条进度的颜色
   */
  private int iconColor;

  private int[] progressColor;
  /**
   * 中间进度百分比的字符串的颜色
   */
  private int textColor;
  /**
   * 中间进度百分比的字符串的字体大小
   */
  private float textSize;
  /**
   * 圆环的宽度
   */
  private float roundWidth;
  /**
   * 最大进度
   */
  private int max;
  /**
   * 当前进度
   */
  private float progress;
  /**
   * 是否显示中间的进度
   */
  private boolean textIsDisplayable;
  /**
   * 圆环半径
   */
  private int mRadius;
  private int center;

  private float startAngle = -90;
  private float currentAngle;
  private float currentProgress;

  public RoundProgress(Context context) {
    this(context, null);
  }

  public RoundProgress(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);

    //获取自定义属性和默认值
    bgColor = mTypedArray.getColor(R.styleable.RoundProgress_bgColor, Color.parseColor("#2d2d2d"));
    iconColor = mTypedArray.getColor(R.styleable.RoundProgress_lineColor, Color.parseColor("#ffffff"));
    textColor = mTypedArray.getColor(R.styleable.RoundProgress_textColor, Color.parseColor("#ffffff"));
    textSize = mTypedArray.getDimension(R.styleable.RoundProgress_textSize, 15);
    roundWidth = mTypedArray.getDimension(R.styleable.RoundProgress_roundWidth, 5);
    max = mTypedArray.getInteger(R.styleable.RoundProgress_maxProgress, 100);
    textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgress_textIsDisplayable, true);
    progressColor = new int[]{Color.parseColor("#747eff"), Color.parseColor("#0018ff"), Color.TRANSPARENT};
    mTypedArray.recycle();
    initPaint();
  }

  public RoundProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }


  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //测量控件应占的宽高大小，此处非必需，只是为了确保布局中设置的宽高不一致时仍显示完整的圆
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
  }

  private void initPaint() {

    bgPaint = new Paint();
    bgPaint.setStyle(Paint.Style.STROKE);
    bgPaint.setAntiAlias(true);
    bgPaint.setColor(bgColor);
    bgPaint.setStrokeWidth(roundWidth);

    iconPaint = new Paint();
    iconPaint.setStyle(Paint.Style.STROKE);
    iconPaint.setAntiAlias(true);
    iconPaint.setColor(iconColor);
    iconPaint.setStrokeWidth(roundWidth);

    progressPaint = new Paint();
    progressPaint.setStyle(Paint.Style.STROKE);
    progressPaint.setAntiAlias(true);
    progressPaint.setStrokeWidth(roundWidth);

    textPaint = new Paint();
    textPaint.setStyle(Paint.Style.STROKE);
    textPaint.setTypeface(Typeface.DEFAULT_BOLD);
    textPaint.setAntiAlias(true);
    textPaint.setColor(textColor);
    textPaint.setTextSize(textSize);
    textPaint.setStrokeWidth(0);


  }

  @Override
  protected void onDraw(Canvas canvas) {
    /**
     * 画最外层的大圆环
     */
    //获取圆心的x坐标
    center = Math.min(getWidth(), getHeight()) / 2;
    // 圆环的半径
    mRadius = (int) (center - roundWidth / 2);

    RectF oval = new RectF(center - mRadius, center - mRadius, center + mRadius, center + mRadius);
    //画背景圆环
    canvas.drawArc(oval, startAngle, 360, false, bgPaint);
    //画进度圆环
    drawProgress(canvas, oval);

    canvas.drawArc(oval, startAngle, currentAngle, false, progressPaint);
    //画白色圆环
    float start = startAngle + currentAngle - 1;
    canvas.drawArc(oval, start, 3, false, iconPaint);

    //百分比文字
    int percent = (int) (((float) progress / (float) max) * 100);
    //测量字体宽度，我们需要根据字体的宽度设置在圆环中间
    String text = String.valueOf(percent)+"%";
    Rect textRect = new Rect();
    textPaint.getTextBounds(text, 0, text.length(), textRect);
    if (textIsDisplayable && percent >= 0) {
      //画出进度百分比文字
      float x = (getWidth() - textRect.width()) / 2;
      float y = (getHeight() + textRect.height()) / 2;
      canvas.drawText(text, x, y, textPaint);
    }
    if (currentProgress < progress) {
      currentProgress++;
      postInvalidate();
    }

  }

  /**
   * 画进度圆环
   *
   * @param canvas
   * @param oval
   */
  private void drawProgress(Canvas canvas, RectF oval) {
    float section = progress / 100;
    currentAngle = section * 360;
    //把需要绘制的角度分成100等分
    float unitAngle = (float) (currentAngle / 100.0);
    for (float i = 0, end = currentProgress * unitAngle; i <= end; i++) {
      SweepGradient shader = new SweepGradient(center, center, progressColor, new float[]{0.0f, section, 1.0f});
      Matrix matrix = new Matrix();
      matrix.setRotate(startAngle, center, center);
      shader.setLocalMatrix(matrix);
      progressPaint.setShader(shader);
      canvas.drawArc(oval,
          startAngle + i,
          1,
          false,
          progressPaint);
    }
  }


  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    //计算外圆半径 宽，高最小值-填充边距/2
    center = (Math.min(w, h)) / 2;
    mRadius = (int) ((Math.min(w, h)) - roundWidth / 2);

  }


  public int getMax() {
    return max;
  }

  /**
   * 设置进度的最大值
   *
   * @param max
   */
  public void setMax(int max) {
    if (max < 0) {
      Log.e(TAG, "max progress not allow <0");
      return;
    }
    this.max = max;
  }

  /**
   * 获取进度
   *
   * @return
   */
  public float getProgress() {
    return progress;
  }

  /**
   * 设置进度
   *
   * @param progressValue
   * @param useAnima   是否需要动画
   */

  public void setProgress(float progressValue, boolean useAnima) {
    float percent = progressValue * max / 100;
    if (percent < 0) {
      percent = 0;
    }
    if (percent > 100) {
      percent = 100;
    }
    //使用动画
    if (useAnima) {
      ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, percent);
      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
          progress = (float) animation.getAnimatedValue();
          postInvalidate();
        }
      });
      valueAnimator.setInterpolator(new LinearInterpolator());
      valueAnimator.setDuration(1500);
      valueAnimator.start();
    } else {
      this.progress = percent;
      postInvalidate();
    }
  }


  public int getTextColor() {
    return textColor;
  }

  public void setTextColor(int textColor) {
    this.textColor = textColor;
  }

  public float getTextSize() {
    return textSize;
  }

  public void setTextSize(float textSize) {
    this.textSize = textSize;
  }

  public float getRoundWidth() {
    return roundWidth;
  }

  public void setRoundWidth(float roundWidth) {
    this.roundWidth = roundWidth;
  }

  public int[] getProgressColor() {
    return progressColor;
  }

  public void setProgressColor(int[] progressColor) {
    this.progressColor = progressColor;
    postInvalidate();
  }

  public int getBgColor() {
    return bgColor;
  }

  public void setBgColor(int bgColor) {
    this.bgColor = bgColor;
  }

  public int getIconColor() {
    return iconColor;
  }

  public void setIconColor(int iconColor) {
    this.iconColor = iconColor;
  }

  public boolean isTextIsDisplayable() {
    return textIsDisplayable;
  }

  public void setTextIsDisplayable(boolean textIsDisplayable) {
    this.textIsDisplayable = textIsDisplayable;
  }

  public int getmRadius() {
    return mRadius;
  }

  public void setmRadius(int mRadius) {
    this.mRadius = mRadius;
  }

  public int getCenter() {
    return center;
  }

  public void setCenter(int center) {
    this.center = center;
  }

  public float getStartAngle() {
    return startAngle;
  }

  public void setStartAngle(float startAngle) {
    this.startAngle = startAngle;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#242424"
  android:gravity="center">


  <LinearLayout
    android:id="@+id/buttonLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <Button
      android:id="@+id/addProgress"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="进度+" />

    <Button
      android:id="@+id/changeColor"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="10dp"
      android:layout_marginRight="10dp"
      android:text="设置颜色" />

    <Button
      android:id="@+id/subtraceProgress"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="进度-" />
  </LinearLayout>

  <com.blankj.progressring.RoundProgress
    android:id="@+id/socProgress"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_below="@id/buttonLayout"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:layout_marginLeft="20dp"
    android:layout_marginBottom="2dp"
    app:bgColor="@color/bgColor"
    app:maxProgress="100"
    app:roundWidth="8dp"
    app:textIsDisplayable="true"
    app:textSize="18sp" />

</RelativeLayout>