前言
大家在平時的生活上遇到新奇的事情，都要立即打開微信視頻錄下來發給朋友看看。這個錄制進度條看起來還不錯哦，就仿著寫了一個，不是樣式完全的高仿，是功能的仿制。下面話不多說了，來一起看看詳細的介紹吧。
微信效果：
源碼下載：
自制效果：
實現過程：
1.自定義圓半徑和圓環顏色屬性：
<declare-styleable name="CiclePercentView"> <attr name="radius" format="integer"/> <attr name="ring_color" format="color"/> </declare-styleable>
2.設置3支畫筆，分別畫圓環，背景淺白色，中心白色圓。
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() ，第一個參數表示圓弧外切矩形大小；第二、三個參數表示起始角度，當前角度，-90度為12點方向，0度為3點方向，這里用-90度作為起始；第四個參數表示是否與中心點填充為扇形，false表示只畫圓弧線；
畫圓弧drawArc()方法參數
@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毫秒更新一次進度，可設置拍攝總時間totalTime;時間轉化為進度范圍為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.按下開始拍攝，只要抬起就完成拍攝，進度恢復為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); }}附：Android Canvas drawArc方法介紹
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
下面演示drawArc的四種不同用法,
1. 填充圓弧但不含圓心：
mPaints[0] = new Paint();mPaints[0].setAntiAlias(true);mPaints[0].setStyle(Paint.Style.FILL);mPaints[0].setColor(0x88FF0000);mUseCenters[0] = false;
2. 填充圓弧帶圓心（扇形）
mPaints[1] = new Paint(mPaints[0]);mPaints[1].setColor(0x8800FF00);mUseCenters[1] = true;
3. 只繪圓周，不含圓心
mPaints[2] = new Paint(mPaints[0]);mPaints[2].setStyle(Paint.Style.STROKE);mPaints[2].setStrokeWidth(4);mPaints[2].setColor(0x880000FF);mUseCenters[2] = false;
4. 只繪圓周，帶圓心（扇形）
mPaints[3] = new Paint(mPaints[2]);mPaints[3].setColor(0x88888888);mUseCenters[3] = true;
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
