Android自定义控件实现带数值和动画的圆形进度条

1
2
3
4
5
6
7
8
9
10
final Random random=new Random();
final ScoreBoardView myView=(ScoreBoardView)findViewById(R.id.custom_view);
myView.setOnClickListener(new View.OnClickListener(){
 @Override
 public void onClick(View v){
  myView.setColor(Color.BLUE);
  myView.setScore(random.nextInt(28));
  myView.setWinDrawLose(random.nextInt(12),random.nextInt(15),random.nextInt(26));
 }
});

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
public class ScoreBoardView extends View {
 private Context context;
 /*弧的颜色*/
 private int mColor;
 /*积分数，胜场数，平局数，负场数*/
 private int mScore, mWinNumber, mDrawNumber, mLoseNumber;
 /*传入数字的最大值*/
 private final int FULL_SCORE = 30;
 /*动画插值器*/
 DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
 /*动画持续时间（刷新次数）*/
 private int mDuration = 10;
 /*动画刷新过程中的当前值*/
 private int mCurrentTime = 0;
 private TypedValue typedValue;
 private TypedValue typedValue1;
 private Handler mHandler = new Handler();
 private Runnable mAnimation = new Runnable() {
  @Override
  public void run() {
   if (mCurrentTime < mDuration) {
    mCurrentTime++;
    /*导致重绘调用onDraw，onDraw最后再次postDelay执行此动画，直到达到指定的次数*/
    ScoreBoardView.this.invalidate();
   }
  }
 };
 /*绘制图形*/
 private Paint paint = new Paint();
 /*绘制文字*/
 private Paint paintText = new Paint();
 
 public ScoreBoardView(Context context) {
  super(context);
  this.context=context;
  init();
 }
 
 public ScoreBoardView(Context context, AttributeSet attrs) {
  super(context, attrs);
  this.context=context;
  init();
 }
 
