Android studio圆形进度条 百分号跟着变

MainActivity

import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;public class MainActivity extends AppCompatActivity implements View.OnClickListener{    private Gua mGua1;    private Button play;    private Button resele;    private Button dao;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mGua1 = (Gua) findViewById(R.id.Circle);        mGua1.setTargetPercent(0);        play=(Button)findViewById(R.id.play);        resele=(Button)findViewById(R.id.resele);        dao=(Button)findViewById(R.id.dao);        play.setOnClickListener(this);        resele.setOnClickListener(this);        dao.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch (view.getId()){            case R.id.play:                //设置目标百分比为100                mGua1.setTargetPercent(100);                mGua1.invalidate();                break;            case R.id.resele:                //设置目标百分比为0                mGua1.setTargetPercent(0);                mGua1.invalidate();                break;            case R.id.dao:                //设置目标百分比为100                mGua1.setTargetPercent(0);                mGua1.invalidate();                break;        }    }}

Gua

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Paint.Align;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;public class Gua extends View{    private Paint mCirclePaint;    private Paint mTextPaint;    private Paint mArcPaint;    private int mCircleX;    private int mCircleY;    private float mCurrentAngle;    private RectF mArcRectF;    private float mStartSweepValue;    private float mTargetPercent;    private float mCurrentPercent;    private int mRadius;    private int mCircleBackground;    private int mRingColor;    private int mTextSize;    private int mTextColor;    public Gua(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init(context);    }    public Gua(Context context, AttributeSet attrs) {        super(context, attrs);        //自定义属性 values/attr        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.PercentageRing);        //中间圆的背景颜色  默认为浅紫色        mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xffafb4db);        //外圆环的颜色  默认为深紫色        mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xff6950a1);        //中间圆的半径 默认为60        mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 60);        //字体颜色 默认为白色        mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xffffffff);        //最后一定要调用这个 释放掉TypedArray        typedArray.recycle();        //初始化数据        init(context);    }    public Gua(Context context) {        super(context);        init(context);    }    private void init(Context context){        //圆环开始角度 -90° 正北方向        mStartSweepValue = -90;        //当前角度        mCurrentAngle = 0;        //当前百分比        mCurrentPercent = 0;        //设置中心园的画笔        mCirclePaint = new Paint();        mCirclePaint.setAntiAlias(true);        mCirclePaint.setColor(mCircleBackground);        mCirclePaint.setStyle(Paint.Style.FILL);        //设置文字的画笔        mTextPaint = new Paint();        mTextPaint.setColor(mTextColor);        mTextPaint.setAntiAlias(true);        mTextPaint.setStyle(Paint.Style.FILL);        mTextPaint.setStrokeWidth((float) (0.025*mRadius));        mTextPaint.setTextSize(mRadius/2);        mTextPaint.setTextAlign(Align.CENTER);        //设置外圆环的画笔        mArcPaint = new Paint();        mArcPaint.setAntiAlias(true);        mArcPaint.setColor(mRingColor);        mArcPaint.setStyle(Paint.Style.STROKE);        mArcPaint.setStrokeWidth((float) (0.075*mRadius));        //获得文字的字号 因为要设置文字在圆的中心位置        mTextSize = (int) mTextPaint.getTextSize();    }    //主要是测量wrap_content时候的宽和高，因为宽高一样，只需要测量一次宽即可，高等于宽    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));        //设置圆心坐标        mCircleX = getMeasuredWidth()/2;        mCircleY = getMeasuredHeight()/2;        //如果半径大于圆心横坐标，需要手动缩小半径的值，否则就画到外面去了        if (mRadius>mCircleX) {            //设置半径大小为圆心横坐标到原点的距离            mRadius = mCircleX;            mRadius = (int) (mCircleX-0.075*mRadius);            //因为半径改变了，所以要重新设置一下字体宽度            mTextPaint.setStrokeWidth((float) (0.025*mRadius));            //重新设置字号            mTextPaint.setTextSize(mRadius/2);            //重新设置外圆环宽度            mArcPaint.setStrokeWidth((float) (0.075*mRadius));            //重新获得字号大小            mTextSize = (int) mTextPaint.getTextSize();        }        //画中心园的外接矩形，用来画圆环用        mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);    }    //当wrap_content的时候，view的大小根据半径大小改变，但最大不会超过屏幕    private int measure(int measureSpec){        int result=0;        int specMode = MeasureSpec.getMode(measureSpec);        int specSize = MeasureSpec.getSize(measureSpec);        if (specMode == MeasureSpec.EXACTLY) {            result = specSize;        }else {            result =(int) (1.075*mRadius*2);            if (specMode == MeasureSpec.AT_MOST) {                result = Math.min(result, specSize);            }        }        return result;    }    //开始画中间圆、文字和外圆环    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //画中间圆        canvas.drawCircle(mCircleX, mCircleY, mRadius, mCirclePaint);        //画圆环        canvas.drawArc(mArcRectF, mStartSweepValue ,mCurrentAngle, false, mArcPaint);        //画文字        canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);        //判断当前百分比是否小于设置目标的百分比        if (mCurrentPercent<mTargetPercent) {            //当前百分比+1            mCurrentPercent+=1;            //当前角度+360            mCurrentAngle+=3.6;            //每10ms重画一次            postInvalidateDelayed(10);        }/*else if(mCurrentPercent==mTargetPercent){            //当前百分比-1            mCurrentPercent=0;            //当前角度+360            mCurrentAngle=0;            //每10ms重画一次            postInvalidateDelayed(10);        }*/else if(mCurrentPercent>mTargetPercent){            //当前百分比-1            mCurrentPercent-=1;            //当前角度+360            mCurrentAngle-=3.6;            //每10ms重画一次            postInvalidateDelayed(10);        }    }    //设置目标的百分比    public void setTargetPercent(int percent){        this.mTargetPercent = percent;    }}

Xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical">    <Button        android:id="@+id/but1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="改变外层圆环颜色"        />    <com.bwie.test.wuxiaorui1508a20171009.Gua        android:id="@+id/Circle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:radius="90"        app:textColor="#ffffffff"        />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:gravity="center"        >        <Button            android:id="@+id/play"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="开始"            />        <Button            android:id="@+id/resele"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="重置"            />        <Button            android:id="@+id/dao"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="暂停"            />    </LinearLayout></LinearLayout>

values文件中的attrs

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="PercentageRing">        <attr name="radius" format="integer"/>        <attr name="circleBackground" format="color"/>        <attr name="ringColor" format="color"/>        <attr name="textColor" format = "color"/>    </declare-styleable></resources>

效果展示