自定义环形进度条RoundProgressBar

一.效果图：

Canvas画圆环说明：

圆环宽度不必在意，只是画笔宽度设置后达到的效果.

二.实现步骤

1.自定义View-RoundProgressBar

2.设置属性resources(declear_styleable)

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <declare-styleable name="RoundProgressBar">
         <attr name="maxProgress" format="integer"></attr>
         <attr name="currentProgress" format="integer"></attr>
         <attr name="roundColor" format="color"></attr>
         <attr name="roundProgressColor" format="color"></attr>
         <attr name="textColor" format="color"></attr>
         <attr name="textProgress" format="integer"></attr>
         <attr name="textSize" format="float"></attr>
         <attr name="roundWidth" format="dimension"></attr>
         <attr name="roundStyle" >
             <enum name="STROKE" value="0"></enum>
             <enum name="FILL" value="1"></enum>
         </attr>
     </declare-styleable>
 </resources>

初始属性设置

 public RoundProgressBar(Context context, AttributeSet attrs) {
         super(context, attrs);
         paint=new Paint();
         TypedArray typedArray= context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);
         maxProgress=typedArray.getInteger(R.styleable.RoundProgressBar_maxProgress,100);
         roundColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.GRAY);
         textColor=typedArray.getColor(R.styleable.RoundProgressBar_textColor,Color.RED);
         textSize=typedArray.getFloat(R.styleable.RoundProgressBar_textSize,54);
         roundWidth=typedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,30);
         roundStyle=typedArray.getInteger(R.styleable.RoundProgressBar_roundStyle,0);
         roundProgressColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor,Color.BLACK);
         typedArray.recycle();
     }

加载属性

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/activity_main"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     tools:context="rgsc.roundprogressview.MainActivity">
     <Button
         android:id="@+id/btn_start"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="开始"/>
     <rgsc.roundprogressview.RoundProgressBar
         android:id="@+id/round_progress"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btn_start"/>
 </RelativeLayout>

控件布局

效果：

3.Canvas画图

画大圆环 canvas.drawCircle();

画进度百分比canvas.drawText()：字体居中圆心显示的坐标=圆心坐标x-字体宽度/2;

画圆环进度canvas.drawArc()，RectF:RecF是画圆半径内切矩形的左上点坐标，及右下坐标;

 package rgsc.roundprogressview;

 import android.content.Context;
 import android.content.res.TypedArray;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.RectF;
 import android.graphics.Typeface;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.View;
 public class RoundProgressBar extends View{
     //自定义属性
     int maxProgress;         //最大进度值
     int currentProgress;     //当前进度
     int roundColor;          //圆环颜色
     int roundProgressColor;  //圆环进度颜色
     int textColor;           //字体颜色
     int roundStyle;          //圆环样式
     float roundWidth;        //圆环宽度
     float textSize;          //字号
     Paint paint;
     public RoundProgressBar(Context context, AttributeSet attrs) {
         super(context, attrs);
         paint=new Paint();
         TypedArray typedArray= context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar);
         maxProgress=typedArray.getInteger(R.styleable.RoundProgressBar_maxProgress,100);
         roundColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.GRAY);
         textColor=typedArray.getColor(R.styleable.RoundProgressBar_textColor,Color.RED);
         textSize=typedArray.getFloat(R.styleable.RoundProgressBar_textSize,54);
         roundWidth=typedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,30);
         roundStyle=typedArray.getInteger(R.styleable.RoundProgressBar_roundStyle,0);
         roundProgressColor=typedArray.getColor(R.styleable.RoundProgressBar_roundColor,Color.BLACK);
         typedArray.recycle();
     }
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         //画最外层大圆环
         float x=getWidth()/2;
         float y=x;
         float radius=x/2-roundWidth/2;
         paint.setStyle(Paint.Style.STROKE); //空心画圆
         paint.setColor(roundColor);         //圆环颜色
         paint.setStrokeWidth(roundWidth);   //圆环宽度
         canvas.drawCircle(x,y,radius,paint);//圆心坐标 (x,y)半径radius 画笔paint
         //画进度百分比
         paint.setColor(textColor);
         paint.setTypeface(Typeface.DEFAULT_BOLD); //粗体
         paint.setTextSize(textSize);
         paint.setStrokeWidth(0);
         int persentProgress=(int) (((float)currentProgress/(float)maxProgress)*100);
         String text=persentProgress+"%";
         float textWidth=paint.measureText(text);                           //获取字体宽度
         float xText=x-textWidth/2;                                         //减去字体宽度确保字体居中
         canvas.drawText(text,xText,y,paint);
         //画圆环进度
         float left=x-radius;
         float right=x+radius;
         RectF rectF=new RectF(left,left,right,right);
         paint.setStyle(Paint.Style.STROKE); //空心画圆
         paint.setColor(roundProgressColor); //圆环颜色
         paint.setStrokeWidth(roundWidth);   //圆环宽度
         Log.i("Round","画圆环进度："+360*currentProgress/maxProgress);
         canvas.drawArc(rectF,0,360*currentProgress/maxProgress,false,paint);
     }
     public synchronized void setCurrentProgress(int progress) {
         if(progress < 0){
             throw new IllegalArgumentException("progress not less than 0");
         }
         if(progress > maxProgress){
             progress = maxProgress;
         }
         if(progress <= maxProgress){
             this.currentProgress = progress;
             postInvalidate();
         }
     }
     public synchronized int getCurrentProgress() {
         return currentProgress;
     }
     public synchronized void setMaxProgress(int maxProgress) {
         this.maxProgress = maxProgress;
     }
     public void setRoundColor(int roundColor) {
         this.roundColor = roundColor;
     }
     public void setTextColor(int textColor) {
         this.textColor = textColor;
     }
     public void setRoundProgressColor(int roundProgressColor) {
         this.roundProgressColor = roundProgressColor;
     }
     public void setRoundStyle(int roundStyle) {
         this.roundStyle = roundStyle;
     }
     public void setRoundWidth(float roundWidth) {
         this.roundWidth = roundWidth;
     }
     public void setTextSize(float textSize) {
         this.textSize = textSize;
     }
 }

自定义环形进度条全部代码

4.动态进度设置

package rgsc.roundprogressview;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    Button btn_start;
    RoundProgressBar roundProgressBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initControl();
    }
    void initControl(){
        btn_start=(Button)findViewById(R.id.btn_start);
        btn_start.setOnClickListener(this);
        roundProgressBar=(RoundProgressBar)findViewById(R.id.round_progress);
        //自定义属性设置
        /*
        roundProgressBar.setRoundColor(Color.GRAY);
        roundProgressBar.setTextColor(Color.RED);
        roundProgressBar.setRoundProgressColor(Color.BLACK);
        roundProgressBar.setMaxProgress(100);
        roundProgressBar.setRoundWidth(30);
        roundProgressBar.setRoundStyle(0);
        roundProgressBar.setTextSize(50);//*/
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_start:
                start();
                break;
        }

    }
    void start(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                for(int i=0;i<=100;i+=2){
                    roundProgressBar.setCurrentProgress(i);
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    Log.i("Main","当前进度值："+i);
                }
            }
        }).start();
    }
}

三.自定义属性效果