平時都路上嘁锯，生活上遇到新奇的事情请毛，都要立即打開微信視頻錄下來發(fā)給朋友看看志鞍。這個錄制進(jìn)度條看起來還不錯哦，就仿著寫了一個方仿，不是樣式完全的高仿固棚，是功能的仿制。
微信效果：
微信效果
自制效果：
自制效果
實(shí)現(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ù)表示起始角度，當(dāng)前角度戴差，-90度為12點(diǎn)方向送爸，0度為3點(diǎn)方向，這里用-90度作為起始；第四個參數(shù)表示是否與中心點(diǎn)填充為扇形袭厂，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毫秒更新一次進(jìn)度纹磺，可設(shè)置拍攝總時間totalTime;時間轉(zhuǎn)化為進(jì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.按下開始拍攝，只要抬起就完成拍攝橄杨，進(jìn)度恢復(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);
}
}
喜歡我就點(diǎn)我吧，讀者的關(guān)注和喜歡是我不懈的動力式矫。
