平時都路上，生活上遇到新奇的事情，都要立即打開微信視頻錄下來發(fā)給朋友看看。這個錄制進度條看起來還不錯哦，就仿著寫了一個，不是樣式完全的高仿，是功能的仿制。

微信效果：

微信效果

github代碼直通車

自制效果：

自制效果

實現(xiàn)過程：

1.自定義圓半徑和圓環(huán)顏色屬性：

    <declare-styleable name="CiclePercentView">
        <attr name="radius" format="integer"/>
        <attr name="ring_color" format="color"/>
    </declare-styleable>

2.設(shè)置3支畫筆，分別畫圓環(huán)，背景淺白色，中心白色圓。

    private void init() {
        paint = new Paint();
        paint.setColor(ringColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(14);

        bgPaint = new Paint();
        bgPaint.setAntiAlias(true);
        bgPaint.setColor(getResources().getColor(R.color.halfwhite));

        centerPaint = new Paint();
        centerPaint.setAntiAlias(true);
        centerPaint.setColor(Color.WHITE);

        //起始角度
        startAngle = -90;
    }

3.依次畫背景圓，中心圓，圓弧。canvas.drawArc()，第一個參數(shù)表示圓弧外切矩形大??；第二、三個參數(shù)表示起始角度，當前角度，-90度為12點方向，0度為3點方向，這里用-90度作為起始；第四個參數(shù)表示是否與中心點填充為扇形，false表示只畫圓弧線；

畫圓弧drawArc()方法參數(shù)

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //畫圓弧
        RectF rectf = new RectF(6,6,dp2px(radius-2),dp2px(radius-2));
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,dp2px(radius)/2,bgPaint);
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,dp2px(radius/3)/2,centerPaint);
        canvas.drawArc(rectf,startAngle,curAngle,false,paint);
    }

4.計時器，每100毫秒更新一次進度，可設(shè)置拍攝總時間totalTime;時間轉(zhuǎn)化為進度范圍為0-100；

    public void countDown(final int totalTime){
        countDownTimer = new CountDownTimer(totalTime, (long)(totalTime/100f)) {
            @Override
            public void onTick(long millisUntilFinished) {
                curPercentate = (int) ((totalTime-millisUntilFinished)/(float)totalTime*100);
                percentToAngle(curPercentate);
            }

            @Override
            public void onFinish() {
                curPercentate = 0;
                percentToAngle(curPercentate);
            }
        }.start();
    }

5.按下開始拍攝，只要抬起就完成拍攝，進度恢復(fù)為0。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                countDown(countdownTime);
                break;
            case MotionEvent.ACTION_UP:
                countDownTimer.cancel();
                curPercentate = 0;
                percentToAngle(curPercentate);
                break;
        }
        return true;
    }

CiclePercentView類完整代碼：

public class CiclePercentView extends View{
    private Paint paint;
    private int curAngle;
    private int curPercentate;
    private Paint bgPaint,centerPaint;
    private int radius;
    private int ringColor;
    private int startAngle;
    private int countdownTime;
    private CountDownTimer countDownTimer;

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

    public CiclePercentView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.CiclePercentView);
        radius = array.getInt(R.styleable.CiclePercentView_radius,85);
        ringColor = array.getColor(R.styleable.CiclePercentView_ring_color,Color.GREEN);
        array.recycle();

        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(ringColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(14);

        bgPaint = new Paint();
        bgPaint.setAntiAlias(true);
        bgPaint.setColor(getResources().getColor(R.color.halfwhite));

        centerPaint = new Paint();
        centerPaint.setAntiAlias(true);
        centerPaint.setColor(Color.WHITE);

        //起始角度
        startAngle = -90;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //畫圓弧
        RectF rectf = new RectF(6,6,dp2px(radius-2),dp2px(radius-2));
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,dp2px(radius)/2,bgPaint);
        canvas.drawCircle(getMeasuredWidth()/2,getMeasuredHeight()/2,dp2px(radius/3)/2,centerPaint);
        canvas.drawArc(rectf,startAngle,curAngle,false,paint);
    }

    private void percentToAngle(int percentage){
        curAngle =  (int) (percentage/100f*360);
        invalidate();
    }

    public void setCountdownTime(int countdownTime){
        this.countdownTime = countdownTime;
    }

    public void countDown(final int totalTime){
        countDownTimer = new CountDownTimer(totalTime, (long)(totalTime/100f)) {
            @Override
            public void onTick(long millisUntilFinished) {
                curPercentate = (int) ((totalTime-millisUntilFinished)/(float)totalTime*100);
                percentToAngle(curPercentate);
            }

            @Override
            public void onFinish() {
                curPercentate = 0;
                percentToAngle(curPercentate);
            }
        }.start();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                countDown(countdownTime);
                break;
            case MotionEvent.ACTION_UP:
                countDownTimer.cancel();
                curPercentate = 0;
                percentToAngle(curPercentate);
                break;
        }
        return true;
    }

    private int dp2px(int dp){
        return (int) (getContext().getResources().getDisplayMetrics().density*dp + 0.5);
    }
}

喜歡我就點我吧，讀者的關(guān)注和喜歡是我不懈的動力。