先看下最終的效果
開始實作
建立一個DoughnutView繼承View
public class DoughnutView extends View {
}
先重寫onMeasure方法，為什麼要重寫onMeasure方法可以看我的上一篇文章，點這裡
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
}
private int measure(int origin) {
int result = DEFAULT_MIN_WIDTH;
int specMode = MeasureSpec.getMode(origin);
int specSize = MeasureSpec.getSize(origin);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
下面就是最重要的重寫onDraw方法，大緻流程如下
畫白色圓環(背景)，記得改下Activity背景色不然白色圓環看不出來。
//畫背景白色圓環
initPaint();
float doughnutWidth = Math.min(width, height) / 2 * 0.15f;
paint.setStrokeWidth(doughnutWidth);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);
RectF rectF = new RectF((width > height ? Math.abs(width - height) / 2 : 0) + doughnutWidth / 2, (height > width ? Math.abs(height - width) / 2 : 0) + doughnutWidth / 2, width - (width > height ? Math.abs(width - height) / 2 : 0) - doughnutWidth / 2, height - (height > width ? Math.abs(height - width) / 2 : 0) - doughnutWidth / 2);
canvas.drawArc(rectF, 0, 360, false, paint);
畫彩色圓環
使用SweepGradient來實作圓環漸變的效果，這裡有個判斷當設定的顔色數組隻有一個顔色的時候，直接'setColor'，有多個顔色才使用SweepGradient實作漸變色。這樣就能既支援漸變色又支援單色。
這裡還有一點要注意，SweepGradient預設是從3點鐘位置開始漸變的，為了能讓它從12點鐘位置開始漸變是以将畫布旋轉了-90°。
//畫彩色圓環
initPaint();
canvas.rotate(-90, width / 2, height / 2);
paint.setStrokeWidth(doughnutWidth);
paint.setStyle(Paint.Style.STROKE);
if (doughnutColors.length > 1) {
paint.setShader(new SweepGradient(width / 2, height / 2, doughnutColors, null));
} else {
paint.setColor(doughnutColors[0]);
}
canvas.drawArc(rectF, 0, currentValue, false, paint);
畫中間數值的白色背景(隻是為了讓數值顯示更明顯一些)
//畫中間數值的背景
int fontSize = 50;
initPaint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawCircle(width / 2, height / 2, fontSize * 2, paint);}
畫中間數值
//畫中間數值
canvas.rotate(90, width / 2, height / 2);
initPaint();
paint.setColor(ColorUtils.getCurrentColor(currentValue / 360f, doughnutColors));
paint.setTextSize(fontSize);
paint.setTextAlign(Paint.Align.CENTER);
float baseLine = height / 2 - (paint.getFontMetrics().descent + paint.getFontMetrics().ascent) / 2;
canvas.drawText((int) (currentValue / 360f * 100) + "%", width / 2, baseLine, paint);
這裡有兩點比較坑：
數值的顔色
要實作的效果是讓數值的顔色是跟彩色圓環終點的顔色是一樣的。尋尋覓覓很久也沒有找到擷取SweepGradient渲染到某一個角度時顔色的方法=_=
最終花了差不多半天時間寫了個顔色漸變算法，代碼如下：
public static int getCurrentColor(float percent, int[] colors) {
float[][] f = new float[colors.length][3];
for (int i = 0; i < colors.length; i++) {
f[i][0] = (colors[i] & 0xff0000) >> 16;
f[i][1] = (colors[i] & 0x00ff00) >> 8;
f[i][2] = (colors[i] & 0x0000ff);
}
float[] result = new float[3];
for (int i = 0; i < 3; i++) {
for (int j = 0; j < f.length; j++) {
if (f.length == 1 || percent == j / (f.length - 1f)) {
result = f[j];
} else {
if (percent > j / (f.length - 1f) && percent < (j + 1f) / (f.length - 1)) {
result[i] = f[j][i] - (f[j][i] - f[j + 1][i]) * (percent - j / (f.length - 1f)) * (f.length - 1f);
}
}
}
}
return Color.rgb((int) result[0], (int) result[1], (int) result[2]);
}
數值居中對齊問題
drawText是根據baseLine來定位的。具體可以看下下面兩篇文章的分析：文章一、文章二。數字跟文字字母的居中方式可能還略有不同。
動畫效果的實作
先上代碼：
public void setValue(float value) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(currentValue, value);
valueAnimator.setDuration(300);
valueAnimator.setInterpolator(new Interpolator() {
@Override
public float getInterpolation(float v) {
return 1-(1-v)*(1-v)*(1-v);
}
});
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
currentValue = (float) valueAnimator.getAnimatedValue();
invalidate();
}
});
valueAnimator.start();
}
使用ValueAnimator來實作動畫效果。還可以設定不同的插值器來實作不同的動畫效果：
valueAnimator.setInterpolator(new AccelerateInterpolator());//加速
valueAnimator.setInterpolator(new DecelerateInterpolator());//減速
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());//加速減速
valueAnimator.setInterpolator(new LinearInterpolator());//雲速
常用插值器介紹可以看這篇文章。
當然也可以自己實作一個簡單的插值器：
valueAnimator.setInterpolator(new Interpolator() {
@Override
public float getInterpolation(float v) {
return 1-(1-v)*(1-v)*(1-v);
}
});
歡迎留言交流，如有描述不當或錯誤的地方還請留言告知。