Android 自定义View实现动画形式加载环形图

先看效果图（图片是gif，比较卡顿）：

通过调用postInvalidateDelayed()延时绘制的方法，可以实现以上图片中的延时效果，下面来看具体代码：

1、自定义View类：

public class MyProgressView extends View {
    private Paint circlePaint;  //圆环的画笔
    private Paint bgPaint;      //环背景的画笔
    private RectF circleRectF;  //圆环依据的矩阵
    private int ringRadius=50;     //环的半径
    private int drawNums=60;   //绘制的次数，用来实现动画效果
    private int totalAngle=360; //总共的角度
    private int drawedAngle=0;  //已经绘制的角度
    private float percentDraw=0;    //需要绘制的百分比

    public MyProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(percentDraw==0)return;
        //画圆环的背景色
        canvas.drawArc(circleRectF,0,360,false,bgPaint);
        if(drawedAngle<totalAngle){
            //每次绘制一个0到drawedAngle+(360/drawNums)角度的圆弧
            canvas.drawArc(circleRectF,0,drawedAngle+(totalAngle/drawNums),false,circlePaint);
            drawedAngle=drawedAngle+totalAngle/drawNums;
            //延迟360/drawNums秒后继续绘制，实现动画效果
            postInvalidateDelayed(totalAngle/drawNums);
        }else{
            //每次切换程序都会调用重画，所以这里要保留一个完整的圆环绘制
            drawedAngle=totalAngle;
            canvas.drawArc(circleRectF,0,drawedAngle,false,circlePaint);
        }
    }

    @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); //获取高的尺寸
        if (widthMode == MeasureSpec.AT_MOST){//如果是wrap_content，我们要得到控件需要多大的尺寸
            //控件的宽度就是环的半径加上两边的内边距。内边距就是padding值
            widthSize = (int) (getPaddingLeft()  + circleRectF.right-circleRectF.left+ringRadius +getPaddingRight());
        }
        if (heightMode == MeasureSpec.AT_MOST){
            heightSize = (int) (getPaddingTop() + circleRectF.bottom-circleRectF.top+ringRadius +getPaddingBottom());
        }
        //保存测量宽度和测量高度
        setMeasuredDimension(widthSize, heightSize);
    }

    private void init(){
        circlePaint=new Paint();
        circlePaint.setColor(Color.RED);
        circlePaint.setStrokeWidth(ringRadius);
        circlePaint.setStyle(Paint.Style.STROKE);
        bgPaint=new Paint();
        bgPaint.setColor(Color.parseColor("#FFB6C1"));
        bgPaint.setStrokeWidth(ringRadius);
        bgPaint.setStyle(Paint.Style.STROKE);
    }

    /* circleRadius：圆的半径
     * ringRadius：环的半径
     * circleColor：环的颜色
     * bgColor：环的背景颜色
     * percentDraw：绘制的百分比
     * */
    public void setStyles(int circleRadius,int ringRadius,int circleColor,int bgColor,float percentDraw){
        circlePaint.setColor(circleColor);
        bgPaint.setColor(bgColor);
        setCustomDraw(circleRadius,ringRadius,percentDraw);
    }

    /* circleRadius:圆的半径
     * ringRadius：环的半径
     * percentDraw：绘制的百分比
     * */
    public void setStyles(int circleRadius,int ringRadius,float percentDraw){
        setCustomDraw(circleRadius,ringRadius,percentDraw);
    }

    private void setCustomDraw(int circleRadius,int ringRadius,float percentDraw){
        this.percentDraw=percentDraw;
        this.ringRadius=ringRadius;
        if(percentDraw<1)totalAngle=(int)(totalAngle*percentDraw);  //计算总共需要绘制的角度
        circlePaint.setStrokeWidth(ringRadius);
        bgPaint.setStrokeWidth(ringRadius);
        circleRectF=new RectF(ringRadius/2,ringRadius/2,circleRadius*2+ringRadius/2,circleRadius*2+ringRadius/2);
        invalidate();
    }
}

2、在Activity中使用该自定义View：

public class MainActivity extends AppCompatActivity {
    private MyProgressView myProgressView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        myProgressView=findViewById(R.id.progress);
        myProgressView.setStyles(200,100,0.65f);
        //myProgressView.setStyles(200,100, Color.BLUE,Color.parseColor("#E1FFFF"),0.65f);
    }
}

3、最后是布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.hualinfo.myviewtext.MyProgressView
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

 

本文地址：https://blog.csdn.net/zz51233273/article/details/107377616