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

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

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

 

public class CircleView extends View {
    Paint paint;//画笔
    private int mProgress=0;//进度条的进度
    private int mCountProgress=0;//圆环中间的文本表示进度条的进度百分比

    private float mRadiuSize = 0;//外圆的半径
    private float mRingSize = 0;//弧的宽度
    private float mTextSize = 0;//圆环中间的文本大小
    private int mProgressColor = 0;//表示进度条的颜色

    public CircleView(Context context) {
        super(context);
        init();
    }

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        getCustomAttr(context,attrs);//attrs为控件中的属性集合
        init();
    }

    private void getCustomAttr(Context context, AttributeSet attrs) {
        TypedArray array=context.obtainStyledAttributes(attrs,R.styleable.MyProgressRound);
        //第一个参数为控件中输入的值，第二个参数为默认值
        mRadiuSize=array.getDimension(R.styleable.MyProgressRound_radiuSize,100);
        mRingSize=array.getDimension(R.styleable.MyProgressRound_ringSize,10);
        mTextSize=array.getDimension(R.styleable.MyProgressRound_textSize,10);
        mProgressColor=array.getColor(R.styleable.MyProgressRound_progressColor,Color.BLACK);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint=new Paint();//创建画笔对象
        paint.setAntiAlias(true);//抗锯齿
    }

    
    //warpcontent类型 MeasureSpec.AT_MOST
    //matchparent类型 或者具体的长度 100dp 200dp   MeasureSpec.EXACTLY
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode=MeasureSpec.getMode(widthMeasureSpec);//获取宽的模式
        int heightMode=MeasureSpec.getMode(heightMeasureSpec);//获取高的模式
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);//获取输入的宽的值
        int heightSize=MeasureSpec.getSize(heightMeasureSpec);//获取输入的高的值

        int width=0;
        int height=0;
        if (widthMode==MeasureSpec.AT_MOST){
            width=(int)(mRadiuSize*2);
        }else {
            width=Math.max(widthSize,(int)(mRadiuSize*2));
        }
        if (heightMode==MeasureSpec.AT_MOST){
            height=(int)(mRadiuSize*2);
        }else {
            height=Math.max(heightSize,(int)(mRadiuSize*2));
        }
        //给自定义控件设置宽高
        setMeasuredDimension(width,height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        paint.setStrokeWidth(0);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        int ring=getMeasuredWidth()/2;
        canvas.drawCircle(ring,ring,mRadiuSize,paint);
        canvas.drawCircle(ring,ring,mRadiuSize-mRingSize,paint);

        paint.setTextSize(mTextSize);
        String text=mCountProgress+"%";
        float textWidth=paint.measureText(text);
        canvas.drawText(text,ring-textWidth/2,ring+textWidth/2,paint);
        RectF rectF=new RectF(ring-mRadiuSize+mRingSize/2,ring-mRadiuSize+mRingSize/2,ring+mRadiuSize-mRingSize/2,ring+mRadiuSize-mRingSize/2);
        paint.setStrokeWidth(mRingSize);
        paint.setColor(mProgressColor);
        canvas.drawArc(rectF,0,mProgress,false,paint);

    }
    public void setProgress(int progress){
        mProgress=progress;
        mCountProgress=progress*100/360;
        invalidate();
    }
}

 

public class MainActivity extends AppCompatActivity {
    CircleView cv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cv= (CircleView) findViewById(R.id.cv);
        new AsyncTask(){
            @Override
            protected String doInBackground(String... strings) {
                for (int i=0;i<=360;i++){
                    SystemClock.sleep(100);
                    publishProgress(i);
                }
                return null;
            }

            @Override
            protected void onProgressUpdate(Integer... values) {
                super.onProgressUpdate(values);
                cv.setProgress(values[0]);
            }
        }.execute();
    }
}