之前学习了一篇切换颜色的,练习完了后为了更加熟悉就自己改了改加了一些效果实现一个可以显示当前进度的进度条,全当时对之前的一个学习总结:
最终效果:
之前的一些基本属性什么的就不说了,直接看绘制部分的代码,之前的效果是基本的一个颜色切换
和现在的差别有:
1.只有一个进度颜色
2.显示当前进度
3.进度改变的效果
这里第一个不说就是绘制一个颜色的圆弧就行,也可以绘制两个让第二个颜色和背景颜色一致就可以;第二个只用绘制一个中心文本就好,第三个就是在重绘的时候绘制不同的圆:
代码:
int radius= center-mCicleWidth/2;//半径大小
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
//绘制一个背景圆环
mPaint.setStrokeWidth(mCicleWidth);
mPaint.setColor(Color.WHITE);
canvas.drawCircle(center, center, radius,mPaint);
rectF.left=center-radius;
rectF.right=center+radius;
rectF.bottom=center+radius;
rectF.top=center-radius;
//绘制,基本原理就是一个颜色绘制完整一个颜色不断绘制给人一种一直在跑的视觉
mPaint.setStrokeWidth((float) (mCicleWidth / 2));
mPaint.setColor(mSecondColor);
canvas.drawArc(rectF, 0, 360, false, mPaint);
mPaint.setColor(mFirstColor);
canvas.drawArc(rectF, -90, mProgress, false, mPaint);
mTextPaint.setColor(mFirstColor);
//绘制一个rectangle显示text
mTextPaint.setColor(Color.WHITE);
if(mProgress==360){
mTextPaint.setColor(Color.BLACK);
}
//一个完整圆
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mFirstColor);
//这里就是那个逐渐变大的圆
canvas.drawCircle(center, center, radius * mProgress/360,mPaint);
//这里是当前的进度显示
canvas.drawText(numformat(mProgress), center - textRect.width() / 2, center + textRect.height() / 2, mTextPaint);
当然这个时候由于不用两个颜色切换,所以线程也要改改
new Thread(){
@Override
public void run() {
while (!isNext){
mProgress++;
if(mProgress==360){
isNext=true;
}
postInvalidate();
try {
Thread.sleep(mSpeed);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();