 public ScoreBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  this.context=context;
  init();
 }
 
 private void init() {
  /*数据初始化，默认属性*/
  mColor = Color.rgb(95, 112, 72);
  mScore = 0;
  mWinNumber = 0;
  mDrawNumber = 0;
  mLoseNumber = 0;
  typedValue=new TypedValue();
  typedValue1=new TypedValue();
  context.getTheme().resolveAttribute(R.attr.maintextclor, typedValue, true);
  context.getTheme().resolveAttribute(R.attr.maintextclor_reverse,typedValue1,true);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  /*获取控件总的宽高*/
  float totalWidth = getWidth();
  float totalHeight = getHeight();
  /*
  * DecelerateInterpolator：动画从开始到结束，变化率是一个减速的过程。
  * AccelerateInterpolator：动画从开始到结束，变化率是一个加速的过程。
  * CycleInterpolator：动画从开始到结束，变化率是循环给定次数的正弦曲线
  * AccelerateDecelerateInterpolator：动画从开始到结束，变化率是先加速后减速的过程。
  * LinearInterpolator：动画从开始到结束，变化率是线性变化。
  * */
  /*计算当前时刻动画进度值*/
  float AnimCurrentValue =mDecelerateInterpolator.getInterpolation(1.0f * mCurrentTime / mDuration);
 
  /*图形画笔设置*/
  paint.setAntiAlias(true);
  paint.setStyle(Paint.Style.STROKE);
 
  /*积分数，上边的大圆*/
  paint.setStrokeWidth(4);
  paint.setColor(mColor);
  /*积分大圆的中心坐标和半径*/
  float score_radius = totalHeight * 1 / 5, score_circle_x = totalWidth / 2, score_circle_y = totalHeight / 3;
  /*绘制圆弧*/
  canvas.drawCircle(score_circle_x, score_circle_y, score_radius, paint);
  /*文字画笔基本设置*/
  paintText.setAntiAlias(true);
  paintText.setStyle(Paint.Style.STROKE);
  /*文字从中间开始绘制*/
  /*Paint.Align.CENTER：The text is drawn centered horizontally on the x,y origin*/
  paintText.setTextAlign(Paint.Align.CENTER);
  /*文字画笔大小和颜色设置*/
  paintText.setTextSize(score_radius * 3 / 4);
  paintText.setColor(getResources().getColor(typedValue.resourceId));
  /*圆心位置绘制积分数值*/
  canvas.drawText("" + mScore, score_circle_x, score_circle_y, paintText);
  /*缩小字体绘制文本信息*/
  paintText.setTextSize(score_radius * 1 / 4);
  paintText.setAlpha(80);
  /*圆心下边绘制文本*/
  canvas.drawText("积分", score_circle_x, score_circle_y + score_radius / 2, paintText);
 
  /*设置画笔，画下边的三个小圆*/
  paint.setStrokeWidth(4);
  paint.setAlpha(255);
  /*下边三个小圆的半径*/
  float small_radius = totalHeight / 10;
  /*三个小圆的圆心的x坐标*/
  float[] circleXs = new float[]{totalWidth / 2 - score_radius * 3 / 2,
          totalWidth / 2,
          totalWidth / 2 + score_radius * 3 / 2};
  /*三个小圆的圆心的y坐标*/
  float circleY = totalHeight * 3 / 4;
  /*计算三个小圆弧扫过的角度*/
  float[] theta_values = new float[]{360 * mWinNumber / FULL_SCORE* AnimCurrentValue,
           360 * mDrawNumber / FULL_SCORE* AnimCurrentValue,
           360 * mLoseNumber / FULL_SCORE* AnimCurrentValue};
  /*设置画笔颜色，绘制外围圆环*/
  paint.setColor(getResources().getColor(typedValue1.resourceId));
  /*分别绘制三个外围圆环*/
  canvas.drawCircle(circleXs[0], circleY, small_radius, paint);//画WIN背景圆
  canvas.drawCircle(circleXs[1], circleY, small_radius, paint);//画DRAW背景圆
  canvas.drawCircle(circleXs[2], circleY, small_radius, paint);//画LOSE背景圆
  /*更改画笔颜色，绘制圆弧进度条*/
  paint.setColor(mColor);
  /*drawArc的起始角度是3点钟方向，因此要从12点钟方向开始绘制，起始角度为270度*/
  canvas.drawArc(new RectF(circleXs[0] - small_radius,
         circleY - small_radius,
         circleXs[0] + small_radius,
         circleY + small_radius),
      270, theta_values[0], false, paint);//画WIN圆形进度条
  canvas.drawArc(new RectF(circleXs[1] - small_radius,
         circleY - small_radius,
         circleXs[1] + small_radius,
         circleY + small_radius),
      270, theta_values[1], false, paint);//画DRAW圆形进度条
  canvas.drawArc(new RectF(circleXs[2] - small_radius,
         circleY - small_radius,
         circleXs[2] + small_radius,
         circleY + small_radius),
      270, theta_values[2], false, paint);//画LOSE圆形进度条
  /*绘制圆弧结束处的小圆点，实心圆*/
  paint.setStyle(Paint.Style.FILL);
  /*已知半径、圆心位置、便宜角度，根据三角函数很方便计算出小实心圆圆心坐标*/
  canvas.drawCircle(circleXs[0] + small_radius * (float) Math.sin(theta_values[0] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[0] * Math.PI / 180), 6, paint);//画WIN末尾小圆点
  canvas.drawCircle(circleXs[1] + small_radius * (float) Math.sin(theta_values[1] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[1] * Math.PI / 180), 6, paint);//画DRAW末尾小圆点
  canvas.drawCircle(circleXs[2] + small_radius * (float) Math.sin(theta_values[2] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[2] * Math.PI / 180), 6, paint);//画LOSE末尾小圆点
 
  /*绘制文字*/
  paintText.setColor(getResources().getColor(typedValue.resourceId));
  paintText.setTextSize(small_radius * 2 / 3);
  /*测量文字大小，确定绘制文字时垂直方向的位置*/
  Paint.FontMetrics fontMetrics = paint.getFontMetrics();
  float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
  /*在三个小圆的正中心位置绘制相应的数字*/
  canvas.drawText("" + (int)(mWinNumber * AnimCurrentValue), circleXs[0], circleY + textBaseLineOffset, paintText);
  canvas.drawText("" + (int)(mDrawNumber * AnimCurrentValue), circleXs[1], circleY + textBaseLineOffset, paintText);
  canvas.drawText("" + (int)(mLoseNumber * AnimCurrentValue), circleXs[2], circleY + textBaseLineOffset, paintText);
  /*调整字体大小，绘制文本信息*/
  paintText.setTextSize(small_radius * 4 / 9);
  canvas.drawText("胜场", circleXs[0], circleY - small_radius*4/3, paintText);
  canvas.drawText("平局", circleXs[1], circleY - small_radius*4/3, paintText);
  canvas.drawText("负场", circleXs[2], circleY - small_radius*4/3, paintText);
  /*20ms刷新一次数据*/
  mHandler.postDelayed(mAnimation, 20);//启动动画
 }
 
 public void setColor(int mColor) {
  this.mColor = mColor;
  invalidate();
 }
 
 public void setScore(int score) {
  this.mScore = score;
  invalidate();
 }
 
 public void setWinDrawLose(int win,int draw,int lose) {
  this.mWinNumber = win;
  this.mDrawNumber = draw;
  this.mLoseNumber = lose;
  mCurrentTime =0;
  invalidate();
 }
}