android自定義view圓形百分比progressBar√

前言

最近工作太不飽和，基本是這個節奏：
8.40到公司，喫個早餐，邊喫邊玩手機
9.消化一下，打開電腦看會新聞。阿三們又在搞事，反對made in china的產品、禁用幾十款app，加上國安法在香港也有遊行不服的，哎，我大清太難了
9.30-10.帶薪拉屎時間
10.如果當天有茅臺搶購，也是要打開京東搶一搶的，雖然東哥暫時還不認我這個兄弟
11.要開始做點事了（反正不是工作的事）
12.-1.30喫飯、午覺
14.把每個羣的消息瀏覽一遍，最活躍的羣非同學們的炒股羣莫屬（每天如此），都在討論牛市要來了，準備進場一把梭哈。我也想試試，但是奈何錢不夠，今天還要交房租。
15.要開始做點事了（一般是逛知乎、寫博客）
16.下半場休息時間，這個時候一般抽根黃鶴樓鬥鬥地主，豆子很快就會輸完，好在我有兩個號，想騙我充值、看廣告，不存在的
17.繼續做“事”
18.準點下班（怪不好意思的）

h5、小程序開發倒是挺忙的，過幾天要正兒八經學一下小程序，希望能一起幫前端的兄弟一起迭代之前的小程序。
現在呢，時間總不能浪費，寫寫blog吧，記錄一下，說不定還能幫到需要的朋友。

進入正題，繼續接着上一篇android自定義view實現進度條動畫、按鈕漸變及錄製狀態控制，趁熱打鐵，繼續來畫個進度條，這個跟上一篇實現方式類似，多了一個百分比數字顯示以及完成後的√。

上效果：

沒什麼好解釋的，直接上代碼：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;

/**
 * 進度
 *
 * @author ly
 * date 2020/3/3 11:02
 */
public class CircleProgressView extends View {

    private static final int COMPLETE = 360;
    private int okSpeed = 3;

    private Paint paint;
    //進度圈顏色
    private int circleOutsideColor;
    //進度顏色
    private int circleProgressColor;
    private float progressW;
    //進度條圓圈半徑
    private float circleProgressR;
    private OnProgressListener onProgressListener;

    private RectF progressRect;
    private float progress;
    private String progressText;
    private Path okPath;
    private int sX, sY;
    private int mX;
    private int eX;
    private int cX, cY;

    public CircleProgressView(Context context) {
        super(context);
        init();
    }

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

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        circleOutsideColor = 0xffF2F4F5;
        circleProgressColor = 0xff6066DD;
        paint = new Paint();
        paint.setAntiAlias(true);//抗鋸齒
        paint.setDither(true); //設置防抖動
    }

    /**
     * @param progress 已加載進度/總進度
     * @author ly on 2020/3/3 16:41
     */
    public void setProgress(float progress) {
        this.progress = progress * COMPLETE;
        if (this.progress >= COMPLETE) {//表示錄製達到最大時長，自動結束
            this.progress = COMPLETE;
        }
        progressText = (int) (progress * 100) + "%";
        invalidate();
    }

    public void reset() {
        setProgress(0);

    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (circleProgressR == 0 || okPath == null) {
            int w = getWidth();
            progressW = w * 0.061f;
            circleProgressR = (w - progressW) / 2f;

            progressRect = new RectF(0 + progressW / 2, 0 + progressW / 2, w - progressW / 2, w - progressW / 2);

            int okW = (int) ((getWidth() - progressW) * 0.45);
            int okH = (int) ((getHeight() - progressW) * 0.32);

            cX = sX = (getWidth() - okW) / 2;
            cY = sY = getHeight() / 2;
            mX = (int) (sX + 0.39 * okW);
            int mY = (int) (sY + 0.35 * okW);
            eX = getWidth() - (getWidth() - okW) / 2;
            int eY = (getHeight() - okH) / 2;

            okPath = new Path();
            okPath.moveTo(sX, sY);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫進度圈
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(circleOutsideColor);
        paint.setStrokeWidth(progressW);//設置畫筆粗細
        canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, circleProgressR, paint);

        //畫進度就是圓弧
        //時鐘3點的方向爲0度，順時鐘方向爲正，-90是圓弧的開始點，即12點位置開始，
        //sweepAngle掃過的角度，調整該值即可實現進度順時針加載(0-360)
        paint.setColor(circleProgressColor);
        canvas.drawArc(progressRect, -90, progress, false, paint);

        if (progress < COMPLETE) {
            if (!TextUtils.isEmpty(progressText)) {
                // 將座標原點移到控件中心
                int dx = getWidth() / 2;
                int dy = getHeight() / 2;
                canvas.translate(dx, dy);
                // 繪製居中文字
                paint.setTextSize(PixelUtil.sp2px(30));
                // 文字寬
                float textWidth = paint.measureText(progressText);
                // 文字baseline在y軸方向的位置
                float baseLineY = Math.abs(paint.ascent() + paint.descent()) / 2;
                paint.setStyle(Paint.Style.FILL);
//            paint.setStrokeWidth(2);
                canvas.drawText(progressText, -textWidth / 2, baseLineY, paint);
            }
        } else {//加載完成，畫√
            if (cX < eX) {//來個動畫湊合用
                cX += okSpeed;
                if (cX < mX) {
                    cY += okSpeed;
                } else {
                    cY -= okSpeed;
                }
                invalidate();
            } else {
                postDelayed(() -> {
                    if (onProgressListener != null)
                        onProgressListener.complete();
                }, 1500);
            }
            okPath.lineTo(cX, cY);
            canvas.drawPath(okPath, paint);
        }
    }

    public float getProgress() {
        return progress / COMPLETE;
    }

    public void setOnProgressListener(OnProgressListener onProgressListener) {
        this.onProgressListener = onProgressListener;
    }

    public interface OnProgressListener {
        void complete();
    }
}

