自定义View实现圆形百分比加载的效果

自定义一个类集成view重写ondraw()方法实现如图效果,随着数字百分比增加和减少外圆颜色依次填充和减少，且外圆颜色是随着百分比增加颜色加深。第一次进入加载到100%暂停。点击自动循环按钮后当进度增加到100%后依次再倒退到0，来回反复。点击暂停按钮数字、圆圈都停止.

首先创建一个自定义类,继承View

public class MyView extends View{
    /*圆弧线宽*/
    private float circleBorderWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
    /*内边距*/
    private float circlePadding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
    /*字体大小*/
    private float textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 50, getResources().getDisplayMetrics());
    /*绘制圆周的画笔*/
    private Paint backCirclePaint;
    /*绘制圆周白色分割线的画笔*/
    private Paint linePaint;
    /*绘制文字的画笔*/
    private Paint textPaint;
    /*百分比*/
    private int percent = 0;
    /*渐变圆周颜色数组*/
    private int[] gradientColorArray = new int[]{Color.GREEN, Color.parseColor("#fe751a"), Color.parseColor("#13be23"), Color.GREEN};
    private Paint gradientCirclePaint;
    private boolean flag = true;
    private boolean flag1 = true;
    private boolean flag3 = true;

    public MyView(Context context) {
        super(context);
        init();

    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        backCirclePaint = new Paint();
        backCirclePaint.setStyle(Paint.Style.STROKE);
        backCirclePaint.setAntiAlias(true);
        backCirclePaint.setColor(Color.LTGRAY);
        backCirclePaint.setStrokeWidth(circleBorderWidth);
//        backCirclePaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.OUTER));

        gradientCirclePaint = new Paint();
        gradientCirclePaint.setStyle(Paint.Style.STROKE);
        gradientCirclePaint.setAntiAlias(true);
        gradientCirclePaint.setColor(Color.LTGRAY);
        gradientCirclePaint.setStrokeWidth(circleBorderWidth);

        linePaint = new Paint();
        linePaint.setColor(Color.WHITE);
        linePaint.setStrokeWidth(5);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(textSize);
        textPaint.setColor(Color.BLACK);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(Math.min(measureWidth, measureHeight), Math.min(measureWidth, measureHeight));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //1.绘制灰色背景圆环
        canvas.drawArc(
                new RectF(circlePadding * 2, circlePadding * 2,
                        getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, 360, false, backCirclePaint);
        //2.绘制颜色渐变圆环
        LinearGradient linearGradient = new LinearGradient(circlePadding, circlePadding,
                getMeasuredWidth() - circlePadding,
                getMeasuredHeight() - circlePadding,
                gradientColorArray, null, Shader.TileMode.MIRROR);
        gradientCirclePaint.setShader(linearGradient);
        gradientCirclePaint.setShadowLayer(10, 10, 10, Color.RED);
        canvas.drawArc(
                new RectF(circlePadding * 2, circlePadding * 2,
                        getMeasuredWidth() - circlePadding * 2, getMeasuredHeight() - circlePadding * 2), -90, (float) (percent / 100.0) * 360, false, gradientCirclePaint);

        //半径
        float radius = (getMeasuredWidth() - circlePadding * 3) / 2;
        //X轴中点坐标
        int centerX = getMeasuredWidth() / 2;

        //3.绘制100份线段，切分空心圆弧
        for (float i = 0; i < 360; i += 3.6) {
            double rad = i * Math.PI / 180;
            float startX = (float) (centerX + (radius - circleBorderWidth) * Math.sin(rad));
            float startY = (float) (centerX + (radius - circleBorderWidth) * Math.cos(rad));

            float stopX = (float) (centerX + radius * Math.sin(rad) + 1);
            float stopY = (float) (centerX + radius * Math.cos(rad) + 1);

            canvas.drawLine(startX, startY, stopX, stopY, linePaint);
        }

        //4.绘制文字
        float textWidth = textPaint.measureText(percent + "%");
        int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
        canvas.drawText(percent + "%", centerX - textWidth / 2, centerX + textHeight / 4, textPaint);
        if (flag3) {
            if (flag1) {
                setPercent(percent);

            } else {
                if (percent == 100) {
                    flag = false;
                } else if (percent == 0) {
                    flag = true;
                }
                if (flag == false) {
                    setPercents(percent);
                } else {
                    setPercent(percent);
                }
            }
        } else {
            setPercentss(percent);
        }

    }

    public void setPercentss(int percent) {
        this.percent = percent;
        invalidate();
    }

    public void setData(boolean flag3) {
        this.flag3 = flag3;
    }

    /**
     * 设置百分比
     *
     * @param percent
     */
    public void setPercent(int percent) {

        percent++;
        if (percent < 0) {
            percent = 0;

        } else if (percent > 100) {
            percent = 100;
        }

        this.percent = percent;
        invalidate();

    }

    public void setPercents(int percent) {

        percent--;
        if (percent < 0) {
            percent = 0;
        } else if (percent > 100) {
            percent = 100;
        }

        this.percent = percent;
        invalidate();

    }

    public void setRtate(boolean flag2) {
        this.flag1 = flag2;
    }
}

接着是XML里的布局

<Button
    android:id="@+id/zanting"
    android:textSize="25sp"
    android:text="暂停"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/myview"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="64dp"
    android:layout_marginEnd="64dp"
    android:layout_marginTop="74dp" />

<Button
    android:id="@+id/zidong"
    android:textSize="25sp"
    android:text="自动循环"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="68dp"
    android:layout_marginStart="68dp"
    android:layout_alignBaseline="@+id/zanting"
    android:layout_alignBottom="@+id/zanting"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<com.example.hasee.week_one_demo.MyView
    android:id="@+id/myview"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="31dp"/>

最后再MainActivity中添加我们的控制按钮:

public class MainActivity extends AppCompatActivity {
    private Button button;
    private Button zanting;
    private MyView myView;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            myView.setData(true);
            myView.setRtate(false);

        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myView = (MyView) findViewById(R.id.myview);
        button = (Button) findViewById(R.id.zidong);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                handler.sendEmptyMessage(0);

            }
        });
        zanting = (Button) findViewById(R.id.zanting);
        zanting.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                myView.setData(false);
            }
        });
    }
}

这样我们的一个自定义View实现圆形加载的效果就实现了!