最近工作中遇到個要做倒計時60秒的進度條，經過參考別人的資料做出來需求的效果。廢話少說先來個效果：

一定想知道是怎麼實現的吧！下面是程式碼

public class CountDownView extends View {
  //圓輪顏色
  private int mRingColor;
  //預設圓顏色
  private int mRingNormalColor ;
  //圓輪寬度
  private float mRingWidth;
  //圓輪進度值文字大小
  private int mRingProgessTextSize;
  //寬度
  private int mWidth;
  //高度
  private int mHeight;
  private Paint mPaint;
  private Paint paintNormal;
  //圓環的矩形區域
  private RectF mRectF;
  //
  private int mProgessTextColor;
  private int mCountdownTime;
  private float mCurrentProgress;
  private OnCountDownFinishListener mListener;
  private ValueAnimator valueAnimator ;
 
  public CountDownView(Context context) {
    this(context,null);
  }
 
  public CountDownView(Context context,AttributeSet attrs) {
    this(context,attrs,0);
  }
 
  public CountDownView(Context context,AttributeSet attrs,int defStyleAttr) {
    super(context,defStyleAttr);
    TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CountDownView);
    mRingColor = a.getColor(R.styleable.CountDownView_ringColor,context.getResources().getColor(R.color.circle_progress));
    mRingWidth = a.getFloat(R.styleable.CountDownView_ringWidth,8);
    mRingProgessTextSize = a.getDimensionPixelSize(R.styleable.CountDownView_progressTextSize,DisplayUtil.sp2px(context,12));
    mProgessTextColor = a.getColor(R.styleable.CountDownView_progressTextColor,context.getResources().getColor(R.color.circle_progress));
    mCountdownTime = a.getInteger(R.styleable.CountDownView_countdownTime,60);
    mRingNormalColor = a.getColor(R.styleable.CountDownView_ringColor,context.getResources().getColor(R.color._circle_progress));
    a.recycle();
    paintNormal = new Paint(Paint.ANTI_ALIAS_FLAG);
    paintNormal.setAntiAlias(true);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setAntiAlias(true);
    this.setWillNotDraw(false);
  }
 
  public void setCountdownTime(int mCountdownTime) {
    this.mCountdownTime = mCountdownTime;
  }
 
  @Override
  protected void onLayout(boolean changed,int left,int top,int right,int bottom) {
    super.onLayout(changed,left,top,right,bottom);
    mWidth = getMeasuredWidth();
    mHeight = getMeasuredHeight();
    mRectF = new RectF(0 + mRingWidth / 2,0 + mRingWidth / 2,mWidth - mRingWidth / 2,mHeight - mRingWidth / 2);
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    /**
     *圓環
     */
    //顏色
    mPaint.setColor(mRingColor);
    //空心
    mPaint.setStyle(Paint.Style.STROKE);
    //寬度
    mPaint.setStrokeWidth(mRingWidth);
    /**
     *預設圓環
     */
    //顏色
    paintNormal.setColor(mRingNormalColor);
    //空心
    paintNormal.setStyle(Paint.Style.STROKE);
    //寬度
    paintNormal.setStrokeWidth(mRingWidth);
    canvas.drawArc(mRectF,360,false,paintNormal);
    canvas.drawArc(mRectF,-90,mCurrentProgress - 360,mPaint);
    //繪製文字
    Paint textPaint = new Paint();
    textPaint.setAntiAlias(true);
    textPaint.setTextAlign(Paint.Align.CENTER);
    String text = mCountdownTime - (int) (mCurrentProgress / 360f * mCountdownTime) + "";
    textPaint.setTextSize(mRingProgessTextSize);
    textPaint.setColor(mProgessTextColor);
 
    //文字居中顯示
    Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
    int baseline = (int) ((mRectF.bottom + mRectF.top - fontMetrics.bottom - fontMetrics.top) / 2);
    canvas.drawText(text,mRectF.centerX(),baseline,textPaint);
  }
 
  private ValueAnimator getValA(long countdownTime) {
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,100);
    valueAnimator.setDuration(countdownTime);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.setRepeatCount(0);
    return valueAnimator;
  }
  /**
   * 開始倒計時
   */
  public void startCountDown() {
    setClickable(false);
    valueAnimator = getValA(mCountdownTime * 1000);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        float i = Float.valueOf(String.valueOf(animation.getAnimatedValue()));
        mCurrentProgress = (int) (360 * (i / 100f));
        invalidate();
      }
    });
    valueAnimator.start();
    valueAnimator.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        //倒計時結束回撥
        if (mListener != null) {
          mListener.countDownFinished();
        }
        setClickable(true);
      }
 
    });
  }
  public void setAddCountDownListener(OnCountDownFinishListener mListener) {
    this.mListener = mListener;
  }
  public interface OnCountDownFinishListener {
    void countDownFinished();
  }
  public void stopCountDown(){
    valueAnimator.end();
  }
 
}

然後新建一個attr.xml;

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="CountDownView">
    <!--顏色-->
    <attr name="ringColor" format="color" />
    <!-- 進度文字的字型大小 -->
    <attr name="progressTextSize" format="dimension" />
    <!-- 圓環寬度 -->
    <attr name="ringWidth" format="float" />
    <!--進度文字顏色-->
    <attr name="progressTextColor" format="color"/>
    <!--倒計時-->
    <attr name="countdownTime" format="integer"/>
  </declare-styleable>
</resources>

這樣一個自定義的view就寫完了；那怎麼用呢；佈局就不說了；

losTime.setAddCountDownListener(new CountDownView.OnCountDownFinishListener() {
        @Override
        public void countDownFinished() {
          倒計時結束
        }
      });
losTime.setCountdownTime(60);
losTime.startCountDown();

這樣就輕輕鬆鬆的跑起來了，希望能幫助到需要的你；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。