主要涉及到下面几个方法：
// 画圆 canvas.drawCircle // 画圆弧 canvas.drawArc // 画文本 canvas.drawText // 抗锯齿 paint.setAntiAlias(true); // 设置颜色 paint.setColor(getResources().getColor(mFgColor, null));
其次就是对坐标的计算，还有注意就是画圆弧的时候，起始从-90度开始才是垂直上方。
效果图：
自定义View：
public class MyView extends View {
// 线宽度
private static final int mStrokeWidth = 50;
private int mVal = 0;
private static final int mMaxVal = 200;
private int mGgColor = R.color.arcbg;
private int mFgColor = R.color.arcfg;
public MyView(Context context) {
super(context);
}
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
// 设置值
public void setProgressValue(int val){
this.mVal = val;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
drawBGCircle(canvas, width, height);
drawFGArc(canvas, width, height);
drawText(canvas, width, height);
}
// 文本
private void drawText(Canvas canvas, int width, int height) {
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(getResources().getColor(mFgColor, null));
paint.setTextSize(120);
int percent = (int) (( mVal / (float) mMaxVal ) * 100);
canvas.drawText(percent + "%", (width - paint.measureText(percent + "%")) / 2, (height + paint.measureText("%")) / 2, paint);
}
// 圆弧
private void drawFGArc(Canvas canvas, int width, int height) {
Paint paint = new Paint();
paint.setColor(getResources().getColor(mFgColor, null));
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(mStrokeWidth);
paint.setAntiAlias(true);
RectF mRectF = new RectF(mStrokeWidth, mStrokeWidth, width - mStrokeWidth, height - mStrokeWidth);
int sweepAngle = (int) (360 * mVal / (float) mMaxVal);
canvas.drawArc(mRectF, -90, sweepAngle, false, paint);
}
// 底部圆形
private void drawBGCircle(Canvas canvas, int width, int height) {
int r = (width - 2 * mStrokeWidth) / 2;
Paint cPaint = new Paint();
cPaint.setColor(getResources().getColor(mGgColor, null));
cPaint.setStyle(Paint.Style.STROKE);
cPaint.setStrokeWidth(mStrokeWidth);
cPaint.setAntiAlias(true);
canvas.drawCircle(width / 2, height / 2, r, cPaint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getSize(widthMeasureSpec, 200);
int height = getSize(heightMeasureSpec, 200);
setMeasuredDimension(width, height);
}
private int getSize(int widthMeasureSpec, int defultSize) {
int realSize = defultSize;
int mode = MeasureSpec.getMode(widthMeasureSpec);
int size = MeasureSpec.getSize(widthMeasureSpec);
switch (mode){
case MeasureSpec.UNSPECIFIED:
realSize = defultSize;
break;
case MeasureSpec.AT_MOST:
realSize = size;
break;
case MeasureSpec.EXACTLY:
realSize = size;
break;
}
return realSize;
}
}
然后在布局文件中引用：
<com.weizu.myapplication.view.MyView
android:id="@+id/myView"
android:layout_width="150dp"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
最后，我们设置其点击效果，并开始耗时操作模拟：
MyView view = findViewById(R.id.myView);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new Thread(new Runnable() {
@Override
public void run() {
int val = 0;
while(val <= 200){
view.setProgressValue(val);
val++;
try {
Thread.sleep(20);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
});
