效果展示

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);
}