自定义圆环进度条

在HeyNine的博客基础上进行了完善。

代码：

首先在values下的attrs.xml下建立属性节点：

    <declare-styleable name="TasksCompletedView">
        <attr name="radius" format="dimension"/>
        <attr name="strokeWidth" format="dimension"/>
        <attr name="circleColor" format="color"/>
        <attr name="ringColor" format="color"/>
        <attr name="ringColor2" format="color"/>
    </declare-styleable>

定义好控件的属性，尺寸，圆环颜色等。

然后在layout中调用这个控件，并且已经能设置定义好的属性：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:tc="http://schemas.android.com/apk/res/com.snailws.taskscompleted"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <include layout="@layout/header_common" />

    <com.snailws.taskscompleted.activity.TasksCompletedView
        android:id="@+id/tasks_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        tc:radius="100dip"
        tc:strokeWidth="20dip"
        tc:circleColor="@color/circle_color"
        tc:ringColor="@color/ring_color" />

</LinearLayout>

再定义这个控件的java文件，定义好颜色和画笔，载入属性文件，并且获取属性，并设置了默认值，

紧接着初始化画笔。

[java]  view plain  copy

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

Android屏幕坐标系：

MainActivity:  测试从0-100进度的绘制

package com.snailws.taskscompleted.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

import com.snailws.taskscompleted.R;

/**
 * 
 * @author naiyu(http://snailws.com)
 * @version 1.0
 */
public class MainActivity extends Activity {
	
	private TasksCompletedView mTasksView;
	
	private int mTotalProgress;
	private int mCurrentProgress;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		initVariable();
		initView();
		
		new Thread(new ProgressRunable()).start();
	}
	
	private void initVariable() {
		mTotalProgress = 100;
		mCurrentProgress = 0;
	}
	
	private void initView() {
		mTasksView = (TasksCompletedView) findViewById(R.id.tasks_view);
	}
	
	class ProgressRunable implements Runnable {

		@Override
		public void run() {
			while (mCurrentProgress < mTotalProgress) {
				mCurrentProgress += 1;
				mTasksView.setProgress(mCurrentProgress);
				try {
					Thread.sleep(100);
				} catch (Exception e) {
					e.printStackTrace();
				}
			}
		}
		
	}


}

显示的效果图如下：

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