简单实现自定义View控件圆形进度条

简单实现自定义控件圆形进度条

原创 2017年10月10日 15:32:23

• 标签：
• 简单实现自定义控件圆形进度条

• 
  

首先在res/values下建一个attrs.xml,里面内容为：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <declare-styleable name="MyProgressRound">  
4.         <!--format表示类型-->  
5.        <!--progressColor表示进度条的颜色-->  
6.         <attr name="progressColor" format="color" />  
7.         <!--textSize圆环中间的文本大小-->  
8.         <attr name="textSize" format="dimension" />  
9.         <!--ringSize弧的宽度-->  
10.         <attr name="ringSize" format="dimension" />  
11.         <!--radiuSize外圆的半径-->  
12.         <attr name="radiuSize" format="dimension" />  
13.     </declare-styleable>  
14. </resources>  

接着在要显示的布局main.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <!--  
3.     xmlns:attrs="http://schemas.android.com/apk/res-auto"  
4.     是引用刚才创建的xml文件，attrs表示一个名字，随意起，不用和之前创建的xml的名字一样  
5. -->  
6. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
7.     xmlns:attrs="http://schemas.android.com/apk/res-auto"  
8.     xmlns:tools="http://schemas.android.com/tools"  
9.     android:layout_width="match_parent"  
10.     android:layout_height="match_parent"  
11.     tools:context="com.bwie.circleprogreebar.MainActivity">  
12.     <!--attrs:ringSize="10dp" 有时候快捷键不出来，也只能手敲了-->  
13.     <com.bwie.circleprogreebar.CircleView  
14.         android:id="@+id/cv"  
15.         attrs:ringSize="10dp"  
16.         attrs:progressColor="#afa"  
17.         attrs:radiuSize="100dp"  
18.         attrs:textSize="20dp"  
19.         android:background="#f00"  
20.         android:layout_centerInParent="true"  
21.         android:layout_width="wrap_content"  
22.         android:layout_height="wrap_content" />  
23. </RelativeLayout>  

[html] view plain copy

1. public class CircleView extends View {  
2.     Paint paint;//画笔  
3.     private int mProgress=0;//进度条的进度  
4.     private int mCountProgress=0;//圆环中间的文本表示进度条的进度百分比  
5.   
6.     private float mRadiuSize = 0;//外圆的半径  
7.     private float mRingSize = 0;//弧的宽度  
8.     private float mTextSize = 0;//圆环中间的文本大小  
9.     private int mProgressColor = 0;//表示进度条的颜色  
10.   
11.     public CircleView(Context context) {  
12.         super(context);  
13.         init();  
14.     }  
15.   
16.     public CircleView(Context context, AttributeSet attrs) {  
17.         super(context, attrs);  
18.         getCustomAttr(context,attrs);//attrs为控件中的属性集合  
19.         init();  
20.     }  
21.   
22.     private void getCustomAttr(Context context, AttributeSet attrs) {  
23.         TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.MyProgressRound);  
24.         //第一个参数为控件中输入的值，第二个参数为默认值  
25.         mRadiuSize=array.getDimension(R.styleable.MyProgressRound_radiuSize,100);  
26.         mRingSize=array.getDimension(R.styleable.MyProgressRound_ringSize,10);  
27.         mTextSize=array.getDimension(R.styleable.MyProgressRound_textSize,10);  
28.         mProgressColor=array.getColor(R.styleable.MyProgressRound_progressColor,Color.BLACK);  
29.     }  
30.   
31.     public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {  
32.         super(context, attrs, defStyleAttr);  
33.         init();  
34.     }  
35.   
36.     private void init() {  
37.         paint=new Paint();//创建画笔对象  
38.         paint.setAntiAlias(true);//抗锯齿  
39.     }  
40.   
41.       
42.     //warpcontent类型 MeasureSpec.AT_MOST  
43.     //matchparent类型 或者具体的长度 100dp 200dp   MeasureSpec.EXACTLY  
44.     @Override  
45.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
46.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
47.         int widthMode=MeasureSpec.getMode(widthMeasureSpec);//获取宽的模式  
48.         int heightMode=MeasureSpec.getMode(heightMeasureSpec);//获取高的模式  
49.         int widthSize=MeasureSpec.getSize(widthMeasureSpec);//获取输入的宽的值  
50.         int heightSize=MeasureSpec.getSize(heightMeasureSpec);//获取输入的高的值  
51.   
52.         int width=0;  
53.         int height=0;  
54.         if (widthMode==MeasureSpec.AT_MOST){  
55.             width=(int)(mRadiuSize*2);  
56.         }else {  
57.             width=Math.max(widthSize,(int)(mRadiuSize*2));  
58.         }  
59.         if (heightMode==MeasureSpec.AT_MOST){  
60.             height=(int)(mRadiuSize*2);  
61.         }else {  
62.             height=Math.max(heightSize,(int)(mRadiuSize*2));  
63.         }  
64.         //给自定义控件设置宽高  
65.         setMeasuredDimension(width,height);  
66.     }  
67.   
68.     @Override  
69.     protected void onDraw(Canvas canvas) {  
70.         paint.setStrokeWidth(0);  
71.         paint.setColor(Color.BLACK);  
72.         paint.setStyle(Paint.Style.STROKE);  
73.         int ring=getMeasuredWidth()/2;  
74.         canvas.drawCircle(ring,ring,mRadiuSize,paint);  
75.         canvas.drawCircle(ring,ring,mRadiuSize-mRingSize,paint);  
76.   
77.         paint.setTextSize(mTextSize);  
78.         String text=mCountProgress+"%";  
79.         float textWidth=paint.measureText(text);  
80.         canvas.drawText(text,ring-textWidth/2,ring+textWidth/2,paint);  
81.         RectF rectF=new RectF(ring-mRadiuSize+mRingSize/2,ring-mRadiuSize+mRingSize/2,ring+mRadiuSize-mRingSize/2,ring+mRadiuSize-mRingSize/2);  
82.         paint.setStrokeWidth(mRingSize);  
83.         paint.setColor(mProgressColor);  
84.         canvas.drawArc(rectF,0,mProgress,false,paint);  
85.   
86.     }  
87.     public void setProgress(int progress){  
88.         mProgress=progress;  
89.         mCountProgress=progress*100/360;  
90.         invalidate();  
91.     }  
92. }  

[html] view plain copy

1. public class MainActivity extends AppCompatActivity {  
2.     CircleView cv;  
3.     @Override  
4.     protected void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         setContentView(R.layout.activity_main);  
7.         cv= (CircleView) findViewById(R.id.cv);  
8.         new AsyncTask<String,Integer,String>(){  
9.             @Override  
10.             protected String doInBackground(String... strings) {  
11.                 for (int i=0;i<=360;i++){  
12.                     SystemClock.sleep(100);  
13.                     publishProgress(i);  
14.                 }  
15.                 return null;  
16.             }  
17.   
18.             @Override  
19.             protected void onProgressUpdate(Integer... values) {  
20.                 super.onProgressUpdate(values);  
21.                 cv.setProgress(values[0]);  
22.             }  
23.         }.execute();  
24.     }  
25. }