一、概述
今天接着研究paint画笔，实现圆环百分比进度变化效果，效果图如下：
进度条.gif
二、思路分析
这个效果其实和前面的qq计步器实现思路差不多，那个是两个圆弧，这个里面是不动的圆形，外面是圆弧。
2.1自定义属性
自定义属性包含内圆画笔的颜色，画笔描边的粗细，外面圆弧的画笔颜色，里面中间百分比文字的大小和颜色。
attrs文件
自定义类构造函数
//获取属性
public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleProgressView);
mInnerColor = a.getColor(R.styleable.CircleProgressView_innerCicleColor,mInnerColor);
mOutColor = a.getColor(R.styleable.CircleProgressView_outCicleColor,mOutColor);
mRoundWidth = (int)a.getDimension(R.styleable.CircleProgressView_roundWidth,dp2px(mRoundWidth));
mTextSize = a.getDimensionPixelSize(R.styleable.CircleProgressView_progressTextSize,sp2px(mTextSize));
a.recycle();
mInnerPaint = new Paint();
mInnerPaint.setColor(mInnerColor);
mInnerPaint.setAntiAlias(true); //抗锯齿
mInnerPaint.setStrokeWidth(mRoundWidth);
mInnerPaint.setStyle(Paint.Style.STROKE); //空心圆
mOutPaint = new Paint();
mOutPaint.setColor(mOutColor);
mOutPaint.setAntiAlias(true); //抗锯齿
mOutPaint.setStrokeWidth(mRoundWidth);
mOutPaint.setStyle(Paint.Style.STROKE); //空心圆
mTextPaint = new Paint();
mTextPaint.setTextSize(mTextSize);
mTextPaint.setColor(mTextColor);
}
2.2在ondraw方法中绘制
//绘制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制内圆
int center = getWidth()/2;
canvas.drawCircle(center,center,center-mRoundWidth/2,mInnerPaint);
//绘制外圆
RectF rectF = new RectF(mRoundWidth/2,mRoundWidth/2,getWidth()-mRoundWidth/2,getHeight()-mRoundWidth/2);
if (mCurrentProgress == 0){
return;
}
float percent = (float)mCurrentProgress/mMax;
canvas.drawArc(rectF,0,percent*360,false,mOutPaint); //false 表示不包括圆心
//绘制文字
String textString = ((int)(percent*100))+"%";
// String textString = (mMax - (mCurrentProgress-1))+"";
Rect bounds = new Rect();
mTextPaint.getTextBounds(textString,0,textString.length(),bounds);
int dy = (mTextPaint.getFontMetricsInt().bottom-mTextPaint.getFontMetricsInt().top)/2-mTextPaint.getFontMetricsInt().bottom;
int baseLine = getHeight()/2 + dy;
canvas.drawText(textString,getWidth()/2-bounds.width()/2,baseLine,mTextPaint);
}
对圆的半径的计算不理解的可以参考这边文章：
Canvas drawCircle Rect边框问题
onmeasure方法就不介绍了，前面说了很多了。
2.3暴露给用户方法动态改变百分比的值
//暴露给外面调用 设置当前值 不断调用ondraw方法
public synchronized void setCurrentProgress(int currentProgress) {
this.mCurrentProgress = currentProgress;
invalidate();
}
在mainActivity中用设置属性动画，监听值的变化，调用此方法，绘制界面：
circleProgressView.setMax(4000);
ValueAnimator objectAnimator = ObjectAnimator.ofFloat(1,4000);
objectAnimator.setDuration(5000);
objectAnimator.start();
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float progress = (float) animation.getAnimatedValue();
circleProgressView.setCurrentProgress((int) progress);
}
});
三、结语
当然，这个效果也可以扩展，你可以做成别的效果，例如倒计时，代码稍微改动下就行了。分析完毕，代码地址：
/s/1o80TQm2
