Android|Android View实现圆形进度条

【Android|Android View实现圆形进度条】本文实例为大家分享了Android View实现圆形进度条的具体代码,供大家参考,具体内容如下
主要涉及到下面几个方法:

// 画圆canvas.drawCircle// 画圆弧canvas.drawArc// 画文本canvas.drawText// 抗锯齿paint.setAntiAlias(true); // 设置颜色paint.setColor(getResources().getColor(mFgColor, null));

其次就是对坐标的计算,还有注意就是画圆弧的时候,起始从-90度开始才是垂直上方。
效果图:
Android|Android View实现圆形进度条
文章图片

自定义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(); }@Overrideprotected 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); }@Overrideprotected 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; }}

然后在布局文件中引用:

最后,我们设置其点击效果,并开始耗时操作模拟:
MyView view = findViewById(R.id.myView); view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {new Thread(new Runnable() {@Overridepublic void run() {int val = 0; while(val <= 200){view.setProgressValue(val); val++; try {Thread.sleep(20); } catch (InterruptedException e) {e.printStackTrace(); }}}}).start(); }});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读