先看效果图(图片是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
//每次绘制一个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);
}
public void setStyles(int circleRadius,int ringRadius,int circleColor,int bgColor,float percentDraw){
circlePaint.setColor(circleColor);
bgPaint.setColor(bgColor);
setCustomDraw(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、最后是布局文件:
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
本文地址:https://blog.csdn.net/zz51233273/article/details/107377616