自定义环形进度条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();
    }
}

View Code

三.自定义属性效果