淘先锋技术网

首页 1 2 3 4 5 6 7

先看效果图(图片是gif,比较卡顿):

bbb23260b00b73e41a856e79bb481cf0.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