设计思路

通过自定义控件实现。将整个圆环拆分成一个个的小圆弧，每个小圆弧画笔的色值不一样，每个圆弧画笔的色值都是起始色值和终止色值的中间过渡色，由起始色值逐渐向终止色值靠拢，最后形成渐变颜色的圆环。

知识点

1、自定义控件

自定义控件分为三种：继承控件，即在现有控件直接简单修改；组合控件，即GroupView；自定义View。具体自定义控件的细节，这里不再细说，可以参阅网上资料。

2、画笔

画笔类型(setStyle)分为三种：STROKE只绘制图形轮廓，FILL只绘制图形内容，FILL_AND_STROKE既绘制轮廓也绘制内容；我们采用的是STROKE，也就是描边。

笔刷样式(setStrokeCap)分为三种：Round圆形冒；SQUARE方形冒；BUTT无冒。这里需要注意，冒的意思就是多出一部分，所以我们采用的是BUTT，下面会详细说明。

画笔宽度(setStrokeWidth)

3、画图

RectF：RectF有四个参数(float left, float top, float right, float bottom)

1.jpg

drawArc：画弧，主要关注startAngle、sweepAngle两个参数

2.jpg

实现

(1)onMeasure设定画大小

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mMeasureWidth = getMeasuredWidth()

mMeasureHeight = getMeasuredHeight();

if (pRectF == null) {

float halfProgressWidth = progressWidth / 2;

pRectF = new RectF(halfProgressWidth + getPaddingLeft(),

halfProgressWidth + getPaddingTop(),

mMeasureWidth - halfProgressWidth - getPaddingRight(),

mMeasureHeight - halfProgressWidth - getPaddingBottom());

}

}

(2)onDraw确定怎么画，这里主要看一下drawProgress，整个圆弧由多个小圆弧组成，通过获取过渡色设置笔刷颜色，笔刷颜色从起始色值开始，每增加一度都向终止色值渐变

private void drawProgress(Canvas canvas) {

for (int i = 0, end = (int) (curProgress * unitAngle); i < end; i++) {

progressPaint.setColor(getGradient(i / (float) end, progressStartColor, progressEndColor));

canvas.drawArc(pRectF,

startAngle + i,

2,

false,

progressPaint);

}

}

(3)获取过渡色的方法

public int getGradient(float fraction, int startColor, int endColor) {

if (fraction > 1) fraction = 1;

int alphaStart = Color.alpha(startColor);

int redStart = Color.red(startColor);

int blueStart = Color.blue(startColor);

int greenStart = Color.green(startColor);

int alphaEnd = Color.alpha(endColor);

int redEnd = Color.red(endColor);

int blueEnd = Color.blue(endColor);

int greenEnd = Color.green(endColor);

int alphaDifference = alphaEnd - alphaStart;

int redDifference = redEnd - redStart;

int blueDifference = blueEnd - blueStart;

int greenDifference = greenEnd - greenStart;

int alphaCurrent = (int) (alphaStart + fraction * alphaDifference);

int redCurrent = (int) (redStart + fraction * redDifference);

int blueCurrent = (int) (blueStart + fraction * blueDifference);

int greenCurrent = (int) (greenStart + fraction * greenDifference);

return Color.argb(alphaCurrent, redCurrent, greenCurrent, blueCurrent);

}

(4)问题解决

画圆环的过程中会遇到一个问题，上面提到的笔刷样式的选择，下面是三种笔刷的示意图：

Paint.Cap.ROUND 头尾多出了一块圆形笔帽

3.png

Paint.Cap.SQUARE 头尾多出了一块方形笔帽

4.png

Paint.Cap.BUTT 头尾不多出笔帽，但是每个小圆环中间有空隙

5.png

解决方案： sweepAngle比下一次的startAngle多一点。

6.png

(5)后续拓展 通过showAnim来控制圆环动效

使用

1、在layout中设置width、height、画笔宽度

android:id="@+id/circle_shape"

android:layout_width="320dp"

android:layout_height="320dp"

android:layout_gravity="center"

a:pr_progress_width="30dp" />

2、在类中设置progress、背景色、进度起始色、进度终止色

CircleShape mPR = findViewById(R.id.circle_shape);

mPR.setProgress(60);

mPR.setColor(R.color.bgColor,R.color.progressStartColor, R.color.progressEndColor);