Android 自定义漂亮的圆形进度条

这几天对Android中实现画圆弧及圆弧效果中所实现的效果进行了修改，改为进度圆心进度条，效果如图所示




 

TasksCompletedView.java 代码如下

 

[java]  view plain  copy

 

 

1. import android.content.Context;  
2. import android.content.res.TypedArray;  
3. import android.graphics.Canvas;  
4. import android.graphics.Paint;  
5. import android.graphics.RectF;  
6. import android.graphics.Paint.FontMetrics;  
7. import android.util.AttributeSet;  
8. import android.view.View;  
9.   
10. import com.snailws.taskscompleted.R;  
11.   
12. /** 
13. * @author naiyu(http://snailws.com) 
14. * @version 1.0 
15. */  
16. public class TasksCompletedView extends View {  
17.   
18.         // 画实心圆的画笔  
19.         private Paint mCirclePaint;  
20.         // 画圆环的画笔  
21.         private Paint mRingPaint;  
22.         // 画字体的画笔  
23.         private Paint mTextPaint;  
24.         // 圆形颜色  
25.         private int mCircleColor;  
26.         // 圆环颜色  
27.         private int mRingColor;  
28.         // 半径  
29.         private float mRadius;  
30.         // 圆环半径  
31.         private float mRingRadius;  
32.         // 圆环宽度  
33.         private float mStrokeWidth;  
34.         // 圆心x坐标  
35.         private int mXCenter;  
36.         // 圆心y坐标  
37.         private int mYCenter;  
38.         // 字的长度  
39.         private float mTxtWidth;  
40.         // 字的高度  
41.         private float mTxtHeight;  
42.         // 总进度  
43.         private int mTotalProgress = 100;  
44.         // 当前进度  
45.         private int mProgress;  
46.   
47.         public TasksCompletedView(Context context, AttributeSet attrs) {  
48.                 super(context, attrs);  
49.                 // 获取自定义的属性  
50.                 initAttrs(context, attrs);  
51.                 initVariable();  
52.         }  
53.   
54.         private void initAttrs(Context context, AttributeSet attrs) {  
55.                 TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,  
56.                                 R.styleable.TasksCompletedView, 0, 0);  
57.                 mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);  
58.                 mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);  
59.                 mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);  
60.                 mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);  
61.                   
62.                 mRingRadius = mRadius + mStrokeWidth / 2;  
63.         }  
64.   
65.         private void initVariable() {  
66.                 mCirclePaint = new Paint();  
67.                 mCirclePaint.setAntiAlias(true);  
68.                 mCirclePaint.setColor(mCircleColor);  
69.                 mCirclePaint.setStyle(Paint.Style.FILL);  
70.                   
71.                 mRingPaint = new Paint();  
72.                 mRingPaint.setAntiAlias(true);  
73.                 mRingPaint.setColor(mRingColor);  
74.                 mRingPaint.setStyle(Paint.Style.STROKE);  
75.                 mRingPaint.setStrokeWidth(mStrokeWidth);  
76.                   
77.                 mTextPaint = new Paint();  
78.                 mTextPaint.setAntiAlias(true);  
79.                 mTextPaint.setStyle(Paint.Style.FILL);  
80.                 mTextPaint.setARGB(255, 255, 255, 255);  
81.                 mTextPaint.setTextSize(mRadius / 2);  
82.                   
83.                 FontMetrics fm = mTextPaint.getFontMetrics();  
84.                 mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);  
85.                   
86.         }  
87.   
88.         @Override  
89.         protected void onDraw(Canvas canvas) {  
90.   
91.                 mXCenter = getWidth() / 2;  
92.                 mYCenter = getHeight() / 2;  
93.                   
94.                 canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);  
95.                   
96.                 if (mProgress > 0 ) {  
97.                         RectF oval = new RectF();  
98.                         oval.left = (mXCenter - mRingRadius);  
99.                         oval.top = (mYCenter - mRingRadius);  
100.                         oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);  
101.                         oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);  
102.                         canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); //  
103. //                        canvas.drawCircle(mXCenter, mYCenter, mRadius + mStrokeWidth / 2, mRingPaint);  
104.                         String txt = mProgress + "%";  
105.                         mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());  
106.                         canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint);  
107.                 }  
108.         }  
109.           
110.         public void setProgress(int progress) {  
111.                 mProgress = progress;  
112. //                invalidate();  
113.                 postInvalidate();  
114.         }  
115.   
116. }  

attrs.xml

 

 

[html]  view plain  copy

 

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.       
4.     <declare-styleable name="TasksCompletedView">  
5.         <attr name="radius" format="dimension"/>  
6.         <attr name="strokeWidth" format="dimension"/>  
7.         <attr name="circleColor" format="color"/>  
8.         <attr name="ringColor" format="color"/>  
9.     </declare-styleable>  
10.       
11. </resources>  

源码下载：http://download.csdn.net/detail/nainai007/6554501