還是說一下那個√的動畫吧，其實是個規則的圖形，都是直線。x軸的座標是增加的，y座標先遞減再遞增。由於要畫的√的兩條直線可拆分爲兩個等腰三角形對應的斜邊，所以x和y座標的增減量（okSpeed）都相等。這裏有兩個優化點：
1、okSpeed的值是固定的，可添加插值器來改變okSpeed的值，從而達到畫√的速率
2、這個√的開始和結束的兩端是直角，略生硬，可優化成圓角（在兩個地方對應drawCircle即可）
其他沒什麼好說的，上dialog的代碼：

import android.content.Context;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;

/**
 * @author ly
 * date 2019/8/1 17:36
 */
public class CircleProgressDialog extends BaseDialog {

    private CircleProgressView circleProgressView;
    private TextView tv_dialog_progress_status;
    private ImageView iv_dialog_progress_close;
    private OnProgressCallBack onProgressCallBack;

    public CircleProgressDialog(@NonNull Context context, OnProgressCallBack onProgressCallBack) {
        super(context);
        this.onProgressCallBack = onProgressCallBack;

    }

    @Override
    public int getLayoutResId() {
        return R.layout.v_dialog_circle_progress;
    }

    @Override
    public void initViews() {
        if (getWindow() != null) {
            getWindow().getAttributes().width = ScreenUtil.getScreenWidth() * 4 / 5;
            getWindow().setGravity(Gravity.CENTER);
        }
        setCanceledOnTouchOutside(false);
        setCancelable(false);

        circleProgressView = findViewById(R.id.circleProgressView);
        tv_dialog_progress_status = findViewById(R.id.tv_dialog_progress_status);
        iv_dialog_progress_close = findViewById(R.id.iv_dialog_progress_close);
        iv_dialog_progress_close.setOnClickListener(v -> {
            if (onProgressCallBack != null)
                onProgressCallBack.intoNextPage();
            dismiss();
        });
        iv_dialog_progress_close.setVisibility(View.GONE);

        circleProgressView.setOnProgressListener(() -> {
            if (onProgressCallBack != null)
                onProgressCallBack.intoNextPage();
            dismiss();
        });
        setOnDismissListener(dialog -> circleProgressView.reset());
    }

    public void setProgress(float progress) {
        circleProgressView.setProgress(progress);
        if (progress >= 1) {
            tv_dialog_progress_status.setText("發佈成功");
            iv_dialog_progress_close.setVisibility(View.VISIBLE);
        } else {
            tv_dialog_progress_status.setText("正在發佈中...");
            iv_dialog_progress_close.setVisibility(View.GONE);
        }
    }

    public float getProgress() {
        return circleProgressView.getProgress();
    }

    public interface OnProgressCallBack {
        void intoNextPage();
    }
}

v_dialog_circle_progress:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/shape_white_r16"
    android:padding="12dp">

    <ImageView
        android:id="@+id/iv_dialog_progress_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@mipmap/ico_close4dialog" />


    <com.xxx.CircleProgressView
        android:id="@+id/circleProgressView"
        android:layout_width="117dp"
        android:layout_height="117dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="34dp" />

    <TextView
        android:id="@+id/tv_dialog_progress_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/circleProgressView"
        android:layout_centerHorizontal="true"
        android:paddingTop="23dp"
        android:paddingBottom="28dp"
        android:textColor="#ff727a7c"
        android:textSize="15sp"
        tools:text="正在發佈中..." />
</RelativeLayout>

最後給個fake進度，就可以看到效果啦：

   private ScheduledFuture<?> scheduledFuture;
   private void fakeProgress() {
    	CircleProgressDialog circleProgressDialog = new CircleProgressDialog(this, () -> {});
   		circleProgressDialog.show();
        scheduledFuture = ExecutorServiceManager.get().getExecutorService().scheduleWithFixedDelay(() -> {
            runOnUiThread(() -> {
                float progress = circleProgressDialog.getProgress();
                if (!circleProgressDialog.isShowing() || videoNoteInfo != null) {
                    if (scheduledFuture != null)
                        scheduledFuture.cancel(true);
                    scheduledFuture = null;
                    return;
                }
                progress += 0.006f;
                circleProgressDialog.setProgress(progress);
            });
        }, 0, 20, TimeUnit.MILLISECONDS);
    }

如果對大家有幫助，請點個贊以鼓勵我不斷前進~

end