Android编程基于自定义View实现绚丽的圆形进度条功能示例

本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能。分享给大家供大家参考，具体如下：
本文包含两个组件，首先上效果图：
1.ProgressBarView1（支持拖动）：
<img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-44827deb0831db5df42e9f2389f0d4aa">
2.ProgressBarView2（不同进度值显示不同颜色，不支持拖拽）：
<img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-3bb5c9a544d95df882dd6a47984004ab"> <img alt="" src="https://beijingoptbbs.oss-cn-hangzhou.aliyuncs.com/jb/2426819-274e0bc425e810a02ae4620f9df10ba4">
代码不多，注释也比较详细，全部贴上了：
（一）ProgressBarView1:
<div class="blockcode">
<pre class="brush:java;">
/**
* 自定义绚丽的ProgressBar.
*/
public class ProgressBarView1 extends View {
 /**
* 进度条所占用的角度
*/
 private static final int ARC_FULL_DEGREE = 300;
 /**
* 弧线的宽度
*/
 private int STROKE_WIDTH;
 /**
* 组件的宽，高
*/
 private int width, height;
 /**
* 进度条最大值和当前进度值
*/
 private float max, progress;
 /**
* 是否允许拖动进度条
*/
 private boolean draggingEnabled = false;
 /**
* 绘制弧线的矩形区域
*/
 private RectF circleRectF;
 /**
* 绘制弧线的画笔
*/
 private Paint progressPaint;
 /**
* 绘制文字的画笔
*/
 private Paint textPaint;
 /**
* 绘制当前进度值的画笔
*/
 private Paint thumbPaint;
 /**
* 圆弧的半径
*/
 private int circleRadius;
 /**
* 圆弧圆心位置
*/
 private int centerX, centerY;
 public ProgressBarView1(Context context) {
super(context);
init();
 }
 public ProgressBarView1(Context context, AttributeSet attrs) {
super(context, attrs);
init();
 }
 public ProgressBarView1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
 }
 private void init() {
progressPaint = new Paint();
progressPaint.setAntiAlias(true);
textPaint = new Paint();
textPaint.setColor(Color.WHITE);
textPaint.setAntiAlias(true);
thumbPaint = new Paint();
thumbPaint.setAntiAlias(true);
//使用自定义字体
textPaint.setTypeface(Typeface.createFromAsset(getContext().getAssets(), "fangz.ttf"));
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (width == 0 || height == 0) {
 width = getWidth();
 height = getHeight();
 //计算圆弧半径和圆心点
 circleRadius = Math.min(width, height) / 2;
 STROKE_WIDTH = circleRadius / 12;
 circleRadius -= STROKE_WIDTH;
 centerX = width / 2;
 centerY = height / 2;
 //圆弧所在矩形区域
 circleRectF = new RectF();
 circleRectF.left = centerX - circleRadius;
 circleRectF.top = centerY - circleRadius;
 circleRectF.right = centerX + circleRadius;
 circleRectF.bottom = centerY + circleRadius;
}
 }
 private Rect textBounds = new Rect();
 @Override
 protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float start = 90 + ((360 - ARC_FULL_DEGREE) >> 1); //进度条起始点
float sweep1 = ARC_FULL_DEGREE * (progress / max); //进度划过的角度
float sweep2 = ARC_FULL_DEGREE - sweep1; //剩余的角度
//绘制起始位置小圆形
progressPaint.setColor(Color.WHITE);
progressPaint.setStrokeWidth(0);
progressPaint.setStyle(Paint.Style.FILL);
float radians = (float) (((360.0f - ARC_FULL_DEGREE) / 2) / 180 * Math.PI);
float startX = centerX - circleRadius * (float) Math.sin(radians);
float startY = centerY + circleRadius * (float) Math.cos(radians);
canvas.drawCircle(startX, startY, STROKE_WIDTH / 2, progressPaint);
//绘制进度条
progressPaint.setStrokeWidth(STROKE_WIDTH);
progressPaint.setStyle(Paint.Style.STROKE);//设置空心
canvas.drawArc(circleRectF, start, sweep1, false, progressPaint);
//绘制进度条背景
progressPaint.setColor(Color.parseColor("#d64444"));
canvas.drawArc(circleRectF, start + sweep1, sweep2, false, progressPaint);
//绘制结束位置小圆形
progressPaint.setStrokeWidth(0);
progressPaint.setStyle(Paint.Style.FILL);
float endX = centerX + circleRadius * (float) Math.sin(radians);
float endY = centerY + circleRadius * (float) Math.cos(radians);
canvas.drawCircle(endX, endY, STROKE_WIDTH / 2, progressPaint);
//上一行文字
textPaint.setTextSize(circleRadius >> 1);
String text = (int) (100 * progress / max) + "";
float textLen = textPaint.measureText(text);
//计算文字高度
textPaint.getTextBounds("8", 0, 1, textBounds);
float h1 = textBounds.height();
//% 前面的数字水平居中，适当调整
float extra = text.startsWith("1") ? -textPaint.measureText("1") / 2 : 0;
canvas.drawText(text, centerX - textLen / 2 + extra, centerY - 30 + h1 / 2, textPaint);
//百分号
textPaint.setTextSize(circleRadius >> 2);
canvas.drawText("%", centerX + textLen / 2 + extra + 5, centerY - 30 + h1 / 2, textPaint);
//下