自定义View圆形进度条 跳转页面

效果展示

1.导入依赖

implementation 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

2.创建自定义View类

public class ProgressView extends View {
private Context context;
private int height, width;  //自定义控件的宽高
private float progress;  //进度

private Paint paint;  //蓝色扇形所需的画笔
private Paint bkPaint;  //白色圆形所需的画笔
private Paint tvPaint;  //圆里面的进度字所需的画笔
private Rect mBound;  //用于获取字体的大小

public ProgressView(Context context) {
    super(context);

}
public ProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    this.paint = new Paint();
    this.bkPaint = new Paint();
    this.tvPaint = new Paint();
    this.mBound = new Rect();
    init();
}

private void init() {
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.parseColor("#50A3FE"));
    paint.setAntiAlias(true);

    bkPaint.setStyle(Paint.Style.FILL);
    bkPaint.setColor(Color.parseColor("#ececec"));
    bkPaint.setAntiAlias(true);

    tvPaint.setColor(Color.parseColor("#000000"));
    tvPaint.setTextSize(30);
}
//获取当前控件的高度和宽度，单位是像素
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    height = MeasureSpec.getSize(heightMeasureSpec);
    width = MeasureSpec.getSize(widthMeasureSpec);
}

//获取到了宽高后我们就可以开始画了，在CircleProgressBar 的onDraw方法里面画扇形，圆形，字。

private float set2Degree(float sendFt) {   //将进度的数值变为弧度数值，进度100，弧度有360，所以比例是3.6
    return sendFt * 3.6f;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (width * height == 0) {
        return;
    }
    canvas.drawArc(new RectF(0, 0, width, height), 270, set2Degree(progress), true, paint);
    //画蓝色扇形
    canvas.drawCircle(width / 2, height / 2, width / 2 - 15, bkPaint);  //画绿色圆形，半径比蓝色扇形的小5px
    if (progress < 100) {   //进度没达到100%时显示进度
        String strPro = String.valueOf((int) progress) + "%";
        tvPaint.getTextBounds(strPro, 0, strPro.length(), mBound);
        canvas.drawText(strPro, width / 2 - mBound.width() / 2, height / 2 + mBound.height()
                / 2, tvPaint);
    } else {  //达到100%后显示完成
        String text = "完成";
        tvPaint.getTextBounds(text, 0, text.length(), mBound);
        canvas.drawText(text, width / 2 - mBound.width() / 2, height / 2 + mBound.height() /
                2, tvPaint);
    }
}

//更新弧度，在CircleProgressBar里面加个public方法来实时更新进度。--进度发生改变后调用改方法修改进度
public void setProgress(float progress) {
    this.progress = progress;
    postInvalidate();
}

3.xml布局

<com.example.apple.week2.ui.widge.ProgressView
android:id="@+id/circle_progress"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50dp"
/>

4.在Activity中写

public class BootPageActivity extends AppCompatActivity {

private ProgressView circleProgressBar;
private AnimatorSet animatorSet;
private float progress = 0;
private Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        if (msg.what == 1) {
            if (progress <= 99) {
//                    animatorSet.start();
                ++progress;
                circleProgressBar.setProgress(progress);  //更新进度条
                sendEmptyMessageDelayed(1, 100);
            }
            if (progress == 100) {
                startActivity(new Intent(BootPageActivity.this, ShowActivity.class));
            }
        }
    }
};
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_boot_page);
    //初始化控件
    circleProgressBar = findViewById(R.id.circle_progress);

    //发送消息
    handler.sendEmptyMessageDelayed(1, 100);
}